var vkb_csShiftKeyValue = "Shift";
var vkb_csBackspaceKeyValue = "\u2190";
var vkb_csClearKeyValue = "Clear";
var vkb_csCapsLockKeyValue = "Caps Lock";

var vkb_aControlKeys = new Array(
  vkb_csShiftKeyValue,
  vkb_csBackspaceKeyValue,
  vkb_csClearKeyValue,
  vkb_csCapsLockKeyValue
);

var vkb_aAttributes = new Array();

function vkb_getKeyboardAttributes(oKb) {

for (var i = 0; i < vkb_aAttributes.length; i++) {
    var oAttributes = vkb_aAttributes[i];
    if (oAttributes.obj == oKb) {
      return oAttributes;
    }
  }
  
  vkb_aAttributes[vkb_aAttributes.length] = {
    obj: oKb, 
    control: null, 
    isShifted: false, 
    isShiftPressed: false, 
    isCapsLockPressed: false
  };
    
  return vkb_aAttributes[vkb_aAttributes.length-1];
  
}

function vkb_isControlKey(sKey) {

  for(var i=0; i < vkb_aControlKeys.length; ++i) {
    if(vkb_aControlKeys[i].toLowerCase() == sKey.toLowerCase()) {
      return true;
    }
  } 
  return false;
}

function vkb_processNonControlKeys(oKb, fProcessor) {
  var aInput = oKb.getElementsByTagName("input");
  for (var i = 0; i < aInput.length; i++) {
    var oInput = aInput[i];
    if (!vkb_isControlKey(oInput.value)) {
      fProcessor(oInput);
    }
  }
}

function vkb_processNonControlKeysById(sKbId, fProcessor) {
  var oKbDiv = document.getElementById(sKbId);
  vkb_processNonControlKeys(oKbDiv, fProcessor);
}

function vkb_allToUpperCaseById(sKbId) {
  vkb_processNonControlKeysById(sKbId, function(oInput) {oInput.value = oInput.value.toUpperCase();});
}

function vkb_allToLowerCaseById(sKbId) {
  vkb_processNonControlKeysById(sKbId, function(oInput) {oInput.value = oInput.value.toLowerCase();});
}

function vkb_allToUpperCase(oKb) {
  vkb_processNonControlKeys(oKb, function(oInput) {oInput.value = oInput.value.toUpperCase();});
}

function vkb_allToLowerCase(oKb) {
  vkb_processNonControlKeys(oKb, function(oInput) {oInput.value = oInput.value.toLowerCase();});
}

function vkb_getSenderKeyboard(oSender) {
  return oSender.parentNode.parentNode;
}

function vkb_setKeyboardShifted(oKeyboard, bIsShifted) {
  var oKbAttributes = vkb_getKeyboardAttributes(oKeyboard);
  if (bIsShifted) {
    vkb_allToUpperCase(oKeyboard);
    oKbAttributes.isShifted = true;
  }
  else {
    vkb_allToLowerCase(oKeyboard);
    oKbAttributes.isShifted = false;
  };
}

function vkb_keyPressed(oSender) {
  
  var oKeyboard = vkb_getSenderKeyboard(oSender);
  var oKbAttributes = vkb_getKeyboardAttributes(oKeyboard);

  var oTextInput = oKbAttributes.control;
  
  if (!vkb_isControlKey(oSender.value)) {
    oTextInput.value += oSender.value;
    if (oKbAttributes.isShiftPressed) {
      oKbAttributes.isShiftPressed = false;
      vkb_setKeyboardShifted(oKeyboard, !oKbAttributes.isShifted);
    }
  }
  else {
    
    if (oSender.value == vkb_csCapsLockKeyValue) {
      oKbAttributes.isShiftPressed = false;
      oKbAttributes.isCapsLockPressed = !oKbAttributes.isCapsLockPressed;
      vkb_setKeyboardShifted(oKeyboard, oKbAttributes.isCapsLockPressed);
      oSender.style.color = (oKbAttributes.isCapsLockPressed ? "red" : "black");
    }
    else if (oSender.value == vkb_csShiftKeyValue){
      vkb_setKeyboardShifted(oKeyboard, !oKbAttributes.isShifted);
      oKbAttributes.isShiftPressed = !oKbAttributes.isShiftPressed;
      
    }
    else if (oSender.value == vkb_csBackspaceKeyValue) {
      if (oTextInput.value.length > 0) {
        oTextInput.value = oTextInput.value.substr(0, oTextInput.value.length - 1);
      };
    }
    else if (oSender.value == vkb_csClearKeyValue) {
      oTextInput.value = "";
    }
  }
  
  oTextInput.focus();
}


