/*
#calulator label {display:block; width:12em; float:left;}
#calculator span {font-family:"Courier New", Courier, mono;}
*/

/*
<h1>Entity Conversion Calculator</h1>
<div id="calculator">
<label>Numeric Value (Decimal)</label><input type="text" name="decimal" /> <span></span><br />
<label>CSS Value (Hex)</label><input type="text" name="octal" disabled="disabled" /> 
<span></span><br />
<label>JS Value (Hex)</label><input type="text" name="octal2" disabled="disabled" /> <span></span><br />
<button></button>
</div>
*/
function alertError(){alert('? ? ? ? ? ?');}

var calc = document.getElementById("calculator");
var inputs = calc.getElementsByTagName("input");
var spans = calc.getElementsByTagName("span");
var buttonOptions = ['\u03a0\u03a1\u0395\u03a3\u03a3', '\u2660\u2663\u2665\u2666', '\u221a']
var theButton = calc.getElementsByTagName('button')[0];
var x, y, z;
inputs[0].onblur = setAllValues;
theButton.onclick = setAllValues;

function setAllValues(){
		var decimalValue = inputs[0].value;
		decimalValue = decimalValue.replace(/\D/g, ''); //clean the value
		hexValue = Number(decimalValue).toString(16);
		while(hexValue.length<4){
			hexValue = "0" + hexValue;
			//alert('\u' + hexValue);
		}
		if(isNaN(decimalValue)){
		   inputs[0].value = 'Number Please';
			 return;
		}
		inputs[0].value = '\46#' + decimalValue;
		inputs[1].value = hexcss = '\\'  + hexValue.toUpperCase();
		inputs[2].value = hexjs  = '\\u' + hexValue.toUpperCase();
		
		cssText = document.createTextNode("li:before {content:'" + hexcss + "';}");
		jsText = document.createTextNode("alert('The hex " + hexjs +" = HTML entity \u0026#" + decimalValue + "');" );
		  spans[0].innerHTML = '&#38;#'+ decimalValue +' = &#' + decimalValue;
		if(x){
			x = spans[1].replaceChild(cssText, x);
			y = spans[2].replaceChild(jsText, y);
		} else {
			x = spans[1].appendChild(cssText);
			y = spans[2].appendChild(jsText);
		}
	//	makebutton();
		return hexValue;
}

	
	function makebutton(){
		var rand  = Math.floor(Math.random()*buttonOptions.length);
		var buttonText = document.createTextNode(buttonOptions[rand]);
		theButton.appendChild(buttonText);
	}



window.onload = makebutton;