var aPickerIDs = {};
var aPickerColours = {};
var aTimeouts = {};

function initPicker(sID, sPreviewID)
{
	aPickerIDs[sID] = sPreviewID;
}

function togglePicker(sID, bReadOnly)
{
	var oPicker = document.getElementById(aPickerIDs[sID] + '_p');
	
	if (oPicker && !bReadOnly)
	{
		if (oPicker.style.display == 'block')
		{
			hidePicker(sID);
		}
		else
		{
			hidePickers();
			showPicker(sID);
		}
	}
}

function showPicker(sID)
{

	var oPicker = document.getElementById(aPickerIDs[sID] + '_p');

  if (oPicker)
  {
  
		var sHTML;
		
		oPicker.PickerID = sID;
		oPicker.onmouseout = function() {  }

		var aHex = new Array('0', '3', '6', '9', 'C', 'F');
		var iCount = 1, iVCount=1;
	  
		sHTML = '<table cellpadding="0" cellspacing="0" border="0" onmouseout="revertColour(\'' + sID + '\');"><tr>';
		for (var i=0; i<6; i++){
			for (var j=0; j<6; j++){
				for (var k=0; k<6; k++){
					var sHex = '#' + aHex[i] + aHex[i] + aHex[k] + aHex[k] + aHex[j] + aHex[j];
					sHTML += '<td style="background-color:' + sHex + '" onmouseover="setColour(\'' + sID + '\', \'' + sHex + '\');" onmouseup="setColour(\'' + sID + '\', \'' + sHex + '\');hidePicker(\'' + sID + '\');"><div class="colourcell"><img src="images/blank.gif"/></div></td>';
					if(iCount % 18 == 0 && iVCount < 12){
						sHTML += '</tr><tr>';
						iVCount++;
					}
					iCount++;
				}
			}
		}
	  
		sHTML += '</tr></table>';
  
		oPicker.innerHTML = sHTML;
		oPicker.style.display = 'block';
  }

}

function hidePickers()
{
	for (var sID in aPickerIDs)
	{
		hidePicker(sID);
	}
}

function hidePicker(sID)
{
	if (document.getElementById(aPickerIDs[sID] + '_p'))
	{
		document.getElementById(aPickerIDs[sID] + '_p').style.display = 'none';
	}
}

function revertColour(sID)
{
  setColour(sID, aPickerColours[sID]);
  aTimeouts[sID] = setTimeout('hidePicker(\'' + sID + '\')', 3000);
}

function setColour(sID, sColour)
{
	aPickerColours[sID] = document.getElementById(sID).value;
	document.getElementById(sID).value = sColour;
	document.getElementById(aPickerIDs[sID]).style.backgroundColor = sColour;
  clearTimeout(aTimeouts[sID]);
}

function validateColour(sID)
{
  var sColour = document.getElementById(sID).value

  if(sColour.length > 0 && sColour.substring(0,1) != '#')
  { 
   sColour = '#' + sColour;
   document.getElementById(sID).value = sColour;
  }

  for (var i=1; i<sColour.length; i++)
  {
    var c = sColour.charCodeAt(i);
    if((c >= 97 && c <= 102) || (c >= 65 && c <= 70) || (c >= 48 && c <= 57))
    {
    } else {
      alertUser(sID);
      return false;
    }
  }

  var iLen = sColour.length;
  if(iLen == 7 || iLen == 4 || iLen == 0)
  {
  }
  else
  {
		alertUser(sID);
		return false;
  }
  setPreviewColour(sID);
}

function setPreviewColour(sID)
{
	var sPreviewID = aPickerIDs[sID];
	if (document.getElementById(sPreviewID))
	{
		window.onerror = function() { return true; }
		document.getElementById(sPreviewID).style.backgroundColor = ((document.getElementById(sID).value.length > 2 && document.getElementById(sID).value.length < 5) || (document.getElementById(sID).value.length > 5 && document.getElementById(sID).value.length < 8)) ? document.getElementById(sID).value : '#FFFFFF';
	}
	if (document.getElementById(sID))
	{
		document.getElementById(sID).value = document.getElementById(sID).value.toUpperCase();
	}
}

function alertUser(sID)
{
  alert("Please enter a valid colour eg. '#FFFFFF' or click on the coloured box to pick one.");
  document.getElementById(sID).value = '';
  document.getElementById(aPickerIDs[sID]).style.backgroundColor = '#FFFFFF';
}