YAHOO.util.Event.onContentReady("demo", function () 
		{

        function onButtonOption() {
			
            oColorPickerMenu.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb"></div></div>');
            oColorPickerMenu.body.id = "color-picker-container";
            oColorPickerMenu.render(this.get("container"));
            oColorPicker1 = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });
		
			oColorPicker1.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('bg2').value), false);
            oColorPickerMenu.align();

            oColorPicker1.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton.set("value", sColor);
				YAHOO.util.Dom.get("bg2").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor;
            
            });
			
			oColorPickerMenu.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton", container: "bcb"});
			oOKButton.on("click", function () {oColorPickerMenu.hide();});
			
            this.unsubscribe("option", onButtonOption);
        }
				
		function onButtonOption2() {

            oColorPickerMenu2.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb2"></div></div>');
            oColorPickerMenu2.body.id = "color-picker-container2";
            oColorPickerMenu2.render(this.get("container"));
            oColorPicker2 = new YAHOO.widget.ColorPicker(oColorPickerMenu2.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });

            oColorPicker2.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('tc1').value), false);
			oColorPickerMenu2.align();

            oColorPicker2.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton2.set("value", sColor);
				YAHOO.util.Dom.get("tc1").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color2", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color2").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu2.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton2", container: "bcb2"});
			oOKButton.on("click", function () {oColorPickerMenu2.hide();});
            
            this.unsubscribe("option", onButtonOption2);
        }
				
		function onButtonOption3() {

			oColorPickerMenu3.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb3"></div></div>');
            oColorPickerMenu3.body.id = "color-picker-container3";
            oColorPickerMenu3.render(this.get("container"));
            oColorPicker3 = new YAHOO.widget.ColorPicker(oColorPickerMenu3.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });

            oColorPicker3.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('tc2').value), false);
			oColorPickerMenu3.align();

            oColorPicker3.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton3.set("value", sColor);
				YAHOO.util.Dom.get("tc2").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color3", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color3").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu3.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton3", container: "bcb3"});
			oOKButton.on("click", function () {oColorPickerMenu3.hide();});
            
            this.unsubscribe("option", onButtonOption3);
        }
				
		function onButtonOption4() {

			oColorPickerMenu4.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb4"></div></div>');
            oColorPickerMenu4.body.id = "color-picker-container4";
            oColorPickerMenu4.render(this.get("container"));
            oColorPicker4 = new YAHOO.widget.ColorPicker(oColorPickerMenu4.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });

            oColorPicker4.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('tc3').value), false);
			oColorPickerMenu4.align();

            oColorPicker4.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton4.set("value", sColor);
				YAHOO.util.Dom.get("tc3").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color4", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color4").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu4.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton4", container: "bcb4"});
			oOKButton.on("click", function () {oColorPickerMenu4.hide();});
            
            this.unsubscribe("option", onButtonOption4);
        }
		
		function onButtonOption5() {

            oColorPickerMenu5.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb5"></div></div>');
            oColorPickerMenu5.body.id = "color-picker-container5";
            oColorPickerMenu5.render(this.get("container"));
            oColorPicker5 = new YAHOO.widget.ColorPicker(oColorPickerMenu5.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });

            oColorPicker5.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('plt1').value), false);
			oColorPickerMenu5.align();

            oColorPicker5.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton5.set("value", sColor);
				YAHOO.util.Dom.get("plt1").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color5", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color5").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu5.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton5", container: "bcb5"});
			oOKButton.on("click", function () {oColorPickerMenu5.hide();});
            
            this.unsubscribe("option", onButtonOption5);
        }
		
		function onButtonOption6() {

            oColorPickerMenu6.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb6"></div></div>');
            oColorPickerMenu6.body.id = "color-picker-container6";
            oColorPickerMenu6.render(this.get("container"));
            oColorPicker6 = new YAHOO.widget.ColorPicker(oColorPickerMenu6.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });
			oColorPicker6.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('plt2').value), false);
            oColorPickerMenu6.align();

            oColorPicker6.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton6.set("value", sColor);
				YAHOO.util.Dom.get("plt2").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color6", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color6").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu6.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton6", container: "bcb6"});
			oOKButton.on("click", function () {oColorPickerMenu6.hide();});
            
            this.unsubscribe("option", onButtonOption6);
        }
		
		function onButtonOption7() {

            oColorPickerMenu7.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb7"></div></div>');
            oColorPickerMenu7.body.id = "color-picker-container7";
            oColorPickerMenu7.render(this.get("container"));
            oColorPicker7 = new YAHOO.widget.ColorPicker(oColorPickerMenu7.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });
			oColorPicker7.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('plbg3').value), false);
            oColorPickerMenu7.align();

            oColorPicker7.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton7.set("value", sColor);
				YAHOO.util.Dom.get("plbg3").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color7", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color7").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu7.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton7", container: "bcb7"});
			oOKButton.on("click", function () {oColorPickerMenu7.hide();});
            
            this.unsubscribe("option", onButtonOption7);
        }
		
		function onButtonOption8() {

            oColorPickerMenu8.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb8"></div></div>');
            oColorPickerMenu8.body.id = "color-picker-container8";
            oColorPickerMenu8.render(this.get("container"));
            oColorPicker8 = new YAHOO.widget.ColorPicker(oColorPickerMenu8.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });
			oColorPicker8.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('plbg4').value), false);
            oColorPickerMenu8.align();

            oColorPicker8.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton8.set("value", sColor);
				YAHOO.util.Dom.get("plbg4").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color8", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color8").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu8.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton8", container: "bcb8"});
			oOKButton.on("click", function () {oColorPickerMenu8.hide();});
            
            this.unsubscribe("option", onButtonOption8);
        }
		
		function onButtonOption9() {

            oColorPickerMenu9.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb9"></div></div>');
            oColorPickerMenu9.body.id = "color-picker-container9";
            oColorPickerMenu9.render(this.get("container"));
            oColorPicker9 = new YAHOO.widget.ColorPicker(oColorPickerMenu9.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });
			oColorPicker9.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('plbg5').value), false);
            oColorPickerMenu9.align();

            oColorPicker9.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton9.set("value", sColor);
				YAHOO.util.Dom.get("plbg5").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color9", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color9").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu9.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton9", container: "bcb9"});
			oOKButton.on("click", function () {oColorPickerMenu9.hide();});
            
            this.unsubscribe("option", onButtonOption9);
        }
		
		function onButtonOption10() {

            oColorPickerMenu10.setBody('<div style="background-color:#e3e3e3;padding-bottom:4px;text-align:center"><div style="height:190px;width:200px;"></div><div id="bcb10"></div></div>');
            oColorPickerMenu10.body.id = "color-picker-container10";
            oColorPickerMenu10.render(this.get("container"));
            oColorPicker10 = new YAHOO.widget.ColorPicker(oColorPickerMenu10.body.id, { showcontrols: false,
                                    images: {  PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
                                        HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png" } });
			oColorPicker10.setValue(YAHOO.util.Color.hex2rgb(YAHOO.util.Dom.get('bg3').value), false);
            oColorPickerMenu10.align();

            oColorPicker10.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                oButton10.set("value", sColor);
				YAHOO.util.Dom.get("bg3").value=this.get("hex");
                YAHOO.util.Dom.setStyle("current-color10", "backgroundColor", sColor);
                YAHOO.util.Dom.get("current-color10").innerHTML = "Current color is " + sColor;
            });
			
			oColorPickerMenu10.hideEvent.subscribe(function(){setTimeout(UpdatePreview, 1);},this,true);
			var oOKButton = new YAHOO.widget.Button({label:"&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;", id:"okbutton10", container: "bcb10"});
			oOKButton.on("click", function () {oColorPickerMenu10.hide();});
            
            this.unsubscribe("option", onButtonOption10);
        }
      
			
			oButton.on("appendTo", function () {oColorPickerMenu.setBody("&#32;");oColorPickerMenu.body.id = "color-picker-container";oColorPickerMenu.render(this.get("container"));});
			oButton.on("option", onButtonOption);
			oButton.on("click", function () { o=document.getElementById('wizard');o.bg2.value=String(this.get("value")).substring(1);});
			
			oButton2.on("appendTo", function () {oColorPickerMenu2.setBody("&#32;");oColorPickerMenu2.body.id = "color-picker-container2";oColorPickerMenu2.render(this.get("container"));});
			oButton2.on("option", onButtonOption2);
			oButton2.on("click", function () { o=document.getElementById('wizard');o.tc1.value=String(this.get("value")).substring(1);});
			
			oButton3.on("appendTo", function () {oColorPickerMenu3.setBody("&#32;");oColorPickerMenu3.body.id = "color-picker-container3";oColorPickerMenu3.render(this.get("container"));});
			oButton3.on("option", onButtonOption3);
			oButton3.on("click", function () { o=document.getElementById('wizard');o.tc2.value=String(this.get("value")).substring(1);});
			
			oButton4.on("appendTo", function () {oColorPickerMenu4.setBody("&#32;");oColorPickerMenu4.body.id = "color-picker-container4";oColorPickerMenu4.render(this.get("container"));});
			oButton4.on("option", onButtonOption4);
			oButton4.on("click", function () { o=document.getElementById('wizard');o.tc3.value=String(this.get("value")).substring(1);});
			
			oButton5.on("appendTo", function () {oColorPickerMenu5.setBody("&#32;");oColorPickerMenu5.body.id = "color-picker-container5";oColorPickerMenu5.render(this.get("container"));});
			oButton5.on("option", onButtonOption5);
			oButton5.on("click", function () { o=document.getElementById('wizard');o.plt1.value=String(this.get("value")).substring(1);});
			
			oButton6.on("appendTo", function () {oColorPickerMenu6.setBody("&#32;");oColorPickerMenu6.body.id = "color-picker-container6";oColorPickerMenu6.render(this.get("container"));});
			oButton6.on("option", onButtonOption6);
			oButton6.on("click", function () { o=document.getElementById('wizard');o.plt2.value=String(this.get("value")).substring(1);});
			
			oButton7.on("appendTo", function () {oColorPickerMenu7.setBody("&#32;");oColorPickerMenu7.body.id = "color-picker-container7";oColorPickerMenu7.render(this.get("container"));});
			oButton7.on("option", onButtonOption7);
			oButton7.on("click", function () { o=document.getElementById('wizard');o.plbg3.value=String(this.get("value")).substring(1);});
			
			oButton8.on("appendTo", function () {oColorPickerMenu8.setBody("&#32;");oColorPickerMenu8.body.id = "color-picker-container8";oColorPickerMenu8.render(this.get("container"));});
			oButton8.on("option", onButtonOption8);
			oButton8.on("click", function () { o=document.getElementById('wizard');o.plbg4.value=String(this.get("value")).substring(1);});
			
			oButton9.on("appendTo", function () {oColorPickerMenu9.setBody("&#32;");oColorPickerMenu9.body.id = "color-picker-container9";oColorPickerMenu9.render(this.get("container"));});
			oButton9.on("option", onButtonOption9);
			oButton9.on("click", function () { o=document.getElementById('wizard');o.plbg5.value=String(this.get("value")).substring(1);});
			
			oButton10.on("appendTo", function () {oColorPickerMenu10.setBody("&#32;");oColorPickerMenu10.body.id = "color-picker-container10";oColorPickerMenu10.render(this.get("container"));});
			oButton10.on("option", onButtonOption10);
			oButton10.on("click", function () { o=document.getElementById('wizard');o.bg3.value=String(this.get("value")).substring(1);});

			
    });