Merge branch 'refs/heads/master' into binding

Conflicts:
	js/components/layout/tools-list.reel/tools-list.html
	js/components/layout/tools-properties.reel/tools-properties.html
	js/document/document-html.js
	js/document/templates/app/main.js
	js/panels/Panel.reel/Panel.js
	node_modules/montage/ui/native-control.js

Signed-off-by: Armen Kesablyan <armen@motorola.com>

5 files changed, 117 insertions, 139 deletions

diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index f65d5bc0..596580b4 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -16,7 +16,23 @@
             "owner": {
                 "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]",
                 "properties": {
-                    "element": {"#": "cpp_popup"}
+                    "element": {"#": "cpp_popup"},
+                    "wheel": {"#": "cntnr_wheel"},
+                    "images": {"#": "cntnr_images"},
+                    "gradients": {"#": "cntnr_gradients"},
+                    "palettes": {"#": "cntnr_palettes"},
+                    "alpha": {"#": "cntnr_alpha"},
+                    "alphaSlider": {"#": "alpha_slider"},
+                    "alphaHottext": {"#": "alpha_hottext"},
+                    "btnPrevious": {"#": "btn_previous"},
+                    "btnCurrent": {"#": "btn_current"},
+                    "btnWheel": {"#": "btn_wheel"},
+                    "btnImage": {"#": "btn_images"},
+                    "btnGradient": {"#": "btn_gradients"},
+                    "btnPalette": {"#": "btn_palettes"},
+                    "btnNocolor": {"#": "btn_nocolor"},
+                    "inputHex": {"#": "input_hex"}
+                    
                 }
             }
         }
@@ -31,32 +47,32 @@
                         
                         <div class="cp_pu_history">
                                 
-                                <button class="cp_pu_color_previous">Previous Color</button>
-                                <button class="cp_pu_color_current">Current Color</button>
+                                <button data-montage-id="btn_previous" class="cp_pu_color_previous">Previous Color</button>
+                                <button data-montage-id="btn_current" class="cp_pu_color_current">Current Color</button>
                                 
                                 </div>
                         
-                        <div class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
+                        <div data-montage-id="input_hex" class="cp_pu_hex">#<input class="cp_pu_hottext_hex" maxlength="6" /></div>
                         
-                        <button class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
-                        <button class="cp_pu_images" title="Background Image">Images</button>
-                        <button class="cp_pu_gradients" title="Gradient">Gradients</button>
-                        <button class="cp_pu_palettes" title="Color Palette">Palettes</button>
-                        <button class="cp_pu_nocolor" title="No Color">No Color</button>
+                        <button data-montage-id="btn_wheel" class="cp_pu_wheel" title="Color Wheel">Color Wheel</button>
+                        <button data-montage-id="btn_images" class="cp_pu_images" title="Background Image">Images</button>
+                        <button data-montage-id="btn_gradients" class="cp_pu_gradients" title="Gradient">Gradients</button>
+                        <button data-montage-id="btn_palettes" class="cp_pu_palettes" title="Color Palette">Palettes</button>
+                        <button data-montage-id="btn_nocolor" class="cp_pu_nocolor" title="No Color">No Color</button>
                         
                 </div>
                 
                 <div class="cp_pu_content">
-                        <div class="cp_pu_wheel_container cp_pu_content_container"></div>
-                        <div class="cp_pu_gradient_container cp_pu_content_container"></div>
-                        <div class="cp_pu_palette_container cp_pu_content_container"></div>
-                        <div class="cp_pu_image_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_wheel" class="cp_pu_wheel_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_gradients" class="cp_pu_gradient_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_palettes" class="cp_pu_palette_container cp_pu_content_container"></div>
+                        <div data-montage-id="cntnr_images" class="cp_pu_image_container cp_pu_content_container"></div>
                 </div>
                 
-                <div class="cp_pu_alpha">
+                <div data-montage-id="cntnr_alpha" class="cp_pu_alpha">
                         <div class="cp_pu_a_label">Alpha</div>
-                        <div class="cp_pu_a_slider"></div>
-                        <input class="cp_pu_a_hottext"/>
+                        <div data-montage-id="alpha_slider" class="cp_pu_a_slider"></div>
+                        <input data-montage-id="alpha_hottext" class="cp_pu_a_hottext"/>
                         <div class="cp_pu_a_label2">%</div>
                 </div>
                 
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index dd7e6192..192c62fb 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -23,79 +23,61 @@ exports.ColorPanelPopup = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //Storing color manager
     _colorManager: {
-        enumerable: false,
-        value: false
+        value: null
     },
     ////////////////////////////////////////////////////////////////////
     //Color manager
     colorManager: {
-        enumerable: true,
-        get: function() {
-            return this._colorManager;
-        },
-        set: function(value) {
-                if (value !== this._colorManager) {
-                        this._colorManager = value;
-                }
-        }
+        get: function() {return this._colorManager;},
+        set: function(value) {if (value !== this._colorManager) this._colorManager = value;}
     },
     ////////////////////////////////////////////////////////////////////
     //Storing color panel
     _colorPanel: {
-        enumerable: false,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //Color panel
     colorPanel: {
-        enumerable: true,
-        get: function() {
-            return this._colorPanel;
-        },
-        set: function(value) {
-                this._colorPanel = value;
-        }
+        get: function() {return this._colorPanel;},
+        set: function(value) {this._colorPanel = value;}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _components: {
+                value: null  
     },
     ////////////////////////////////////////////////////////////////////
     //
     setNoColor: {
-        enumerable: true,
-        value: function (e) {
-                this.colorManager.applyNoColor();
+        value: function (code) {
+                if (this.colorManager) this.colorManager.applyNoColor(code);
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
     prepareForDraw: {
-        enumerable: false,
         value: function () {
                 //
-                this.element._popups = {containers: {wheel: null, palette: null, gradient: null, image: null}};
-                this.element._components = {wheel: null, combo: null};
-                //Storing containers for reference
-                this.element._popups.containers.wheel = this.element.getElementsByClassName('cp_pu_wheel_container')[0];
-                this.element._popups.containers.palette = this.element.getElementsByClassName('cp_pu_palette_container')[0];
-                this.element._popups.containers.gradient = this.element.getElementsByClassName('cp_pu_gradient_container')[0];
-                this.element._popups.containers.image = this.element.getElementsByClassName('cp_pu_image_container')[0];
-                this.element._popups.containers.alpha = this.element.getElementsByClassName('cp_pu_alpha')[0];
+                this._components = null;
+                this._components = {wheel: null, combo: null};
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
     willDraw: {
-        enumerable: false,
         value: function() {
                 //
                 this.element.style.opacity = 0;
                 //
-                this.element._components.combo = {};
-                this.element._components.combo.slider = Slider.create();
-                        this.element._components.combo.hottext = HotText.create();
+                this._components.combo = {};
+                this._components.combo.slider = Slider.create();
+                        this._components.combo.hottext = HotText.create();