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) {
	if(oSender.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className == 'virtual-keyboard'){	
    	return oSender.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
	}
	else{
		return oSender.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.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 class="center_keyboard">' +
	'<table><col width="1"><col width="1"><col width="1"><col width="1"><col width="1"><col width="1"><col width="1"><col width="1"><col width="1"><col width="1"><col width="1"><col>' + 
		'<tr>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="1" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="2" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="3" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="4" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="5" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="6" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="7" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="8" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="9" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="0" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="-" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_text_big key_bg" value="&#8592;" type="button">' +
				'</div>' +
			'</td>' +
		'</tr>' +
		'<tr>' +
			'<td class="std_opera_bugfix">&nbsp;</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="q" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="w" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="e" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="r" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="t" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="y" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="u" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="i" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="o" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="p" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="_" type="button">' +
				'</div>' +
			'</td>' +
		'</tr>' +
		'<tr>' +
			'<td colspan="2">' +
				'<div class="key_b">' +
					'<div class="cas_ctl"><div class="cas_ctr"><div class="bg_width_min">' +
						'<input onClick="vkb_keyPressed(this); return false;" class="key_capslock" value="Caps Lock" type="button">' +
					'</div></div></div>' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="a" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="s" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="d" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="f" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="g" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="h" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="j" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="k" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="l" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="|" type="button">' +
				'</div>' +
			'</td>' +
		'</tr>' +
		'<tr>' +
			'<td colspan="2">' +
				'<div class="key_b">' +
					'<div class="cas_ctl"><div class="cas_ctr"><div class="bg_width_min">' +
						'<input onClick="vkb_keyPressed(this); return false;" class="key_shift" value="Shift" type="button">' +
					'</div></div></div>' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="z" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="x" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="c" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="v" type="button">' +
				' +</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="b" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="n" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="m" type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="," type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="." type="button">' +
				'</div>' +
			'</td>' +
			'<td>' +
				'<div>' +
					'<input onClick="vkb_keyPressed(this); return false;" class="key_text key_bg" value="?" type="button">' +
				'</div>' +
			'</td>' +
		'</tr>' +
		'<tr>' +
			'<td class="std_opera_bugfix">&nbsp;</td>' +
			'<td class="std_opera_bugfix">&nbsp;</td>' +
			'<td colspan="7">' +
				'<div class="key_b">' +
					'<div class="cas_ctl"><div class="cas_ctr"><div class="bg">' +
						'<input onClick="vkb_keyPressed(this); return false;" class="key_space" value="&nbsp;" type="button">' +
					'</div></div></div>' +
				'</div>' +
			'</td>' +
			'<td class="std_opera_bugfix">&nbsp;</td>' +
			'<td colspan="2">' +
				'<div class="key_b">' +
					'<div class="cas_ctl"><div class="cas_ctr"><div class="bg_width_min">' +
						'<input onClick="vkb_keyPressed(this); return false;" class="key_clear" value="Clear" type="button">' +
					'</div></div></div>' +
				'</div>' +
			'</td>' +
			'</tr>' +
		'</table>' +
	'</div>';


}