var computedStyle;
var input;

//[of]:function computedStyle ()
if (window.getComputedStyle) {
    computedStyle = function (element)
    {
        return window.getComputedStyle(element, null);
    };
}
else {
    computedStyle = function (element)
    {
        return element.currentStyle;
    };
}
//[cf]
//[of]:function onMouseOver ()
function onMouseOver ()
{
	img = this.getElementsByTagName("IMG")[0];
	img.style.left = "-" + computedStyle(this).width;
	return true;
}
//[cf]
//[of]:function onMouseOut ()
function onMouseOut ()
{
	img = this.getElementsByTagName("IMG")[0];
	img.style.left = "0";
	return true;
}
//[cf]
//[of]:function appendSpace ()
function appendSpace ()
{
	input.value += " ";
}
//[cf]
//[of]:function deleteLast ()
function deleteLast ()
{
	if (input.value.length === 0) { }
	else if (input.value.length === 1) { input.value = ""; }
	else { input.value = input.value.substring (0, input.value.length - 1); }
}
//[cf]
//[of]:function selectAll ()
function selectAll ()
{
	input.select();
	input.focus();
}
//[cf]
//[of]:function appendCharacter (c)
function appendCharacter (name)
{
   var characterCodeText = name.substr ("char-x".length);
   var characterCode = parseInt (characterCodeText, 16);
   var character = String.fromCharCode (characterCode);
   input.value += character;
}
//[cf]
//[of]:function onClick ()
function onClick ()
{
   var c = this.getAttribute("id");

   switch (c) {
      case "appendSpace":
         appendSpace ();
         break;
      case "deleteLast":
         deleteLast ();
         break;
      case "selectAll": 
         selectAll ();
         break;
      default:
         appendCharacter (c);
         break;    
   }
   return true;
}
//[cf]
//[of]:function init ()
function init ()
{
    var keyboard;
    var keys;
    var i;
    
    input = document.getElementById("input");
    keyboard = document.getElementById("keyboard");
    keys = keyboard.getElementsByTagName("DIV");
    
    i = 0;
    while (i < keys.length) {
        keys[i].onmouseover = onMouseOver;
        keys[i].onmouseout = onMouseOut;
        keys[i].onclick = onClick;
        ++i;
    }
    
    input.focus ();
}
//[cf]

window.onload = init;