analytics/webcontent/prompting/CColorPicker.js

/*
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| BI and PM: prmt
 *| (C) Copyright IBM Corp. 2002, 2016
 *|
 *| US Government Users Restricted Rights - Use, duplication or
 *| disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 *|
 *+------------------------------------------------------------------------+
*/


/*
	CColorPicker.js
	This script provides interactivity for the color prompt control.
*/

//	Constructor to create a new Color Picker prompt
//	sPromptId: The id of the prompt control (String)
//	sRef: the name of this object
//	sCallBackFunction: function to call with the new color value as a parameter
//	bAutoReset: automatically reset the color to the default if true
//	sDefaultValue: a default CSS RGB value to initialize the controls
//			(e.g.	 '#000000', '#FFFFFF')
//	sType: define the whether the control is foreground or background
//			(e.g. TYPE_COLOR | TYPE_BACKGROUND_COLOR)
//	sTooltip: string to used as a tooltip for the color picker button
//	bToolbar: (Optional, Default: true). Is this button in a toolbar?

function CColorPicker(sPromptId, sRef, sCallBackFunction, bAutoReset, sDefaultValue, sType, sToolTip, bToolbar)
{
	// set up control
	this.m_sSkin = (typeof getPromptSkin != "undefined" ? getPromptSkin() : "../skins/corporate");
	this.m_sImgPath = this.m_sSkin + "/prompting/images/";
	this.m_sToolTip = sToolTip;
	this.m_bToolbar = (bToolbar != false);

	if (sType == TYPE_BACKGROUND_COLOR)
	{
		this.m_sIcon = "bgcolor.gif";
	}
	else
	{
		this.m_sIcon = "color.gif";
	}

	this.m_sPromptId = sPromptId;
	this.m_sRef = sRef;

	//the parent object
	this.m_oParent = document.getElementById('selectColor' + this.m_sPromptId);

	//dialog
	this.m_sDialogId = "colorDialog" + sPromptId;
	this.m_sCaptionId = "colorDialogCaption" + sPromptId;
	this.m_sPaletteId = "colorDialogPalette" + sPromptId;

	//drawn palettes
	this.m_sSelectedPalette = null;
	this.m_bNamedPallete = false;
	this.m_bWebPallete = false;
	this.m_bCustomPallete = false;

	//auto reset back to default
	this.m_bAutoReset = (bAutoReset != null) ? bAutoReset : false;

	//current color
	this.m_sColor = ((sDefaultValue != null) && (sDefaultValue != '')) ? parseRGB(sDefaultValue) : '';

	this.m_oNamedColor = new CNamedColor();
	this.m_oNamedColors = null;

	//custom palette textboxes
	this.m_sCustomR = "customR" + sPromptId;
	this.m_sCustomG = "customG" + sPromptId;
	this.m_sCustomB = "customB" + sPromptId;
	this.m_sCustomPreview = "customPreview" + sPromptId;

	//set callback function
	this.m_sCallBackFunction = sCallBackFunction;

	this.init();

	// update the UI
	this.draw();
}

