var colorPickerEl;
var colorPickerDialog;
var colorPickerTool;

function initColorPicker(){
	//Some shortcuts to use in our example:
	var Event=YAHOO.util.Event,
		Dom=YAHOO.util.Dom,
		lang=YAHOO.lang;
	
	var handleSubmit = function() {
		this.hide();
		
		updatePickerForm();
	}
	
	var handleRemove = function() {
		this.hide();
		
		Dom.setStyle(colorPickerEl,"display","none");
		
		updatePickerForm();
	}

	colorPickerDialog = new YAHOO.widget.Dialog("yui-picker-panel", { 
		width : "500px",
		close: false,
		draggable: false,
		fixedcenter : true,
		visible : false, 
		constraintoviewport : true,
		buttons : [ { text:"Select Color", handler:handleSubmit, isDefault:true },
		            { text:"Remove Color", handler:handleRemove}]
    });
 
	colorPickerDialog.renderEvent.subscribe(function() {
		if (!colorPickerTool) { 
			colorPickerTool = new YAHOO.widget.ColorPicker("yui-picker", {
				container: colorPickerDialog,
				images: {
					PICKER_THUMB: "../images/assets/picker_thumb.png",
					HUE_THUMB: "../images/assets/hue_thumb.png"
				}
			});
			
			colorPickerTool.on("rgbChange", function (p_oEvent) {
                var sColor = "#" + this.get("hex");
                Dom.setStyle(colorPickerEl, "backgroundColor", sColor);
            });

		}
	});	
    
	colorPickerDialog.render();
}

YAHOO.util.Event.onDOMReady(initColorPicker);

function showPicker(el){
	colorPickerEl = el.id;
	
	var rgb = new RGBColor(Dom.getStyle(colorPickerEl,"backgroundColor"));
	colorPickerTool.setValue([rgb.r,rgb.g,rgb.b],false);
	colorPickerTool.set("hex",Dom.getStyle(colorPickerEl,"backgroundColor").substring(1));
	colorPickerDialog.show();
}

function updatePickerForm(){
	var i=1;
	var colorStr = "";
	while(true){
		var colorId = "color" + i;
		var colorEl = document.getElementById(colorId);
		
		if(colorEl && Dom.getStyle(colorEl,"display")!="none"){
			var c = new RGBColor(YAHOO.util.Dom.getStyle(colorEl, "backgroundColor"));
			colorStr += c.toHex() + ";";
		}else{
			break;
		}
		i++;
	}
	
	var formEl = document.getElementById("editable-colour");
	formEl.value = colorStr.substring(0, colorStr.length-1);
}

function newColor(){
	var i=1;
	while(true){
		var colorId = "color" + i;
		var colorEl = document.getElementById(colorId);
		
		if(!colorEl){
			break;
		}
		i++;
	}
	containerEl = document.getElementById("color-container");
	containerEl.innerHTML += '<div id="color'+i+'" class="colour-picker" onclick="showPicker(this);" style="background-color:#000000"></div>';
	showPicker(document.getElementById("color"+i));
}