function vkb_assosiateKeyboard(sKeyboardId, sControlId) {
  var oKeyboard = document.getElementById(sKeyboardId);
  var oInput = document.getElementById(sControlId);
  var oKeyboardAttributes = vkb_getKeyboardAttributes(oKeyboard);
  oKeyboardAttributes.control = oInput;
}

/*

// The style example for virtual keyboard

<style>
.virtual-keyboard {
  width: 357px;
	padding: 4px 4px 4px 4px;
}
.virtual-keyboard input {
  width: 25px;
  height: 25px;
  font-size: 11px;
}

.virtual-keyboard .numbers-line {
  padding-left: 32px;
}

.virtual-keyboard .q-line {
  padding-left: 47px;
}

.virtual-keyboard .space-line {
  padding-left: 100px;
}
</style>

*/

function vkb_createKeyboard(sKeyboardHolderEpement, sInputToFillId) {
  var oInputToFill = document.getElementById(sInputToFillId);
  var oKeyboardHolderEpement = document.getElementById(sKeyboardHolderEpement);
	
  var oKeyboard = document.createElement("div");
  oKeyboard.className = "virtual-keyboard";
  oKeyboardHolderEpement.appendChild(oKeyboard);
  
  var oKeyboardAttributes = vkb_getKeyboardAttributes(oKeyboard);
  
  oKeyboardAttributes.control = oInputToFill;
  oKeyboardAttributes.isShifted = false;
  oKeyboardAttributes.isShiftPressed = false;
  oKeyboardAttributes.isCapsLockPressed = false;
  
//	window.alert("Hello");
	
  oKeyboard.innerHTML =  
  '  <!-- <div id="keyboard1" class="virtual-keyboard" > --> ' +
  '    <div class="numbers-line">' +
  '      <input type="button" tabindex="1000" value="1"   onclick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="2" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="3" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="4" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="5" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="6" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="7" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="8" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="9" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="0" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="-" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" style="width: 50px; font-size: 12px" value="&#8592;" onClick="vkb_keyPressed(this); return false;"/></div>' +
  '    <div class="q-line">' +
  '      <input type="button" tabindex="1000" value="q" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="w" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="e" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="r" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="t" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="y" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="u" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="i" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="o" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="p" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="_"  onclick="vkb_keyPressed(this); return false;"/></div>' +
  '    <div class="a-line">' +
  '      <input type="button" tabindex="1000" style="width: 60px; font-size: 9px" value="Caps Lock" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="a" onClick="vkb_keyPressed(this); return false;" ' +
  '      /><input type="button" tabindex="1000" value="s" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="d" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="f" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="g" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="h" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="j" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="k" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="l" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="|" onClick="vkb_keyPressed(this); return false;"/></div>' +
  '    <div class="z-line">' +
  '      <input type="button" tabindex="1000" style="width: 78px; font-size: 9px" value="Shift" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="z" onClick="vkb_keyPressed(this); return false;"' +
  '     /><input type="button" tabindex="1000" value="x" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="c" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="v" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="b" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="n" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="m" onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="," onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="." onClick="vkb_keyPressed(this); return false;"' +
  '      /><input type="button" tabindex="1000" value="?" onClick="vkb_keyPressed(this); return false;"/></div>' +
  '    <div class="space-line">' +
  '      <input type="button" tabindex="1000" style="width: 175px;" value=" " onClick="vkb_keyPressed(this); return false;" ' +
  '      /><img style="width:22px; height:1px; margin: 0 0 0 0;"' +
  '      /><input id="clear" tabindex="1000" type="button" style="width: 60px; font-size: 9px" value="Clear" onClick="vkb_keyPressed(this); return false;"/></div>' +
  '  <!-- </div> -->';
  
  
}