//initialize the control
function CColorPicker_init()
{
	//draw the button
	var s = (this.m_bToolbar ? '<button ' : '<span ' );
	if (this.m_sToolTip != null && this.m_sToolTip != "") {
		s += 'title="'+this.m_sToolTip+'" ';
	}
	if (this.m_bToolbar) {
		s += 'class="clsCPButton" onmouseover="this.className=\'clsCPButtonOver\'" onmouseout="this.className=\'clsCPButton\'" type="button" ';
	}
	s += 'onclick="'+this.m_sRef+'.togglePicker(event)"><img src="'+ this.m_sImgPath + this.m_sIcon +'">';
	s += (this.m_bToolbar ? '</button>' : '</span>');

	//draw the picker
	s += '<br/>';
	if (window.ie) { s += '<iframe id="iframe'+this.m_sDialogId+'" src="'+this.m_sImgPath+'spacer.gif" style="display:none;position:absolute;margin-top:1px;"></iframe>'; }
	s += '<div id="'+this.m_sDialogId+'" class="clsCPMenuContainer" style="display:none;position:absolute;width:312px;margin-top:1px;" onclick="CColorPicker_preventBubbling(event);">';
	s += '<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td id="'+ this.m_sCaptionId +'" class="clsCPCaptionBar"></td></tr>';
	s += '<tr><td id="'+ this.m_sPaletteId +'" class="clsCPPalette"></td></tr></table>';
	s += '</div>';

	this.m_oParent.innerHTML = s;
	this.m_oDialog = document.getElementById(this.m_sDialogId);
	this.m_oDialogCaption = document.getElementById(this.m_sCaptionId);
	this.m_oDialogPalette = document.getElementById(this.m_sPaletteId);
}

//render the UI for the control
function CColorPicker_draw()
{
	this.drawCaptionBar();
	this.setActiveColor('');
}

//render the caption bar for the picker dialog
function CColorPicker_drawCaptionBar()
{
	var s = '<select id="'+this.m_sPromptId+'_select" onchange="' +this.m_sRef+ '.setPalette(this.options[this.selectedIndex].value)" onclick="CColorPicker_preventBubbling(event);">';
	//named palette
	s += '<option ';
	s += ' value="'+PALETTE_NAMED+'">' + PMT_CP_NAMED_COLORS + '</option>';
	//web palette
	s += '<option ';
	s += ' value="'+PALETTE_WEB+'">' + PMT_CP_WEB_SAFE_COLORS + '</option>';
	//custom
	s += '<option ';
	s += ' value="'+PALETTE_CUSTOM+'">' + PMT_CP_CUSTOM_COLOR + '</option>';
	s += '</select>';
	this.m_oDialogCaption.innerHTML = s;
}

function CColorPicker_drawPalette()
{
	if (!this.m_bNamedPalette && this.m_sSelectedPalette == PALETTE_NAMED)
	{
		this.drawNamedPalette();
		this.m_bNamedPalette = true;
		this.setActiveClass(true, false);
	}
	else if (!this.m_bWebPalette && this.m_sSelectedPalette == PALETTE_WEB)
	{
		this.drawWebsafePalette();
		this.m_bWebPalette = true;
		this.setActiveClass(true, false);
	}
	else if (!this.m_bCustomPalettte && this.m_sSelectedPalette == PALETTE_CUSTOM)
	{
		this.drawCustomPalette();
		this.m_bCustomPalette = true;
		this.setActiveClass(true, false);
	}
}

