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> -->';


}