var colorPicker;
	
ColorPickerTool = function(element)
{
    this.element = element;	 
    this.panel = this.element.getElementsByTagName("table")[0];
    this.targetElement = null;
};

ColorPickerTool.prototype = 
{	
    toggle: function(placeHolderId, targetElementId, onChangeHandler)
    {
        if (!this.panel) {
            alert('color picker not found');
            return true;
        }
        
        //the actual DOM object which will have it's background color set by the colorPicker
        this.targetElement = $get(targetElementId);
        
        //the area in the DOM where the colorPicker should be placed
        var placeHolder = $get(placeHolderId);
            
        //if color picker isn't already active for the target area, force it to be visible
        var display = "";

        //if color picker IS already active for the target area, toggle visibility
        if (this.element.parentNode == placeHolder) {
            //toggle visibility
            this.panel.style.display = this.element.style.display == "" ? "none" : "";
        }else{ 
			this.panel.style.display = display;
			placeHolder.appendChild(this.panel);
        }
        this.onChange = onChangeHandler;
     },
    
    setColor: function(element)
    {
        this.targetElement.bgColor = element.bgColor;
        this.panel.style.display = "none";
        this.onChange(this.targetElement.bgColor);
    }
};
if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();