//custom palette dialog
function CColorPicker_drawCustomPalette()
{
	var color = this.getColor();
	var s = '';
	s += '<table id="'+this.m_sPromptId+'_'+PALETTE_CUSTOM+'" cellpadding="0" cellspacing="0" border="0" width="100%" style="display:none" onclick="CColorPicker_preventBubbling(event);">';

	//user selection
	s += '<tr><td valign="top" class="clsCPCustomTB">';
		s += '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
		s += '<tr><td class="clsControlLabel pc" colspan=2>' + PMT_CP_RED + '</td></tr>';
		s += '<tr><td class="clsReadOnlyText">#</td><td class="clsReadOnlyText"><input type="text" size="2" maxlength="2" value="'+getR(color)+'" name="'+ this.m_sCustomR +'" id="'+ this.m_sCustomR +'" onchange="' + this.m_sRef +'.updateCustomStyle()"></td></tr>';
		s += '<tr><td class="clsControlLabel pc" colspan=2>' + PMT_CP_GREEN + '</td></tr>';
		s += '<tr><td class="clsReadOnlyText"></td><td class="clsReadOnlyText"><input type="text" size="2" maxlength="2" value="'+getG(color)+'" name="'+ this.m_sCustomG +'" id="'+ this.m_sCustomG +'" onchange="' + this.m_sRef +'.updateCustomStyle()"></td></tr>';
		s += '<tr><td class="clsControlLabel pc" colspan=2>' + PMT_CP_BLUE + '</td></tr>';
		s += '<tr><td class="clsReadOnlyText"></td><td class="clsReadOnlyText"><input type="text" size="2" maxlength="2" value="'+getB(color)+'" name="'+ this.m_sCustomB +'" id="'+ this.m_sCustomB +'" onchange="' + this.m_sRef +'.updateCustomStyle()"></td></tr>';
		s += '</table>';
	s += '</td>';
	//preview
	s += '<td valign="top">';
		s += '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
		s += '<tr><td valign="top" class="clsControlLabel pc">' + PMT_CP_PREVIEW + '</td></tr>';
		s += '<tr><td valign="middle" align="center" class="clsCPPreview"><div class="clsCPPreviewSwatch" id="'+this.m_sCustomPreview+'" style="background-color:' + color +'" onclick="' + this.m_sRef +'.applyCustomStyle()"></div></td></tr>';
		s += '</table>';
	s += '</tr></td>';

	s += '<tr><td colspan="2" align="right"><span class="clsCPLink" onclick="' + this.m_sRef +'.applyCustomStyle()">' + PMT_CP_APPLY_NOW + '</span></td></tr></table>';
	this.m_oDialogPalette.innerHTML += s;
}

//named palette dialog
function CColorPicker_drawNamedPalette()
{
	//create named palette array if it doesn't already exist
	if (this.m_oNamedColors == null)
	{
		this.m_oNamedColors = this.m_oNamedColor.getNamedColors();
	}

	var iRowCount = Math.floor(this.m_oNamedColors.length / 2);

	var s = '<table id="'+this.m_sPromptId+'_'+PALETTE_NAMED+'" cellpadding="0" cellspacing="0" border="0" width="100%" style="display:none" onclick="CColorPicker_preventBubbling(event);">';
	//default
	s += '<tr><td><table cellpadding="0" cellspacing="3" border="0" width="100%">';
	s += '<tr><td id="'+this.m_sPromptId+'_namedColor0" title="'+ this.m_oNamedColors[0].getName() +'" onclick="'+this.m_sRef +'.setColor(\''+ this.m_oNamedColors[0].getColor() +'\')" class="clsCPItem" onMouseOver="'+this.m_sRef+'.buttonMouseHandler(this, \'over\');" onMouseOut="'+this.m_sRef+'.buttonMouseHandler(this, \'out\');" onMouseDown="'+this.m_sRef+'.buttonMouseHandler(this, \'down\');">';
	s += '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
	s += '<tr><td valign="top" width="15">';
	s += '<table cellpadding="0" cellspacing="0" border="0"><tr>';
	s += '<td id="'+this.m_sPromptId+'_namedColorSwatch'+0+'" class="clsCPCell" style="background-color:'+ this.m_oNamedColors[0].getColor() + '">';
	s += '<img src="'+ this.m_sImgPath + 'default_color.gif" height="11" width="11" border="0" title="'+ this.m_oNamedColors[0].getName() +'"></td>';
	s += '</tr></table></td>';
	s += '<td class="clsCPLink" style="padding-left:5px;padding-right:30px;white-space:nowrap;">' + this.m_oNamedColors[0].getName();
	s += '</td></tr></table>';
	s += '</td><td/></tr></table>';
	s += '<tr><td valign="top" width="50%"><table cellpadding="0" cellspacing="3" border="0" width="100%">';

	for (var j=1; j < this.m_oNamedColors.length; j++)
	{
		s += '<tr><td id="'+this.m_sPromptId+'_namedColor'+j+'" title="'+ this.m_oNamedColors[j].getColor() +'" onclick="'+this.m_sRef +'.setColor(\''+ this.m_oNamedColors[j].getColor() +'\')" class="clsCPItem" onMouseOver="'+this.m_sRef+'.buttonMouseHandler(this, \'over\');" onMouseOut="'+this.m_sRef+'.buttonMouseHandler(this, \'out\');" onMouseDown="'+this.m_sRef+'.buttonMouseHandler(this, \'down\');">';
			s += '<table cellpadding="0" cellspacing="0" border="0" width="100%">';
			s += '<tr><td valign="top" width="15">';
			s += '<table cellpadding="0" cellspacing="0" border="0"><tr>';
			s += '<td id="'+this.m_sPromptId+'_namedColorSwatch'+j+'" class="clsCPCell" style="background-color:'+ this.m_oNamedColors[j].getColor() + '">';
			s += '<img src="'+ this.m_sImgPath + 'spacer.gif" height="11" width="11" border="0" title="'+ this.m_oNamedColors[j].getColor() +'"></td>';
			s += '</tr></table></td>';
			s += '<td class="clsCPLink" style="padding-left:5px;padding-right:30px;white-space:nowrap;">' + this.m_oNamedColors[j].getName();
			s += '</td></tr></table>';
		if (j==iRowCount)
		{
			s += '</td></tr></table></td><td valign="top" width="50%"><table cellpadding="0" cellspacing="3" border="0" width="100%">';
		}
		else
		{
			s += '</td></tr>';
		}
	}

	s += '</td></tr></table></td></tr></table>';

	this.m_oDialogPalette.innerHTML += s;
}

