/*===========================================================
	Constructor for cPickerObject
	
	This object is used for input fields when specifying colours, as end users normally
	have no idea about hex values, this script creates an easy alternative
	
	All methods and variables found in this document are used specifically for the
	cPicker object, then they are group inside the object.	
	
	@author: Daniel Chalk
	@company: IFP, Internet French Property Ltd
	@url: http://www.french-property.com 
===========================================================*/
function cPicker()
{	
	this.html = sPickerHTML; // Raw HTML of the cPicker
	
	/*-------------------------------------------------------------------------------------------------------
		@Method spawn
		
		@description:
		This method inserts the HTML into the dom, thus making the
		cPicker visible to the user.
		
		@parameter, (DomObject) spawnObj2, object click to spawn
		@parameter, (DomObject) valueObj2, object to insert value
		@returns, (int), Hexideximal value of a colour (# has been removed)
	--------------------------------------------------------------------------------------------------------*/
	this.spawn = spawn; // inserts the cPicker into the dom document, thus making it visible
	/*-------------------------------------------------------------------------------------------------------
		@Method generateSafe
		
		@description:
		Creates a web safe table of web safe colours

		@returns, (string), html content
	-------------------------------------------------------------------------------------------------------*/
	this.generateSafe = GenerateSafe;
	/*-------------------------------------------------------------------------------------------------------
		@Method generateMac
		
		@description:
		Creates a web safe table of Mac safe colours

		@returns, (string), html content
	-------------------------------------------------------------------------------------------------------*/
	this.generateMac = TCGenerateMac;
	/*-------------------------------------------------------------------------------------------------------
		@Method generateWind
		
		@description:
		Creates a web safe table of Microsoft Windows safe colours

		@returns, (string), html content
	-------------------------------------------------------------------------------------------------------*/
	this.generateWind = TCGenerateWind;
	/*-------------------------------------------------------------------------------------------------------
		@Method generateGrey
		
		@description:
		Creates a web safe table grey scale colours

		@returns, (string), html content
	-------------------------------------------------------------------------------------------------------*/
	this.generateGrey = TCGenerateGray;
	/*-------------------------------------------------------------------------------------------------------
		@Method dec2hex
		
		@description:
		Converts decimal values to its Hexidecimal equivilant

		@returns, (string),Hexidecimal
	-------------------------------------------------------------------------------------------------------*/
	this.dec2hex = TCDec2Hex;
	/*-------------------------------------------------------------------------------------------------------
		@Method bldCell
		
		@description:
		creates a table cell with background colour

		@returns, (string), HTML (table cell)
	-------------------------------------------------------------------------------------------------------*/
	this.bldCell = TCBuildCell;
	/*-------------------------------------------------------------------------------------------------------
		@Method setColour
		
		@description:
		Creates preview of the colour and fills in a small input box of the colour hex value

		@returns, (void)
	-------------------------------------------------------------------------------------------------------*/
	this.setColour = selectColour;
	/*-------------------------------------------------------------------------------------------------------
		@Method returnColour
		
		@description:
		Fills in valueObj2 (set on spawn) with the final value

		@returns, (void)
	-------------------------------------------------------------------------------------------------------*/
	this.returnColour = submitColour;
	/*-------------------------------------------------------------------------------------------------------
		@Method cancel
		
		@description:
		Closes the cPicker, and nulls any value that should be. THE INSTANCE OF cPicker IS NOT DESTROYED

		@returns, (void)
	-------------------------------------------------------------------------------------------------------*/
	this.cancel = cancelColour;
	/*-------------------------------------------------------------------------------------------------------
		@Method close
		
		@description:
		Alternate Method to cancel

		@returns, (void)
	-------------------------------------------------------------------------------------------------------*/
	this.close = cancelColour;
	this.menuItems = new Array();
	/*-------------------------------------------------------------------------------------------------------
		@var spawnObjectId
		
		@description:
		The Id of the object that spawned the cPicker
	-------------------------------------------------------------------------------------------------------*/
	this.spawnObjectId = null;
	/*-------------------------------------------------------------------------------------------------------
		@var close
		
		@description:
		Alternate Method to cancel
		The Id of the object that cPicker will parse its value to
	-------------------------------------------------------------------------------------------------------*/
	this.returnObjectId = null;
	
	//menu stuff
	this.selectMenuItem = 0;
	this.menuItems[0] = 'Win';
	this.menuItems[1] = 'Mac';
	this.menuItems[2] = 'Grey';
	this.menuItems[3] = 'Safe';
	
	this.tabs = new tabs();
}
sPickerHTML = ''+
'<div id=\"colourPicker\">'+
'<div id=\"colourPickerMenu\">'+
'<div class=\"colourPickerHeader\">ColourPicker</div>'+
'<div id="tab_Win" onclick=\"colourPicker.tabs.open(0);\" class=\"selected\">Win</div>'+
'<div id="tab_Mac" onclick=\"colourPicker.tabs.open(1);\">Mac</div>'+
'<div id="tab_Grey" onclick=\"colourPicker.tabs.open(2);\">Grey</div>'+
'<div id="tab_Safe" onclick=\"colourPicker.tabs.open(3);\">Safe</div>'+
'<div onclick=\"colourPicker.close();\">Close</div>'+
'</div>'+
'<div id=\"colourPickerCharts\">'+
'<div id=\"chart\"></div>'+
'<div>'+
'<table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\">'+
'<tr><td>'+
'<input type=\"text\" class=\"input\" id=\"colourPickerValue\" />'+
'</td><td width=\"24\" class=\"preview\" id="colourPickerPreview">&nbsp;</td></tr>'+
'</table>'+
'<table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\"><tr>'+
'<td align=\"right\" style=\"border:none;\">'+
'<input  onclick=\"colourPicker.close();\" type=\"button\" value=\"Cancel\"/><input  onclick=\"colourPicker.returnColour();\" type=\"button\" value=\"  Ok  \"/>'+
'</td></tr></table>'+
'</div>'+
'</div>'+
'</div>'+
'</div>';
function tabs()
{
	this.open = function(index)
	{
		this.setStatic(colourPicker.selectMenuItem);
		if(index == 0)
		{
			document.getElementById('chart').innerHTML = colourPicker.generateWind();
		}
		else if(index == 1)
		{
			document.getElementById('chart').innerHTML = colourPicker.generateMac();
		}
		else if(index == 2)
		{
			document.getElementById('chart').innerHTML = colourPicker.generateGrey();
		}
		else if(index == 3)
		{
			document.getElementById('chart').innerHTML = colourPicker.generateSafe();
		}
		else
		{
			document.getElementById('chart').innerHTML = colourPicker.generateWind();
			index = 0;
		}
		colourPicker.selectMenuItem = index;
		this.setCurrent(index);
	}
	//if not in use
	this.setStatic = function(index)
	{
		tmpObj = document.getElementById('tab_'+colourPicker.menuItems[index]).className = '';
		tmpObj = null;
	}
	// if in use
	this.setCurrent = function(index)
	{
		tmpObj = document.getElementById('tab_'+colourPicker.menuItems[index]).className = 'selected';
		tmpObj = null;
	}
}
//Uses to open the object
function spawn(spawnObj2, valueObj2)
{
	this.close();
	//generate position
	if(valueObj2.id.length < 1)
	{
		valueObj2.id = 'PickingAColour'; //sets an id to use if no id is set for the value element
	}
	this.spawnObjectId = spawnObj2.id;
	this.returnObjectId = valueObj2.id;
	var curleft = 0; var curtop = 0;
	cur = valueObj2;
	if (cur.offsetParent)
	{
		curleft = cur.offsetLeft;
		curtop = cur.offsetTop;
		while (cur = cur.offsetParent)
		{
			curleft += cur.offsetLeft;
			curtop += cur.offsetTop;
		}
	}
	
	curleft = (curleft + 16 + spawnObj2.clientWidth);
	curtop = (curtop);
	rw = document.createElement('div');
	rw.id = 'wrapper00000001';
	document.body.appendChild(rw)
	rw.innerHTML += colourPicker.html;
	div = document.getElementById('colourPicker');
	div.style.left = curleft+'px';
	div.style.top = (curtop - div.clientWidth + 42)+'px';
	document.getElementById('chart').innerHTML = this.generateWind();

	//document.getElementById('colourPickerValue').focus();
}
function submitColour()
{
	value_ = document.getElementById('colourPickerValue').value;
	returnObj = document.getElementById(this.returnObjectId);
	returnObj.value = value_.toUpperCase();
	returnObj.id = '';
	returnObj = null;
	this.returnObjectId = null;
	this.spawnObjectId = null;
	colourPicker.close();
}
function cancelColour()
{
	try
	{
		document.body.removeChild(document.getElementById('wrapper00000001'));
		document.getElementById(valueObj.id).id = '';
		spawpObj = null;
		valueObj = null;
	}
	catch(e){} // used to catch exceptions thrown when cancling the colourPicker
}
function selectColour(Colour){

	oText = document.getElementById('colourPickerValue' );
	oColour = document.getElementById('colourPickerPreview');
	oText.value = Colour.toUpperCase();
	oColour.style.backgroundColor = '#'+Colour;
}
function GenerateSafe() {
	var s = '<table width="100%" cellpadding="0" cellspacing="0"';
	for (j = 0; j < 12; j ++) {
		s += "<tr>";
		for (k = 0; k < 3; k ++)
		{
			for (i = 0; i <= 5; i ++)
			{
				s += this.bldCell(k * 51 + (j % 2) * 51 * 3, Math.floor(j / 2) * 51, i * 51, 8, 10);
			}
		}
		s += "</tr>";
	}
	s += '</table>';
	return s;
}
function TCBuildCell (R, G, B, w, h) {
	return '<td bgcolor="#' + this.dec2hex((R << 16) + (G << 8) + B) + '" onclick="colourPicker.setColour(\'' + this.dec2hex((R << 16) + (G << 8) + B) + '\')"></td>';
}
function TCDec2Hex(v) {
	v = v.toString(16);
	for(; v.length < 6; v = '0' + v){	}
	return v;
}
function TCGenerateWind() {
	var s = '<table width="100%" cellpadding="0" cellspacing="0">';
	for (j = 0; j < 12; j ++) 
	{
		s += "<tr>";
		for (k = 0; k < 3; k ++)
		{
			for (i = 0; i <= 5; i++)
			{
				s += this.bldCell(i * 51, k * 51 + (j % 2) * 51 * 3, Math.floor(j / 2) * 51, 8, 10);
			}
		}
		s += "</tr>";
	}
	s += '</table>';
	return s	;
}
function TCGenerateMac() {
	var s = '<table width="100%" cellpadding="0" cellspacing="0">';
	var c = 0,n = 1;
	var r,g,b;
	for (j = 0; j < 15; j ++)
	{
		s += "<tr>";
		for (k = 0; k < 3; k ++)
		{
			for (i = 0; i <= 5; i++)
			{
				if(j<12)
				{
				s += this.bldCell(255-(Math.floor(j / 2) * 51), 255-(k * 51 + (j % 2) * 51 * 3),255-(i * 51), 8, 10);
				}
				else
				{
					if(n<=14)
					{
						r = 255-(n * 17);
						g=b=0;
					}
					else if(n>14 && n<=28)
					{
						g = 255-((n-14) * 17);
						r=b=0;
					}
					else if(n>28 && n<=42)
					{
						b = 255-((n-28) * 17);
						r=g=0;
					}
					else
					{
						r=g=b=255-((n-42) * 17);
					}
					s += this.bldCell(r, g,b, 8, 10);
					n++;
				}
			}
		}
		s += "</tr>";
	}
	s += '</table>';
	return s;
}
function TCGenerateGray() {
	var s = '<table width="100%" cellpadding="0" cellspacing="0">';
	for (j = 0; j <= 15; j ++) {
		s += "<tr>";
		for (k = 0; k <= 15; k ++) {
			g = Math.floor((k + j * 16) % 256);
			s += this.bldCell(g, g, g, 9, 7);
		}
		s += '</tr>';
	}
	s += '</table>';
	return s;
}
var colourPicker = new cPicker();