// simple screen keyboard
UIKeyboardClass = newClass
(
componentBase,
{
constructor: function (parent, instance, place, type, picFolder)
{
this.type = (type || 'DG');
this.constructor.prototype.constructor.call(this, parent, instance);
this.capsLock = this.shift = false;
this.eng = true;
this.picFolder = picFolder;
this.buttonValues = ['@~','1!1!','2@2@','3#3','4$4;','5%5%','6^6:','7&7?','8*8*','9(9(','0)0)','-_-_','=+=+','|/|/','qQ','wW','eE','rR','tT','yY','uU','iI','oO','pP','[{',']}','aA','sS','dD','fF','gG','hH','jJ','kK','lL',';:','``','zZ','xX','cC','vV','bB','nN','mM',',<','.>','/?.,'];
if (this.type == 'ALC') this.capsLock=true;
if (this.type == 'ALS') this.shift=true;
if (this.type == 'ALR') this.eng=false;
if (this.type == 'ALRC') {this.eng=false; this.capsLock=true;};
if (this.type == 'ALRS') {this.eng=false; this.shift=true;};
var ins = this.instance;
if (this.type.substring(0,2) == 'DG')
{
var res =
'<table cellpadding=0 cellspacing=0 width=0 border=0>'+
'<tr>'+
'<td><img src="' + this.picFolder + '/01_off.gif" onMouseOver=this.src="' + this.picFolder + '/01_on.gif" onMouseOut=this.src="' + this.picFolder + '/01_off.gif" onclick='+ins+'.dkeyPress("1")></td>'+
'<td><img src="' + this.picFolder + '/02_off.gif" onMouseOver=this.src="' + this.picFolder + '/02_on.gif" onMouseOut=this.src="' + this.picFolder + '/02_off.gif" onclick='+ins+'.dkeyPress("2")></td>'+
'<td><img src="' + this.picFolder + '/03_off.gif" onMouseOver=this.src="' + this.picFolder + '/03_on.gif" onMouseOut=this.src="' + this.picFolder + '/03_off.gif" onclick='+ins+'.dkeyPress("3")></td>'+
'</tr><tr>'+
'<td><img src="' + this.picFolder + '/04_off.gif" onMouseOver=this.src="' + this.picFolder + '/04_on.gif" onMouseOut=this.src="' + this.picFolder + '/04_off.gif" onclick='+ins+'.dkeyPress("4")></td>'+
'<td><img src="' + this.picFolder + '/05_off.gif" onMouseOver=this.src="' + this.picFolder + '/05_on.gif" onMouseOut=this.src="' + this.picFolder + '/05_off.gif" onclick='+ins+'.dkeyPress("5")></td>'+
'<td><img src="' + this.picFolder + '/06_off.gif" onMouseOver=this.src="' + this.picFolder + '/06_on.gif" onMouseOut=this.src="' + this.picFolder + '/06_off.gif" onclick='+ins+'.dkeyPress("6")></td>'+
'</tr><tr>'+
'<td><img src="' + this.picFolder + '/07_off.gif" onMouseOver=this.src="' + this.picFolder + '/07_on.gif" onMouseOut=this.src="' + this.picFolder + '/07_off.gif" onclick='+ins+'.dkeyPress("7")></td>'+
'<td><img src="' + this.picFolder + '/08_off.gif" onMouseOver=this.src="' + this.picFolder + '/08_on.gif" onMouseOut=this.src="' + this.picFolder + '/08_off.gif" onclick='+ins+'.dkeyPress("8")></td>'+
'<td><img src="' + this.picFolder + '/09_off.gif" onMouseOver=this.src="' + this.picFolder + '/09_on.gif" onMouseOut=this.src="' + this.picFolder + '/09_off.gif" onclick='+ins+'.dkeyPress("9")></td>'+
'</tr><tr>'+
'<td><img src="' + this.picFolder + '/c_off.gif" onMouseOver=this.src="' + this.picFolder + '/c_on.gif" onMouseOut=this.src="' + this.picFolder + '/c_off.gif" onclick='+ins+'.dkeyPress("CLEAR")></td>'+
'<td><img src="' + this.picFolder + '/00_off.gif" onMouseOver=this.src="' + this.picFolder + '/00_on.gif" onMouseOut=this.src="' + this.picFolder + '/00_off.gif" onclick='+ins+'.dkeyPress("0")></td>'+
'<td><img src="' + this.picFolder + '/arr_off.gif" onMouseOver=this.src="' + this.picFolder + '/arr_on.gif" onMouseOut=this.src="' + this.picFolder + '/arr_off.gif" onclick='+ins+'.dkeyPress("BACKSPACE")></td>'+
'</tr>'+
(((this.type=='DGT') || (this.type=='DGDT')) ? '<tr><td colspan=3><img src="' + this.picFolder + '/button_keypad_sw_on.gif" onclick=' + ins + '.dkeyPress("TAB")></td></tr>' : '') +
(((this.type=='DGD') || (this.type=='DGDT')) ? '<tr><td colspan=3><img src="' + this.picFolder + '/button_nukta_on.gif" onclick=' + ins + '.dkeyPress(".")></td></tr>' : '') +
'</table>';
}
else
{
var res =
'<table cellpadding=0 cellspacing=0 border=0>' +
'<tr><td align=left height=50px background="' + this.picFolder + '/up_bg.gif"> <img id="engrus" src="' + ((this.eng)?'' + this.picFolder + '/latin-raskl.gif':'' + this.picFolder + '/russian-raskl.gif') + '" onClick=' + ins + '.akeyPress("ENGRUS")></td></tr>'+
'<tr><td>' +
'<table><tr>' +
'<td id="btn_1" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'@~\')><img src="' + this.picFolder + '/button.gif"></td>' +
'<td id="btn_2" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'1!1!\')></td>' +
'<td id="btn_3" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'2@2@\')></td>' +
'<td id="btn_4" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'3#3\')></td>' +
'<td id="btn_5" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'4$4;\')></td>' +
'<td id="btn_6" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'5%5%\')></td>' +
'<td id="btn_7" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'6^6:\')></td>' +
'<td id="btn_8" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'7&7?\')></td>' +
'<td id="btn_9" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'8*8*\')></td>' +
'<td id="btn_10" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'9(9(\')></td>' +
'<td id="btn_11" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'0)0)\')></td>' +
'<td id="btn_12" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'-_-_\')></td>' +
'<td id="btn_13" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'=+=+\')></td>' +
'<td id="btn_14" align="center" valign="middle" style="width: 56px; height: 54px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'|/\')></td>' +
'<td><img src="' + this.picFolder + '/b__4.gif" onClick=' + ins + '.akeyPress(\'BACKSPACE\')></td>' +
'</tr></table>' +
'</td></tr><tr><td>' +
'<table><tr>' +
'<td><img src="' + this.picFolder + '/b2_empty.gif" border="0" onClick=' + ins + '.akeyPress("TAB")></td>' +
'<td id="btn_15" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'qQ\')></td>' +
'<td id="btn_16" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'wW\')></td>' +
'<td id="btn_17" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'eE\')></td>' +
'<td id="btn_18" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'rR\')></td>' +
'<td id="btn_19" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'tT\')></td>' +
'<td id="btn_20" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'yY\')></td>' +
'<td id="btn_21" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'uU\')></td>' +
'<td id="btn_22" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'iI\')></td>' +
'<td id="btn_23" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'oO\')></td>' +
'<td id="btn_24" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'pP\')></td>' +
'<td id="btn_25" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'[{\')></td>' +
'<td id="btn_26" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\']}\')></td>' +
'<td style="width: 3px;"></td>' +
'<td align="right" background="klaviatura/enterbg.gif" style="background-repeat: no-repeat"><img onClick=' + ins + '.akeyPress("ENTER") src="klaviatura/enter2.gif" style="position:relative; top:6px; " alt="" width="82" height="56" border="0"></td>' +
'</tr></table>' +
'</td></tr><tr><td>' +
'<table><tr>' +
'<td><img src="' +((this.capsLock)?'' + this.picFolder + '/b3_caps_lock_on.gif':'' + this.picFolder + '/b3_caps_lock.gif')+ '" id="caps" onClick=' + ins + '.akeyPress("CAPS")></td>' +
'<td id="btn_27" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'aA\')></td>' +
'<td id="btn_28" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'sS\')></td>' +
'<td id="btn_29" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'dD\')></td>' +
'<td id="btn_30" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'fF\')></td>' +
'<td id="btn_31" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'gG\')></td>' +
'<td id="btn_32" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'hH\')></td>' +
'<td id="btn_33" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'jJ\')></td>' +
'<td id="btn_34" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'kK\')></td>' +
'<td id="btn_35" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'lL\')></td>' +
'<td id="btn_36" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\';:\')></td>' +
'<td id="btn_37" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\"\' \")></td>' +
'<td></td>' +
'<td align=right><img src="' + this.picFolder + '/enter.gif" onClick=' + ins + '.akeyPress("ENTER")></td>' +
'</tr></table>' +
'</td></tr><tr><td>' +
'<table><tr>' +
'<td><img src="' +((this.shift)?'' + this.picFolder + '/b4_shift_on.gif':'' + this.picFolder + '/b4_shift.gif')+ '" id="shift" onClick=' + ins + '.akeyPress("SHIFT")></td>' +
'<td id="btn_38" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'zZ\')></td>' +
'<td id="btn_39" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'xX\')></td>' +
'<td id="btn_40" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'cC\')></td>' +
'<td id="btn_41" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'vV\')></td>' +
'<td id="btn_42" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'bB\')></td>' +
'<td id="btn_43" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'nN\')></td>' +
'<td id="btn_44" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'mM\')></td>' +
'<td id="btn_45" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick="' + ins + '.akeyPress(\',<\')"></td>' +
'<td id="btn_46" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick="' + ins + '.akeyPress(\'.>\')"></td>' +
'<td id="btn_47" align="center" valign="middle" style="width: 56px; height: 56px; font-size: 26px; font-weigth: bold; background: url(\'' + this.picFolder + '/button.gif\') no-repeat;" onClick=' + ins + '.akeyPress(\'/?.,\')></td>' +
'<td></td>' +
'<td align=right><img src="' + this.picFolder + '/b4_empty.gif"></td>' +
'</tr></table>' +
'</td></tr><tr><td>' +
'<table cellpadding=0 cellspacing=1><tr>' +
'<td><img src="' + this.picFolder + '/b5_engrus.gif" onClick=' + ins + '.akeyPress("ENGRUS")></td>' +
'<td><img src="' + this.picFolder + '/b5_probel.gif" onClick="' + ins + '.akeyPress(\' \')"></td>' +
'<td><img src="' + this.picFolder + '/b5_ochistit.gif" onClick=' + ins + '.akeyPress("CLEAR")></td>' +
'</tr></table>' +
'</td></tr></table>';
}
insertContent(place,res);
this.fillButtons();
},
fillButtons: function()
{
if (this.type.indexOf("DG") > -1)
return;
for (var i=1; i<=47; i++)
$("btn_" + i).innerHTML = this.decode(this.buttonValues[i-1]);
},
setStates: function()
{
if (this.eng)
$("engrus").src = '' + this.picFolder + '/latin-raskl.gif'
else
$("engrus").src = '' + this.picFolder + '/russian-raskl.gif';
if (this.capsLock)
$("caps").src = '' + this.picFolder + '/b3_caps_lock_on.gif'
else
$("caps").src = '' + this.picFolder + '/b3_caps_lock.gif';
if (this.shift)
$("shift").src = '' + this.picFolder + '/b4_shift_on.gif'
else
$("shift").src = '' + this.picFolder + '/b4_shift.gif';
this.fillButtons();
},
setLanguage: function(language)
{
if (((this.eng) && (language == "r")) || ((!this.eng) && (language == "e")))
this.akeyPress("ENGRUS");
},
akeyPress: function(key)
{
switch(key)
{
case 'BACKSPACE':
break;
case 'TAB':
break;
case 'CAPS':
this.capsLock = (!this.capsLock);
this.setStates();
return;
break;
case 'SHIFT':
this.shift = (!this.shift);
this.setStates();
return;
break;
case 'ENTER':
key = 'TAB';
break;
case 'ENGRUS':
this.eng = (!this.eng);
this.setStates();
return;
break;
case 'CLEAR':
break;
default:
key = this.decode(key);
break;
}
this.notify('eventKeyPress',key);
if (this.shift) this.akeyPress('SHIFT');
},
decode: function (c)
{
var pos = 0;
if (this.shift)
pos = (this.capsLock) ? 0 : 1
else
pos = (this.capsLock) ? 1 : 0;
if (!this.eng) pos+=2;
if (pos>c.length)
return c.charAt(0)
else
return c.charAt(pos);
},
dkeyPress: function(key)
{
this.notify('eventKeyPress',key);
}
}
);