//web safe palette dialog
function CColorPicker_drawWebsafePalette()
{
	var s = '<table id="'+this.m_sPromptId+'_'+PALETTE_WEB+'" cellpadding="0" cellspacing="0" border="0" style="display:none" onclick="CColorPicker_preventBubbling(event);">';

	var v_aColorBytes = new Array( "00", "33", "66", "99", "CC", "FF" );
	var v_iNumberOfBytes = v_aColorBytes.length;
	var iCounter = 1;

	s+= '<tr>';
	for ( var r = 0; r < v_iNumberOfBytes; r++ )
	{
		for ( var g = 0; g < v_iNumberOfBytes; g++ )
		{
			for ( var b = 0; b < v_iNumberOfBytes; b++ )
			{
				var v_sRGB = "#" + v_aColorBytes[r] + v_aColorBytes[g] + v_aColorBytes[b];
				s+= '<td id="'+this.m_sPromptId+'_ws_'+ v_aColorBytes[r] + v_aColorBytes[g] + v_aColorBytes[b] +'"style="background-color:' + v_sRGB + '" class="clsCPCell" onMouseOver="'+this.m_sRef+'.buttonMouseHandler(this, \'over\');" onMouseOut="'+this.m_sRef+'.buttonMouseHandler(this, \'out\');" onMouseDown="'+this.m_sRef+'.buttonMouseHandler(this, \'down\');" onclick="' + this.m_sRef +'.setColor(\''+ v_sRGB +'\');return false"><img src="'+ this.m_sImgPath +'spacer.gif" height="15" width="15" border="0" title="'+ v_sRGB +'">';
				s+=	'</td>';

				if (iCounter % 18 === 0) { s+= '</tr><tr>'; }

				iCounter ++;
			}
		}
	}
	s+= '</tr>';
	s += '</table>';

	this.m_oDialogPalette.innerHTML += s;
}

function CColorPicker_setActiveColor(s)
{
	this.setActiveClass(false,false);
	this.m_sColor = parseRGB(s);
	this.setActiveClass(true,true);
}

