totalSteps = 150;
var waitingToHideMenu = false;
	

function HuePicker ()
{
	
	// prepare 
	this.Draw = DrawHuePicker;
	this.GetHue = GetHue;
	this.SetHue = SetHue;
	this.PullHue = PullHue;
}

function DrawHuePicker ()
{
	// the swatch
	var selectedSwatchDiv = document.createElement('div');
	selectedSwatchDiv.id = 'selectedSwatch'; // need unique id
	selectedSwatchDiv.onclick = function () { ShowPicker(); };	// need to pass argument defining which picker to show
	selectedSwatchDiv.style.cursor = 'pointer';
	selectedSwatchDiv.style.width = '30px';
	selectedSwatchDiv.style.height = '20px';
	selectedSwatchDiv.style.border = 'solid 1px #000';
	selectedSwatchDiv.style.position = 'relative';
	containerDiv.appendChild(selectedSwatchDiv);
	
	// picker popup
	pickerDiv = document.createElement('div');
	pickerDiv.id = 'picker';		// make id unique
	pickerDiv.style.display = 'none';
	pickerDiv.onmouseout = function () { BeginHidePicker(); };	// need to pass argument defining which picker to hide
	containerDiv.appendChild(pickerDiv);
	
	// spectrum
	var spectrumContainerDiv = document.createElement('div');
	spectrumContainerDiv.id = 'spectrum' // need to make id unique
	spectrumContainerDiv.style.cursor = 'pointer';
	spectrumContainerDiv.style.position = 'absolute';
	spectrumContainerDiv.style.width = '30px';
	spectrumContainerDiv.style.height = totalSteps + 'px';
	spectrumContainerDiv.style.top = '20px';
	spectrumContainerDiv.style.border = 'solid 1px #000';
	pickerDiv.appendChild(spectrumContainerDiv);
	
	// preview group
	var previewDiv = document.createElement('div');
	previewDiv.id = 'preview'; // need to make id unique
	previewDiv.style.left = '32px';
	previewDiv.style.position = 'absolute';
	previewDiv.style.display = 'none';
	pickerDiv.appendChild(previewDiv);
	
	// wedge
	for (i = 0; i<11; i++)
	{
		var wedgeSlice = document.createElement('div');
		wedgeSlice.style.left = i + 'px';
		wedgeSlice.style.height = ((i+1)*2) + 'px';
		wedgeSlice.style.top = (11 - (i+1)) + 'px';
		wedgeSlice.style.position = 'absolute';
		wedgeSlice.style.width = '1px';
		wedgeSlice.style.background = '#000';
		previewDiv.appendChild(wedgeSlice);
	}
	
	// preview swatch
	var previewSwatchDiv = document.createElement('div');
	previewSwatchDiv.id = 'previewSwatch'; // need unique id
	previewSwatchDiv.style.position = 'absolute';
	previewSwatchDiv.style.left = '11px';
	previewSwatchDiv.style.width = '30px';
	previewSwatchDiv.style.height = '21px';
	previewSwatchDiv.style.border = 'solid 1px black';
	previewDiv.appendChild(previewSwatchDiv);
	
	// preview hue readout
	var previewHueDiv = document.createElement('div');
	previewHueDiv.id = 'previewHue'; // need unique id
	previewHueDiv.style.lineHeight = '20px';
	previewHueDiv.style.fontSize = '12px';
	previewHueDiv.style.position = 'absolute';
	previewHueDiv.style.left = '41px';
	previewHueDiv.style.width = '35px';
	previewHueDiv.style.background = '#fff';
	previewHueDiv.style.paddingLeft = '5px';
	previewHueDiv.style.height = '21px';
	previewHueDiv.style.border = 'solid 1px #000';
	previewHueDiv.style.verticalAlign = 'middle';
	previewDiv.appendChild(previewHueDiv);
	
	
	this.PullHue();
}

function GetHue ()
{
	var re = /[^\d\.]/;
	var currentValue = targetField.value.replace(re,'');
	if (currentValue == '') 
	{
		SetHue(0);
		return GetHue();
	}
	return Number(currentValue);
}

function SetHue (newValue)
{
	targetField.value = newValue;
}

function ShowColour (target)
{
	waitingToHideMenu = false;
	
	var suggestedHue = (GetHue() + (target.huePosition/totalSteps)) % 1.0;
	ShowPreview(suggestedHue, target.huePosition);
}


function ShowPreview (suggestedHue, topOffset)
{
	// show 'preview' swatch at correct position
	var thePreview = document.getElementById('preview');
	var selectedSwatchHeight = 20;
	thePreview.style.display = 'block';
	thePreview.style.top = (selectedSwatchHeight/2) + topOffset + 'px';
	// update 'preview' colour
	document.getElementById('previewSwatch').style.background = GetHueAsHtmlColour(suggestedHue);
	// update 'hue' read-out
	document.getElementById('previewHue').innerHTML = Math.round(suggestedHue * 360) + '&deg;';
}

function HidePreview ()
{
	document.getElementById('preview').style.display = 'none';
}


function SelectColour (e,target)
{
	if (!e) var e = window.event
	// determine hew hue
	SetHue((GetHue() + (target.huePosition/totalSteps)) % 1.0);
	// update 'selected' swatch
	var theSwatch = document.getElementById('selectedSwatch');
	theSwatch.style.background = GetHueAsHtmlColour(GetHue());
	// re-base spectrum
	DrawSpectrumSlices(GetHue());
	// cleanup
	HidePicker();
	HidePreview();
	
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}

function /* static */ GetHueAsHtmlColour (hue)
{
	var asHSV = new HsvColour(hue,1,1);
	return '#' + HSV_to_Html(asHSV);
}

function ShowPicker ()
{
	document.getElementById('picker').style.display = 'block';
}

function HidePicker ()
{
	document.getElementById('picker').style.display = 'none';
}

function BeginHidePicker()
{
	waitingToHideMenu = true;
	setTimeout('EndHidePicker()',200);
}

function EndHidePicker ()
{
	if (waitingToHideMenu == true) HidePicker(); 
}

function DrawSpectrumSlices (baseHue)
{
	var spectrumContainerDiv = document.getElementById('spectrum');
	spectrumContainerDiv.innerHTML = '';
	for (i = 0; i < totalSteps; i++)
	{
		var sliceDiv = document.createElement('div');
		sliceDiv.style.position = 'absolute';
		sliceDiv.style.top = i + 'px';
		sliceDiv.style.left = '0px';
		sliceDiv.style.width = '30px';
		sliceDiv.style.height = '1px';
		sliceDiv.huePosition = i
		sliceDiv.style.background = GetHueAsHtmlColour((baseHue + (i/totalSteps)) % 1.0);
		sliceDiv.onmouseover = function () { ShowColour(this); };
		sliceDiv.onclick = function (e) { SelectColour(e,this); };
		spectrumContainerDiv.appendChild(sliceDiv);
	}
}

function PullHue ()
{
	// update 'selected' swatch
	var theSwatch = document.getElementById('selectedSwatch');
	theSwatch.style.background = GetHueAsHtmlColour(GetHue());
	// re-base spectrum
	DrawSpectrumSlices(GetHue());
}