window.addEventListener('load', setup, false);

var iAdjust = 16;
var iSliderOffset;

function setup()
{
	var objImage;
	var arSlider = new Array('slider1', 'slider2', 'slider3');

	var objEdit = document.getElementById('colour');
	objEdit.addEventListener('keyup', processKey, false);
	for (var iCounter=0; iCounter<arSlider.length; iCounter++)
	{
		objImage = document.getElementById(arSlider[iCounter]);
		objImage.setAttributeNS('http://www.w3.org/2005/07/aaa', 'valuemin', 0);
		objImage.setAttributeNS('http://www.w3.org/2005/07/aaa', 'valuemax', 255);
		objImage.setAttributeNS('http://www.w3.org/2005/07/aaa', 'valuenow', 0);
		objImage.addEventListener('keypress', moveSlider, false);
		objDrag.setupDrag(objImage);
	}
	updateColour();
}

var objDrag = {
	objImage : null,
	
	setupDrag : function(objImage)
	{
		objImage.style.left = document.defaultView.getComputedStyle(objImage, '').getPropertyValue('left');
		iParentOffset = parseInt(document.defaultView.getComputedStyle(objImage.parentNode, '').getPropertyValue('left'));
		objImage.onmousedown = objDrag.startDrag;
		iSliderOffset = parseInt(objImage.style.left) + iAdjust;
		objImage.style.left = iSliderOffset + 'px';
	},

	startDrag : function(objEvent)
	{
		objDrag.objImage = this;

		document.onmousemove = objDrag.drag;
		document.onmouseup = objDrag.endDrag;

		return false;
	},

	drag : function(objEvent)
	{
		var iXPos = parseInt(objEvent.clientX) - parseInt(iSliderOffset);
		var iMax = parseInt(objDrag.objImage.getAttributeNS('http://www.w3.org/2005/07/aaa', 'valuemax')) + parseInt(iSliderOffset);
		var iMin = parseInt(objDrag.objImage.getAttributeNS('http://www.w3.org/2005/07/aaa', 'valuemin')) + parseInt(iSliderOffset);

		if (iXPos > iMax)
			iXPos = iMax;
		else if (iXPos < iMin)
			iXPos = iMin;

		objDrag.objImage.style.left = iXPos  + 'px';
		var iValue = parseInt(iXPos) - parseInt(iSliderOffset);
		objDrag.objImage.setAttributeNS('http://www.w3.org/2005/07/aaa', 'valuenow', iValue);
		updateColour();

		return false;
	},

	endDrag : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		objDrag.objImage = null;
	}
};

function moveSlider(objEvent)
{
	var iMin = parseInt(this.getAttributeNS('http://www.w3.org/2005/07/aaa', 'valuemin'));
	var iMax = parseInt(this.getAttributeNS('http://www.w3.org/2005/07/aaa', 'valuemax'));
	var iCurrent = parseInt(this.getAttributeNS('http://www.w3.org/2005/07/aaa', 'valuenow'));

	switch (objEvent.keyCode)
	{
		case objEvent.DOM_VK_LEFT:
			iCurrent--;
			break;
		case objEvent.DOM_VK_RIGHT:
			iCurrent++;
			break;
		case objEvent.DOM_VK_PAGE_UP:
			iCurrent -= 51;
			break;
		case objEvent.DOM_VK_PAGE_DOWN:
			iCurrent += 51;
			break;
		case objEvent.DOM_VK_HOME:
			iCurrent = iMin;
			break;
		case objEvent.DOM_VK_END:
			iCurrent = iMax;
			break;
		default:
			return true;
	}


	
	if (iCurrent < iMin)
		iCurrent = iMin;
	else if (iCurrent > iMax)
		iCurrent = iMax;

	this.setAttributeNS('http://www.w3.org/2005/07/aaa', 'valuenow', iCurrent);
	this.style.left = iCurrent + parseInt(iSliderOffset) + 'px';
	updateColour();
	objEvent.preventDefault();
}

function updateColour()
{
	var arSlider = new Array('slider1', 'slider2', 'slider3');
	var arCurrent = new Array(0, 0, 0);
	var objText = document.getElementById('colour');

	strColour = '#';
	for (var iCounter=0; iCounter<arSlider.length; iCounter++)
	{
		objImage = document.getElementById(arSlider[iCounter]);
		arCurrent[iCounter] = parseInt(objImage.getAttributeNS('http://www.w3.org/2005/07/aaa', 'valuenow'));
		iMSD = parseInt(arCurrent[iCounter] / 16);
		iLSD = parseInt(arCurrent[iCounter] % 16);
		strColour += getDigit(iMSD) + getDigit(iLSD);
	}

	objText.value = strColour;
	document.getElementById('sample').style.backgroundColor = strColour;
}

function processKey()
{
	var arSlider = new Array('slider1', 'slider2', 'slider3');
	var objRE = new RegExp(/^#[a-fA-F0-9]{6}$/);
	var objImage, strColour, iColour;

	if (objRE.test(this.value))
	{
		for (var iCounter=0, iPortion=1; iCounter<arSlider.length; iCounter++, iPortion+=2)
		{
			objImage = document.getElementById(arSlider[iCounter]);
			strColour = '0x' + this.value.substring(iPortion, iPortion+2);
			iColour = parseInt(strColour);
			objImage.setAttributeNS('http://www.w3.org/2005/07/aaa', 'valuenow', iColour);
			iColour += parseInt(iSliderOffset);
			objImage.style.left = iColour + 'px';
		}
		document.getElementById('sample').style.backgroundColor = this.value;
	}
}

function getDigit(iValue)
{
	switch (iValue)
	{
		case 10:
			return 'a';
		case 11:
			return 'b';
		case 12:
			return 'c';
		case 13:
			return 'd';
		case 14:
			return 'e';
		case 15:
			return 'f';
		default:
			return iValue.toString();
	}
}