function CColorPicker_setActiveClass(bActive, bSetPalette)
{
	var classSuffix = (bActive ? '_active' : '');
	var bNamed = false;
	var bIsWebSafe = false;
	var idx = this.m_oNamedColor.indexOf(this.m_sColor);

	//if it is a named color
	if (idx >= 0)
	{
		if (bSetPalette) {
			this.setPalette(PALETTE_NAMED);
		}

		var nc = document.getElementById(this.m_sPromptId+'_namedColor'+idx);
		if (nc != null) {
			nc.className = 'clsCPItem' + classSuffix;
		}

		var ncs = document.getElementById(this.m_sPromptId+'_namedColorSwatch'+idx);
		if (ncs != null) {
			ncs.className = 'clsCPCell' + classSuffix;
		}

		bNamed = true;
	}
	if (this.m_sColor.indexOf('#') === 0 && this.m_sColor.length == 7)
	{
		for (var i=1; i < this.m_sColor.length; i+=2)
		{
			var ch1 = this.m_sColor.charAt(i).toLowerCase();
			var ch2 = this.m_sColor.charAt(i+1).toLowerCase();
			if (ch1 == ch2 && (ch1 == '0' || ch1 == '3' || ch1 == '6' || ch1 == '9' || ch1 == 'c' || ch1 == 'f')) {
				bIsWebSafe = true;
			}
			else
			{
				bIsWebSafe = false;
				break;
			}
		}

		if (bIsWebSafe)
		{
			//find color on websafe palette and activate it
			var wsc = document.getElementById(this.m_sPromptId+'_ws_'+this.m_sColor.substring(1));
			if (wsc != null) {
				wsc.className = 'clsCPCell' + classSuffix;
			}

			if (!bNamed && bSetPalette) {
				this.setPalette(PALETTE_WEB);
			}
		}
	}

	if (!bNamed && !bIsWebSafe && bSetPalette) {
		this.setPalette(PALETTE_CUSTOM);
	}

	//fill in custom color palette
	var oR = document.getElementById(this.m_sCustomR);
	var oG = document.getElementById(this.m_sCustomG);
	var oB = document.getElementById(this.m_sCustomB);
	if (oR != null && oG != null && oB != null)
	{
		if (this.m_sColor.length == 7)
		{
			oR.value = getR(this.m_sColor);
			oG.value = getG(this.m_sColor);
			oB.value = getB(this.m_sColor);
		}
		else
		{
			oR.value = '';
			oG.value = '';
			oB.value = '';
		}

		this.updateCustomStyle();
	}
}

//apply the user selected color
function CColorPicker_setColor(s)
{
	if (this.m_sColor != s)
	{
		this.setActiveColor(s);

		if (typeof this.m_sCallBackFunction == 'string' && this.m_sCallBackFunction !== null && this.m_sCallBackFunction !== "")
		{
			var theCommand = this.m_sCallBackFunction + '("' + this.m_sColor + '")';
			eval (theCommand);
		}
	}

	//hide the picker
	this.hide();

	if (this.m_bAutoReset) {
		this.setActiveColor('');
	}
}

//update the color picker with the new user selection
function CColorPicker_updateCustomStyle()
{
	var oR = document.getElementById(this.m_sCustomR);
	var oG = document.getElementById(this.m_sCustomG);
	var oB = document.getElementById(this.m_sCustomB);

	if ((typeof oR != 'undefined') && (typeof oG != 'undefined') && (typeof oB != 'undefined'))
	{
		var s = parseRGB("#" + oR.value + oG.value + oB.value);

		var oCustomPreview = document.getElementById(this.m_sCustomPreview);
		if (typeof oCustomPreview != 'undefined' && s.length == 7 || s == '')
		{
			oCustomPreview.style.backgroundColor = s;
			return s;
		}
	}

	return '';
}

//take a user specified custom color and apply it
function CColorPicker_applyCustomStyle()
{
	this.setColor(this.updateCustomStyle());
}

//get the current color for the dialog
function CColorPicker_getColor()
{
	return this.m_sColor;
}

