window.onload = init;

function init()
{
	var objContainer = document.getElementById('spincont');
	var objExisting = document.getElementById('spin');
	var objText = document.createElement('input');
	var objImage = document.createElement('input');
	var objImageContainer = document.createElement('div');

	if (objExisting)
	{
		objImageContainer.setAttribute('id', 'imgcont');

		objText.setAttribute('id', 'spin');
		objText.setAttribute('name', 'spin');
		objText.setAttribute('type', 'text');
		objText.setAttribute('size', '3');
		objText.setAttribute('value', '0');
		objText.setAttribute('maxlength', '2');
		objExisting.parentNode.replaceChild(objText, objExisting);

		objImage.setAttribute('type', 'image');
		objImage.setAttribute('id', 'spinup');
		objImage.setAttribute('src', 'spintop.png');
		objImage.setAttribute('alt', 'Increase value');
		objImage.onclick = function(event){return spin(this, event);};
		objImage.onkeypress = function(event){return spin(this, event);};
		objImage.onfocus = function(){return highlight(this, 1);};
		objImage.onblur = function(){return highlight(this, 0);};
		objImage.onmouseover = function(){return highlight(this, 1);};
		objImage.onmouseout = function(){return highlight(this, 0);};
		objImageContainer.appendChild(objImage);

		objImage = document.createElement('input');
		objImage.setAttribute('id', 'spindown');
		objImage.setAttribute('type', 'image');
		objImage.setAttribute('src', 'spinbot.png');
		objImage.setAttribute('alt', 'Decrease value');
		objImage.onclick = function(event){return spin(this, event);};
		objImage.onkeypress = function(event){return spin(this, event);};
		objImage.onfocus = function(){return highlight(this, 1);};
		objImage.onblur = function(){return highlight(this, 0);};
		objImage.onmouseover = function(){return highlight(this, 1);};
		objImage.onmouseout = function(){return highlight(this, 0);};
		objImageContainer.appendChild(objImage);

		objContainer.appendChild(objImageContainer);
	}
}

function spin(objElement, objEvent)
{
	var objSpin = document.getElementById('spin');
	var iValue = objSpin.value;
	var iKeyCode;

	objEvent = objEvent || event;

	if (objEvent && objEvent.type == 'keypress')
	{
		iKeyCode = objEvent.keyCode;

		if (iKeyCode != 13 && iKeyCode != 32)
		{
			return true;
		}
	}

	if (isNumber(iValue))
	{
		if (objElement.id == 'spinup' && iValue < 10)
		{
			objSpin.setAttribute('value', parseInt(iValue, 10) + 1);
		}
		else if (objElement.id == 'spindown' && iValue > 0)
		{
			objSpin.setAttribute('value', parseInt(iValue, 10) - 1);
		}
	}

	return false;
}

function highlight(objElement, bMode)
{
	if (objElement.id == 'spinup')
	{
		if (bMode)
		{
			objElement.setAttribute('src', 'spintopover.png');
		}
		else
		{
			objElement.setAttribute('src', 'spintop.png');
		}
	}
	else
	{
		if (bMode)
		{
			objElement.setAttribute('src', 'spinbotover.png');
		}
		else
		{
			objElement.setAttribute('src', 'spinbot.png');
		}
	}

	return true;
}


function isNumber(iValue)
{
	return (!isNaN(iValue) && iValue !== '');
}