var objForegroundField = null;
var objBackgroundField = null;

function initColourPicker(foreground, background, formname)
{
	var objForeground = document.getElementById('forelink');
	var objBackground = document.getElementById('backlink');

	objForegroundField = document.getElementById(foreground);
	objBackgroundField = document.getElementById(background);
		
	var objForm = document.getElementById(formname);

	// Set up event handlers for foreground and background colour picker links
	objForeground.onclick = function(){return selectColour(this);};
	objBackground.onclick = function(){return selectColour(this);};
	// Set up an event handler for when the form is submitted
	//objForm.onsubmit = function(){return changeColour();};
}

// Function to build the colour picker
// objElement is the anchor used to activate the dialog 
function selectColour(objElement)
{
	var iInnerRed, iInnerGreen, iInnerBlue, strColour;
	var iCounter = 0;
	var objExisting = document.getElementById('cchoices');
	var objPicker = document.createElement('div');
	var objRow = document.createElement('div');
	var objAnchor, objCol, objImage, objClose;

	// If the colour picker dialog is already present, remove it
	if (objExisting)
	{
		objExisting.parentNode.removeChild(objExisting);
	}
	objPicker.setAttribute('id', 'cchoices');

	// Start to build the colour picker

	// Add a panel to contain the currently selected colour
	objCol = document.createElement('div');
	objCol.appendChild(document.createTextNode('#000'));
	objCol.setAttribute('id', 'tooltip');
	objRow.appendChild(objCol);

	objClose = document.createElement('a');
	objClose.setAttribute('href', '#close');
	objClose.setAttribute('class', 'close');
	objClose.onclick = function() { return closePicker(); };
	objClose.appendChild(document.createTextNode('[close]'));
	objRow.appendChild(objClose);
	objRow.setAttribute('class', 'clearfix');
	
	objPicker.appendChild(objRow);
	objRow = document.createElement('div');

	// Iterate through all web-safe colours (e.g. #fc0) to build
	// a colour picker grid
	// Steps of 16 for red, green, and blue
	for (iInnerRed=0; iInnerRed<16; iInnerRed+=3)
	{
		for (iInnerGreen=0; iInnerGreen<16; iInnerGreen+=3)
		{
			for (iInnerBlue=0; iInnerBlue<16; iInnerBlue+=3)
			{
				iCounter++;

				// Add a colour cell for our grid
				objCol = document.createElement('span');
				// Convert our red, green, and blue values to hexadecimal to
				// create a short-hand hex triplet colour value
				strColour = '#' + iInnerRed.toString(16).toUpperCase() + iInnerGreen.toString(16).toUpperCase() + iInnerBlue.toString(16).toUpperCase();

				// Add an anchor and events to handle mouse and keyboard behaviour
				objAnchor = document.createElement('a');
				objAnchor.setAttribute('href', '#');
				objAnchor.setAttribute('id', 'cp' + iCounter);
				objAnchor.onclick = function(){return setColour(this, objElement);};
				objAnchor.onkeydown = function(event){return navigatePicker(this, event);};
				objAnchor.onfocus = function(){return updateTooltip(this);};
				objAnchor.onmouseover = function(){return updateTooltip(this);};

				// Add a transparent image with the alt text containing the colour value
				// and set the background property of the image using the colour value
				objImage = document.createElement('img');
				objImage.setAttribute('src', '/images/ico-pot.gif');
				objImage.setAttribute('width', '10');
				objImage.setAttribute('height', '10');
				objImage.setAttribute('alt', strColour);
				objImage.style.backgroundColor = strColour;
				objAnchor.appendChild(objImage);
				objCol.appendChild(objAnchor);

				// Add the cell to the current row in our grid
				objRow.appendChild(objCol);

				// Limit each row to 12 cells
				if (iCounter%12 === 0)
				{
					objPicker.appendChild(objRow);
					objRow = document.createElement('div');
				}
			}
		}
	}
	// Add the picker to the document, and set focus on
	// the first cell in the grid
	document.body.appendChild(objPicker);
	document.getElementById('cp1').focus();

	return false;
}

// Function to update the panel with the currently selected colour
// in the colour picker dialog (either from mouse hover, or 
// keyboard focus)
//
// objElement is the anchor that is currently selected
function updateTooltip(objElement)
{
	// Get existing tooltip
	var objExisting = document.getElementById('tooltip');

	// Setup a new tooltip
	var objCol = document.createElement('div');
	var strColour = objElement.firstChild.getAttribute('alt');
	objCol.appendChild(document.createTextNode(strColour));
	objCol.setAttribute('id', 'tooltip');

	// Replace the old tooltip with the new tooltip
	objExisting.parentNode.replaceChild(objCol, objExisting);
}

// Function to update the short-hand hex triplet colour in
// the form.
// 
// In this example, the form fields have id values
// of foreground and background. The href attribute of the links
// to activate the colour picker control also has target ids of 
// foreground and background.
//
// objAnchor is the anchor that was selected from the colour picker
// objInput is the anchor that was used to activate the colour picker
function setColour(objAnchor, objInput)
{
    // Extract the id from the href attribute
    var strID = objInput.href.substring(objInput.href.length - 10);
    if (strID == 'Foreground') { var objColour = objForegroundField; }
    if (strID == 'Background') { var objColour = objBackgroundField; }

	var objPicker = document.getElementById('cchoices');
	// Extract the colour value from the alt attribute
	var strColour = objAnchor.firstChild.getAttribute('alt');

	// Set the value attribute of the input form
	// Belts and braces because of a bug in Mozilla
	objColour.value = strColour;
	objColour.setAttribute('value', strColour);
	// Remove the colour picker dialog
	objPicker.parentNode.removeChild(objPicker);
	// Place focus in the input field
	objColour.focus();

	return false;
}

function closePicker() {
    var objPicker = document.getElementById('cchoices');
    objPicker.parentNode.removeChild(objPicker);
    return false;
}

// A function to improve keyboard access to the picker
// allowing users to navigate by column and row using
// the cursor keys
//
// objAnchor is the currently selected cell
// objEvent is the W3C object property
function navigatePicker(objAnchor, objEvent)
{
	var iKeyCode, strID, iCurID, iDestID, objPicker;

	// If W3C object property is undefined, use
	// IE's proprietary window.event property
	if (!objEvent)
	{
		objEvent = window.event;
	}
	
	iKeyCode = objEvent.keyCode;

	// If the ESC key is pressed, remove the colour picker
	if (iKeyCode == 27)
	{
		objPicker = document.getElementById('cchoices');

		objPicker.parentNode.removeChild(objPicker);
	}

	// if any key other than cursor keys are pressed,
	// pass control back to the colour picker
	if (iKeyCode < 37 || iKeyCode > 40) 
	{
		return true;
	}

	// Determine the number of the current cell
	// The id for each cell is cp1, cp2, and so on
	strID = objAnchor.getAttribute('id');
	iCurID = strID.substr(2, 4);

	// Find out which cursor key was pressed
	switch (iKeyCode)
	{
		case 37: // Left cursor key
			iDestID = iCurID - 1;
			break;
		case 38: // Up cursor key
			iDestID = iCurID - 12;
			break;
		case 39: // Right cursor key
			iDestID = parseInt(iCurID, 10) + 1;
			break;
		case 40: // Down cursor key
			iDestID = parseInt(iCurID, 10) + 12;
			break;
	}

	// If an id exists with the value, move focus
	// to the cell with that id
	if (document.getElementById('cp' + iDestID))
	{
		document.getElementById('cp' + iDestID).focus();
	}

	return false;
}