//set a new palette
function CColorPicker_setPalette(s)
{
	if (this.m_sSelectedPalette != s)
	{
		this.m_sSelectedPalette = s;

		this.drawPalette();

		var palette = null;
		palette = document.getElementById(this.m_sPromptId+'_'+PALETTE_NAMED);
		if (palette != null) { palette.style.display = 'none'; }
		palette = document.getElementById(this.m_sPromptId+'_'+PALETTE_WEB);
		if (palette != null) { palette.style.display = 'none'; }
		palette = document.getElementById(this.m_sPromptId+'_'+PALETTE_CUSTOM);
		if (palette != null) { palette.style.display = 'none'; }

		palette = document.getElementById(this.m_sPromptId+'_'+this.m_sSelectedPalette);
		if (palette != null) { palette.style.display = (window.ie ? 'block' : 'table'); }

		//set the drop down
		var palSel = document.getElementById(this.m_sPromptId+'_select');
		if (palSel != null)
		{
			for (var i=0; i < palSel.options.length; i++)
			{
				if (palSel.options[i].value == this.m_sSelectedPalette)
				{
					palSel.selectedIndex = i;
					break;
				}
			}
		}
	}
}

//switch that will hide and show the picker dialog
function CColorPicker_togglePicker(e)
{
	if (this.m_oDialog.style.display == "inline")
	{
		this.hide();
	}
	else
	{
		this.show();
	}
	this.preventBubbling(e);
}

function CColorPicker_preventBubbling(e)
{
	if (typeof e == "object")
	{
		if (window.ie)
		{
			e.returnValue = false;
			e.cancelBubble = true;
		}
		else
		{
			e.preventDefault();
			e.stopPropagation();
		}
	}
}

// show the picker dialog
function CColorPicker_show()
{
	//hide any other pickers that might be visible
	if ((typeof hidePickers != 'undefined') && (hidePickers))
	{
		hidePickers();
	}
	this.m_oDialog.style.zIndex = '3';
	this.m_oDialog.style.display = 'inline';

	var iframe = document.getElementById('iframe'+this.m_sDialogId);
	if (iframe != null)
	{
		iframe.style.zIndex = '2';
		iframe.style.width = this.m_oDialog.offsetWidth + "px";
		iframe.style.height = this.m_oDialog.offsetHeight + "px";
		iframe.style.display = 'inline';
	}
}

//hide the picker dialog
function CColorPicker_hide()
{
	var iframe = document.getElementById('iframe'+this.m_sDialogId);
	if (iframe != null) {
		iframe.style.zIndex = '1';
		iframe.style.display = 'none';
	}

	this.m_oDialog.style.display = 'none';
	this.m_oDialog.style.zIndex = '1';

	this.setActiveClass(true,true);
}

function CColorPicker_buttonMouseHandler(button, action)
{
	var namedColor = 'namedColor';
	var idx = button.id.indexOf(namedColor);
	if (idx >= 0)
	{
		idx = button.id.substring(idx+namedColor.length);

		if (this.m_oNamedColor.indexOf(this.m_sColor) == parseInt(idx,10))
		{
			if (action == 'over' || action == 'out' || action == 'down') {
				button.className = 'clsCPItem_active';
			}
		}
		else
		{
			if (action == 'over') {
				button.className = 'clsCPItem_hover';
			}
			else if (action == 'out') {
				button.className = 'clsCPItem';
			}
			else if (action == 'down') {
				button.className = 'clsCPItem_active';
			}
		}
	}

	var cell = null;
	var bNamed = false;
	if (idx > -1)
	{
		cell = document.getElementById(this.m_sPromptId+'_namedColorSwatch'+idx);
		bNamed = true;
	}
	else {
		cell = button;
	}

	if ((bNamed && this.m_oNamedColor.indexOf(this.m_sColor) == idx) || (!bNamed && this.m_sColor != '' && cell.id.indexOf(this.m_sColor.substring(1)) >= 0))
	{
		if (action == 'over' || action == 'out' || action == 'down') {
			cell.className = 'clsCPCell_active';
		}
	}
	else
	{
		if (action == 'over') {
			cell.className = 'clsCPCell_hover';
		}
		else if (action == 'out') {
			cell.className = 'clsCPCell';
		}
		else if (action == 'down') {
			cell.className = 'clsCPCell_active';
		}
	}
}

//update associated swatch control
function CColorPicker_updateSwatch(s)
{
	var oSwatch = document.getElementById('selectColorSwatch' + this.m_sPromptId);
	if (oSwatch) {
		s = parseRGB(s);
		if (s == '') {
			oSwatch.className = "colorSwatchDefault";
		}
		else if (s == "#FFFFFF") {
			oSwatch.className = "colorSwatchWhite";
		}
		else {
			oSwatch.className = "";
		}
		oSwatch.style.backgroundColor = s;

		var sNamedColor = s;
		var idx = this.m_oNamedColor.indexOf(sNamedColor);
		if (idx >= 0 ) {
			sNamedColor = this.m_oNamedColor.m_Colors[idx].getName();
		}
		oSwatch.title = (sNamedColor == '' ? PMT_CP_COLOR_DEFAULT : sNamedColor);
	}
	// Update the input fields with the same name.
	for (var i = 0; i < document.forms.length; i++) {
		var o = eval('document.forms[' + i + '].' + this.m_sPromptId);
		if (o) {
			o.value = s;
		}
	}
}


CColorPicker.prototype.init = CColorPicker_init;
CColorPicker.prototype.draw = CColorPicker_draw;
CColorPicker.prototype.drawCaptionBar = CColorPicker_drawCaptionBar;
CColorPicker.prototype.drawPalette = CColorPicker_drawPalette;
CColorPicker.prototype.drawNamedPalette = CColorPicker_drawNamedPalette;
CColorPicker.prototype.drawWebsafePalette = CColorPicker_drawWebsafePalette;
CColorPicker.prototype.drawCustomPalette = CColorPicker_drawCustomPalette;
CColorPicker.prototype.setPalette = CColorPicker_setPalette;
CColorPicker.prototype.setActiveColor = CColorPicker_setActiveColor;
CColorPicker.prototype.setActiveClass = CColorPicker_setActiveClass;
CColorPicker.prototype.setColor = CColorPicker_setColor;
CColorPicker.prototype.getColor = CColorPicker_getColor;
CColorPicker.prototype.togglePicker = CColorPicker_togglePicker;
CColorPicker.prototype.hide = CColorPicker_hide;
CColorPicker.prototype.show = CColorPicker_show;
CColorPicker.prototype.applyCustomStyle = CColorPicker_applyCustomStyle;
CColorPicker.prototype.updateCustomStyle = CColorPicker_updateCustomStyle;
CColorPicker.prototype.updateSwatch = CColorPicker_updateSwatch;
CColorPicker.prototype.preventBubbling = CColorPicker_preventBubbling;
CColorPicker.prototype.buttonMouseHandler = CColorPicker_buttonMouseHandler;

//CNamedColor: named colors class
// this class is used to translated between named colors and RGB values
function CNamedColor()
{
	this.m_Colors = new Array();
	this.init();
}

// initialize the lsit of named colors
function CNamedColor_init()
{
	this.add(PMT_CP_COLOR_DEFAULT, '');
	this.add(PMT_CP_COLOR_BLACK, '#000000');
	this.add(PMT_CP_COLOR_SILVER, '#C0C0C0');
	this.add(PMT_CP_COLOR_GRAY, '#808080');
	this.add(PMT_CP_COLOR_WHITE, '#FFFFFF');
	this.add(PMT_CP_COLOR_MAROON, '#800000');
	this.add(PMT_CP_COLOR_RED, '#FF0000');
	this.add(PMT_CP_COLOR_PURPLE, '#800080');
	this.add(PMT_CP_COLOR_FUSHIA, '#FF00FF');
	this.add(PMT_CP_COLOR_GREEN, '#008000');
	this.add(PMT_CP_COLOR_LIME, '#00FF00');
	this.add(PMT_CP_COLOR_OLIVE, '#808000');
	this.add(PMT_CP_COLOR_YELLOW, '#FFFF00');
	this.add(PMT_CP_COLOR_NAVY, '#000080');
	this.add(PMT_CP_COLOR_BLUE, '#0000FF');
	this.add(PMT_CP_COLOR_TEAL, '#008080');
	this.add(PMT_CP_COLOR_AQUA, '#00FFFF');
}

// return the array of color objects
function CNamedColor_getNamedColors()
{
	return this.m_Colors;
}

//add a new color object
function CNamedColor_add(sName,sColor)
{
	var c = new CColor (sName,sColor);
	this.m_Colors = this.m_Colors.concat(c);
}

//get the index of a named color
function CNamedColor_indexOf(sColor)
{
	for (var i=0; i < this.m_Colors.length; i++)
	{
		if (sColor == this.m_Colors[i].getColor()) {
			return i;
		}
	}
	return -1;
}

CNamedColor.prototype.init = CNamedColor_init;
CNamedColor.prototype.getNamedColors = CNamedColor_getNamedColors;
CNamedColor.prototype.add = CNamedColor_add;
CNamedColor.prototype.indexOf = CNamedColor_indexOf;

//CColor: Color class
// used to store names and color values for a color
function CColor(sName,sColor)
{
	this.m_sName = sName;
	this.m_sRGBColor = sColor;
}

function CColor_getName()
{
	return this.m_sName;
}

function CColor_getColor()
{
	return this.m_sRGBColor;
}

CColor.prototype.getName = CColor_getName;
CColor.prototype.getColor = CColor_getColor;


//color utility functions
function parseRGB(s)
{
	if (s == null) {
		s = '';
	}
	s = s.toUpperCase();

	//take a string and return a valid color string
	if (s.length == 7 && s.indexOf('#') === 0)
	{
		if (!(/[^0-9A-F#]/gi).test(s)) {
			return s;
		}
	}
	else if (s.match(/RGB\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/gi)) {
		// convert 'rbg(255,255,255)' to '#FFFFFF'
		var r = RegExp.$1;
		var g = RegExp.$2;
		var b = RegExp.$3;
		return "#" + numberToHex(r) + numberToHex(g) + numberToHex(b);
	}

	return '';
}

//return the hex value for a given color
function getR(sColor)
{
	var s = parseRGB(sColor);
	var sHex = s.slice(1,3);
	return sHex;
}

function getG(sColor)
{
	var s = parseRGB(sColor);
	var sHex = s.slice(3,5);
	return sHex;
}

function getB(sColor)
{
	var s = parseRGB(sColor);
	var sHex = s.slice(5,7);
	return sHex;
}

function numberToHex(d)
{
	var hex = '';
	var i = Math.floor(d / 16);
	hex += digitToHex(i);
	i = (d % 16);
	hex += digitToHex(i);

	return hex;
}

function digitToHex(d)
{
	switch (d) {
		case 0:
		case 1:
		case 2:
		case 3:
		case 4:
		case 5:
		case 6:
		case 7:
		case 8:
		case 9:
			return ('' + d);
		case 10:
			return 'A';
		case 11:
			return 'B';
		case 12:
			return 'C';
		case 13:
			return 'D';
		case 14:
			return 'E';
		case 15:
			return 'F';
	}

	return '0';
}

// CONSTANTS
var PALETTE_NAMED = 'named';
var PALETTE_WEB = 'web';
var PALETTE_CUSTOM = 'custom';

var TYPE_BACKGROUND_COLOR = 'background-color';
var TYPE_COLOR = 'color';