/*****************************************************************************/
/*
                                vkb_lkish.js

A DCLinabox virtual keyboard that has looks reminiscent of an LK2/3/4/5
keyboard and provides key behaviours in a mostly faithful emulation.

Please overlook the utter lack of sophistication in the implementation.
Still, it seems to work and fits into DCLinabox feel, form and function.

VERSION LOG
-----------
31-JAN-2020  MGD  initial
*/
/*****************************************************************************/

var vkbid;
var vkbAltLocked = false;
var vkbCapsLocked = false;
var vkbCtrlLocked = false;
var vkbOptLocked = false;
var vkbAlt1 = 0;
var vkbCtrl1 = 0;
var vkbOnce1 = 0;
var vkbShift1 = 0;
var vkbKeyActive = 'lightCyan';
var vkbKeyInActive = 'ghostWhite';
setTimeout('vkbBuild',50);

function vkbBuild ()
{
   /******************/
   /* build keyboard */
   /******************/

   vkbid = document.getElementById("vtvkb");

   var html = '<table id="vkbtable" class="vkbtable"><tr><td>';
   html += '<table id="vkbtable1" style="display:block;"><tr>';

   /******************/
   /* unshifted keys */
   /******************/

   /* 7 bit CSI ("<esc>[") works for both 7 and 8 bit terminals */
   var func = '<td class="vkbkey" onclick="vkbpress([27,91,49,49,126])">F1</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,49,50,126])">F2</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,49,51,126])">F3</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,49,52,126])">F4</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,49,53,126])">F5</td>';
   func += '<td style="width:1.3em; max-width:1.3em;"></td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,49,55,126])">F6</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,49,56,126])">F7</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,49,57,126])">F8</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,48,126])">F9</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,49,126])">F10</td>';
   func += '<td></td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,51,126])">F11</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,52,126])">F12</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,53,126])">F13</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,54,126])">F14</td>';
   func += '<td></td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,56,126])">Hlp</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,57,126])" \
colspan="2">Do</td>';
   func += '<td></td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,49,126])">F17</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,50,126])">F18</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,51,126])">F19</td>';
   func += '<td class="vkbkey" onclick="vkbpress([27,91,50,52,126])">F20</td>';
   func += '</tr>';
   func += '<tr style="line-height:0.6em;"><td></td></tr>';

   html += func;

   html += '<tr>';
   html += '<td class="vkbkey" onclick="vkbpress(27)">Esc</td>';
   html += '<td class="vkbkey" onclick="vkbpress(96)">`</td>';
   html += '<td class="vkbkey" onclick="vkbpress(49)">1</td>';
   html += '<td class="vkbkey" onclick="vkbpress(50)">2</td>';
   html += '<td class="vkbkey" onclick="vkbpress(51)">3</td>';
   html += '<td class="vkbkey" onclick="vkbpress(52)">4</td>';
   html += '<td class="vkbkey" onclick="vkbpress(53)">5</td>';
   html += '<td class="vkbkey" onclick="vkbpress(54)">6</td>';
   html += '<td class="vkbkey" onclick="vkbpress(55)">7</td>';
   html += '<td class="vkbkey" onclick="vkbpress(56)">8</td>';
   html += '<td class="vkbkey" onclick="vkbpress(57)">9</td>';
   html += '<td class="vkbkey" onclick="vkbpress(48)">0</td>';
   html += '<td class="vkbkey" onclick="vkbpress(45)">-</td>';
   html += '<td class="vkbkey" onclick="vkbpress(61)">=</td>';
   html += '<td class="vkbkey" onclick="vkbpress(127)" colspan="2">Del</td>';
   html += '<td></td>';

   var find = '<td class="vkbkey" onclick="vkbpress([27,91,49,126])">Fnd</td>';
   find += '<td class="vkbkey" onclick="vkbpress([27,91,50,126])">Ins</td>';
   find += '<td class="vkbkey" onclick="vkbpress([27,91,51,126])">Rem</td>';
   find += '<td></td>';
   find += '<td class="vkbkey" onclick="vkbpress([27,79,80])">PF1</td>';
   find += '<td class="vkbkey" onclick="vkbpress([27,79,81])">PF2</td>';
   find += '<td class="vkbkey" onclick="vkbpress([27,79,82])">PF3</td>';
   find += '<td class="vkbkey" onclick="vkbpress([27,79,83])">PF4</td>';
   find += '</tr>';

   html += find;

   html += '<tr>';
   if (vkbTheDetachedChild)
      html += '<td class="vkbkey0">&#8598;</td>';
   else
      html += '<td class="vkbkey0" onclick="vkbDetach()">&#8598;</td>';
   html += '<td class="vkbkey" onclick="vkbpress(9)" colspan="2">Tab</td>';
   html += '<td class="vkbkey" onclick="vkbpress(113)">q</td>';
   html += '<td class="vkbkey" onclick="vkbpress(119)">w</td>';
   html += '<td class="vkbkey" onclick="vkbpress(101)">e</td>';
   html += '<td class="vkbkey" onclick="vkbpress(114)">r</td>';
   html += '<td class="vkbkey" onclick="vkbpress(116)">t</td>';
   html += '<td class="vkbkey" onclick="vkbpress(121)">y</td>';
   html += '<td class="vkbkey" onclick="vkbpress(117)">u</td>';
   html += '<td class="vkbkey" onclick="vkbpress(105)">i</td>';
   html += '<td class="vkbkey" onclick="vkbpress(111)">o</td>';
   html += '<td class="vkbkey" onclick="vkbpress(112)">p</td>';
   html += '<td class="vkbkey" onclick="vkbpress(91)">[</td>';
   html += '<td class="vkbkey" onclick="vkbpress(93)">]</td>';
   html += '<td class="vkbkey" onclick="vkbpress(13)" rowspan="2" \
style="line-height:0.9em;">Ret<br>urn</span></td>';
   html += '<td></td>';

   var slct = '<td class="vkbkey" onclick="vkbpress([27,91,52,126])">Sel</td>';
   slct += '<td class="vkbkey" onclick="vkbpress([27,91,53,126])">Prv</td>';
   slct += '<td class="vkbkey" onclick="vkbpress([27,91,54,126])">Nxt</td>';
   slct += '<td></td>';
   slct += '<td class="vkbkey" onclick="vkbpress(55)">7</td>';
   slct += '<td class="vkbkey" onclick="vkbpress(56)">8</td>';
   slct += '<td class="vkbkey" onclick="vkbpress(57)">9</td>';
   slct += '<td class="vkbkey" onclick="vkbpress(45)">-</td>';
   slct += '</tr>';

   html += slct;

   html += '<tr>';
   html += '<td class="vkbkey0" onclick="vkbOncePress()" \
name="vkbonce">&#10697;</div></td>';
   html += '<td class="vkbkey" onclick="vkbCapsPress()" \
name="vkbcaps" colspan="2">&hellip;Caps</td>';
   html += '<td class="vkbkey" onclick="vkbpress(97)">a</td>';
   html += '<td class="vkbkey" onclick="vkbpress(115)">s</td>';
   html += '<td class="vkbkey" onclick="vkbpress(100)">d</td>';
   html += '<td class="vkbkey" onclick="vkbpress(102)">f</td>';
   html += '<td class="vkbkey" onclick="vkbpress(103)">g</td>';
   html += '<td class="vkbkey" onclick="vkbpress(104)">h</td>';
   html += '<td class="vkbkey" onclick="vkbpress(106)">j</td>';
   html += '<td class="vkbkey" onclick="vkbpress(107)">k</td>';
   html += '<td class="vkbkey" onclick="vkbpress(108)">l</td>';
   html += '<td class="vkbkey" onclick="vkbpress(59)">;</td>';
   html += '<td class="vkbkey" onclick="vkbpress(39)">\'</td>';
   html += '<td class="vkbkey" onclick="vkbpress(92)">\\</td>';

   var four = '<td name="vkblogo" colspan="5"></td>';
   four += '<td class="vkbkey" onclick="vkbpress(52)">4</td>';
   four += '<td class="vkbkey" onclick="vkbpress(53)">5</td>';
   four += '<td class="vkbkey" onclick="vkbpress(54)">6</td>';
   four += '<td class="vkbkey" onclick="vkbpress(44)">,</td>';
   four += '</tr>';

   html += four;

   html += '<tr>';
   html += '<td class="vkbkey0"></td>';
   html += '<td class="vkbkey" onclick="vkbShift(1)" \
name="vkbshift1" colspan="2">Shift</td>';
   html += '<td class="vkbkey" onclick="vkbpress(60)">&lt;</td>';
   html += '<td class="vkbkey" onclick="vkbpress(122)">z</td>';
   html += '<td class="vkbkey" onclick="vkbpress(120)">x</td>';
   html += '<td class="vkbkey" onclick="vkbpress(99)">c</td>';
   html += '<td class="vkbkey" onclick="vkbpress(118)">v</td>';
   html += '<td class="vkbkey" onclick="vkbpress(98)">b</td>';
   html += '<td class="vkbkey" onclick="vkbpress(110)">n</td>';
   html += '<td class="vkbkey" onclick="vkbpress(109)">m</td>';
   html += '<td class="vkbkey" onclick="vkbpress(44)">,</td>';
   html += '<td class="vkbkey" onclick="vkbpress(46)">.</td>';
   html += '<td class="vkbkey" onclick="vkbpress(47)">/</td>';
   html += '<td class="vkbkey" onclick="vkbShift(0)" \
name="vkbshift0" colspan="2">&hellip;Shift</td>';

   var uarr = '<td></td>';
   uarr += '<td></td>';
   uarr += '<td class="vkbkey" onclick="vkbpress([27,91,65])">&uarr;</td>';
   uarr += '<td></td>';
   uarr += '<td></td>';
   uarr += '<td class="vkbkey" onclick="vkbpress(49)">1</td>';
   uarr += '<td class="vkbkey" onclick="vkbpress(50)">2</td>';
   uarr += '<td class="vkbkey" onclick="vkbpress(51)">3</td>';
   uarr += '<td class="vkbkey" onclick="vkbpress(13)" rowspan="2" \
style="line-height:0.8em;">Ent<br>er</span></td>';
   uarr += '</tr>';

   html += uarr;

   var ctrl = '<tr>';
   ctrl += '<td class="vkbkey" onclick="vkbCtrlPress(1)" \
name="vkbctrl1" colspan="2">Ctrl</td>';
   ctrl += '<td class="vkbkey" onclick="vkbAltPress(1)" \
name="vkbalt1" colspan="2">Alt</td>';
   ctrl += '<td class="vkbkey" onclick="vkbpress(32)" colspan="8">&nbsp;</td>';
   ctrl += '<td class="vkbkey" onclick="vkbAltPress(0)" \
name="vkbalt0" colspan="2">&hellip;Alt</td>';
   ctrl += '<td class="vkbkey" onclick="vkbCtrlPress(0)" \
name="vkbctrl0" colspan="2">&hellip;Ctrl</td>';
   ctrl += '<td></td>';
   ctrl += '<td class="vkbkey" onclick="vkbpress([27,91,68])">&larr;</td>';
   ctrl += '<td class="vkbkey" onclick="vkbpress([27,91,66])">&darr;</td>';
   ctrl += '<td class="vkbkey" onclick="vkbpress([27,91,67])">&rarr;</td>';
   ctrl += '<td></td>';
   ctrl += '<td class="vkbkey" onclick="vkbpress(48)" colspan="2">0</td>';
   ctrl += '<td class="vkbkey" onclick="vkbpress(46)">&period;</td>';

   html += ctrl;

   html += '</tr></table>';

   /****************/
   /* shifted keys */
   /****************/

   html += '<table id="vkbtable2" style="display:none;"><tr>';

   html += func;

   html += '<tr>';
   html += '<td class="vkbkey" onclick="vkbpress(27)">Esc</td>';
   html += '<td class="vkbkey" onclick="vkbpress(126)">~</td>';
   html += '<td class="vkbkey" onclick="vkbpress(33)">!</td>';
   html += '<td class="vkbkey" onclick="vkbpress(64)">@</td>';
   html += '<td class="vkbkey" onclick="vkbpress(35)">#</td>';
   html += '<td class="vkbkey" onclick="vkbpress(36)">$</td>';
   html += '<td class="vkbkey" onclick="vkbpress(37)">%</td>';
   html += '<td class="vkbkey" onclick="vkbpress(94)">^</td>';
   html += '<td class="vkbkey" onclick="vkbpress(38)">&amp;</td>';
   html += '<td class="vkbkey" onclick="vkbpress(42)">*</td>';
   html += '<td class="vkbkey" onclick="vkbpress(40)">(</td>';
   html += '<td class="vkbkey" onclick="vkbpress(41)">)</td>';
   html += '<td class="vkbkey" onclick="vkbpress(95)">_</td>';
   html += '<td class="vkbkey" onclick="vkbpress(43)">+</td>';
   html += '<td class="vkbkey" onclick="vkbpress(127)" colspan="2">Del</td>';
   html += '<td></td>';

   html += find;

   html += '<tr>';
   if (vkbTheDetachedChild)
      html += '<td class="vkbkey0">&#8598;</td>';
   else
      html += '<td class="vkbkey0" onclick="vkbDetach()">&#8598;</td>';
   html += '<td class="vkbkey" onclick="vkbpress(8)" colspan="2">Tab</td>';
   html += '<td class="vkbkey" onclick="vkbpress(81)">Q</td>';
   html += '<td class="vkbkey" onclick="vkbpress(87)">W</td>';
   html += '<td class="vkbkey" onclick="vkbpress(69)">E</td>';
   html += '<td class="vkbkey" onclick="vkbpress(82)">R</td>';
   html += '<td class="vkbkey" onclick="vkbpress(84)">T</td>';
   html += '<td class="vkbkey" onclick="vkbpress(89)">Y</td>';
   html += '<td class="vkbkey" onclick="vkbpress(117)">U</td>';
   html += '<td class="vkbkey" onclick="vkbpress(73)">I</td>';
   html += '<td class="vkbkey" onclick="vkbpress(79)">O</td>';
   html += '<td class="vkbkey" onclick="vkbpress(80)">P</td>';
   html += '<td class="vkbkey" onclick="vkbpress(123)">{</td>';
   html += '<td class="vkbkey" onclick="vkbpress(125)">}</td>';
   html += '<td class="vkbkey" onclick="vkbpress(13)" rowspan="2" \
style="line-height:0.9em;">Ret<br>urn</span></td>';
   html += '<td></td>';

   html += slct;

   html += '<tr>';
   html += '<td class="vkbkey0" onclick="vkbOncePress()" \
name="vkbonce">&#10697;</div></td>';
   html += '<td class="vkbkey" onclick="vkbCapsPress()" \
name="vkbcaps" colspan="2">&hellip;Caps</td>';
   html += '<td class="vkbkey" onclick="vkbpress(65)">A</td>';
   html += '<td class="vkbkey" onclick="vkbpress(83)">S</td>';
   html += '<td class="vkbkey" onclick="vkbpress(68)">D</td>';
   html += '<td class="vkbkey" onclick="vkbpress(70)">F</td>';
   html += '<td class="vkbkey" onclick="vkbpress(71)">G</td>';
   html += '<td class="vkbkey" onclick="vkbpress(72)">H</td>';
   html += '<td class="vkbkey" onclick="vkbpress(74)">J</td>';
   html += '<td class="vkbkey" onclick="vkbpress(75)">K</td>';
   html += '<td class="vkbkey" onclick="vkbpress(76)">L</td>';
   html += '<td class="vkbkey" onclick="vkbpress(58)">:</td>';
   html += '<td class="vkbkey" onclick="vkbpress(34)">\"</td>';
   html += '<td class="vkbkey" onclick="vkbpress(124)">|</td>';

   html += four;

   html += '<tr>';
   html += '<td class="vkbkey0"></td>';
   html += '<td class="vkbkey" onclick="vkbUnShift()" \
name="vkbshift1" colspan="2">Shift</td>';
   html += '<td class="vkbkey" onclick="vkbpress(62)">&gt;</td>';
   html += '<td class="vkbkey" onclick="vkbpress(90)">Z</td>';
   html += '<td class="vkbkey" onclick="vkbpress(88)">X</td>';
   html += '<td class="vkbkey" onclick="vkbpress(67)">C</td>';
   html += '<td class="vkbkey" onclick="vkbpress(86)">V</td>';
   html += '<td class="vkbkey" onclick="vkbpress(66)">B</td>';
   html += '<td class="vkbkey" onclick="vkbpress(78)">N</td>';
   html += '<td class="vkbkey" onclick="vkbpress(77)">M</td>';
   html += '<td class="vkbkey" onclick="vkbpress(44)">,</td>';
   html += '<td class="vkbkey" onclick="vkbpress(46)">.</td>';
   html += '<td class="vkbkey" onclick="vkbpress(63)">?</td>';
   html += '<td class="vkbkey shifted" onclick="vkbUnShift()" \
name="vkbshift0" colspan="2">&hellip;Shift</td>';

   html += uarr;

   html += ctrl;

   html += '</tr></table>';

   html += '<td></tr></table>';

   vkbid.innerHTML = html;

   /**********************/
   /* end build keyboard */
   /**********************/

   setTimeout (vkbLogo, 50);
}

/* populate the "logo space" above the cursor keys */
function vkbLogo ()
{
   // avoid "unreachable code after return statement"
   if (true) return;
   var logo = document.getElementsByName('vkblogo');
   logo[0].style.font = logo[1].style.font = 'normal normal 160% Brush Script MT';
   logo[0].style.textAlign = logo[1].style.textAlign = 'center';
   logo[0].style.letterSpacing = logo[1].style.letterSpacing = '+1px';
   logo[0].style.lineHeight = logo[1].style.lineHeight = '1em';
   logo[0].style.overflow = logo[1].style.overflow = 'visible';
   logo[0].innerHTML = logo[1].innerHTML = 'field test!';
}

/* a key has been pressed */
function vkbpress (code)
{
   if (code)
   {
      if (Array.isArray(code))
      {
         /* sequence of ASCII codes (e.g. 27 91 2 9 126 for Do key) */
         for (var idx = 0; idx < code.length; idx++)
            vkbcode(code[idx]);
      }
      else
      {
         /* simple ASCII code from keypress */
         if (vkbCapsLocked || vkbCtrlLocked)
            if (code >= 97 && code <= 122)
               code = code - 32;
         if (vkbAltLocked) code = code + 128;
         if (vkbCtrlLocked) code = code & 0x3f;
         vkbcode(code);
      }
      /* if one-shot keypress modifier */
      if (vkbShift1) vkbUnShift();
      if (vkbCtrl1) vkbCtrlPress(1);
      if (vkbAlt1) vkbAltPress(1);
      if (vkbOnce1) vkbOncePress();
   }
}

/* send the ASCII code to the terminal */
function vkbcode (code)
{
   /* provide code to the terminal */
   if (vkbTheDetachedChild) 
      window.opener.dataTx(String.fromCharCode(code));
   else
      dataTx(String.fromCharCode(code));
//   console.log(code);
}

/* shift key has been pressed */
function vkbShift (count)
{
   vkbShift1 = count;
   document.getElementById("vkbtable1").style.display = 'none';
   document.getElementById("vkbtable2").style.display = 'table';
   if (vkbShift1)
   {
      var name = document.getElementsByName('vkbshift1');
      name[1].style.backgroundColor = vkbKeyActive;
   }
   else
   {
      var name = document.getElementsByName('vkbshift0');
      name[1].style.backgroundColor = vkbKeyActive;
   }
}

/* shift key has been un-pressed physically or by one-shot */
function vkbUnShift ()
{
   vkbShift1 = 0;
   document.getElementById("vkbtable1").style.display = 'table';
   document.getElementById("vkbtable2").style.display = 'none';
   var name = document.getElementsByName('vkbshift1');
   name[0].style.backgroundColor = name[1].style.backgroundColor = vkbKeyInActive;
   var name = document.getElementsByName('vkbshift0');
   name[0].style.backgroundColor = name[1].style.backgroundColor = vkbKeyInActive;
}

/* caps-lock key has been pressed or un-pressed physically or by one-shot */
function vkbCapsPress ()
{
   var active;
   if (!vkbCapsLocked)
   {
      vkbCapsLocked = true;
      active = vkbKeyActive;
   }
   else
   {
      vkbCapsLocked = false;
      active = vkbKeyInActive;
   }
   var name = document.getElementsByName('vkbcaps');
   name[0].style.backgroundColor = name[1].style.backgroundColor = active;
}

/* control key has been pressed or un-pressed physically or by one-shot */
function vkbCtrlPress (count)
{
   var active;
   if (!vkbCtrlLocked)
   {
      vkbCtrlLocked = true;
      vkbCtrl1 = count;
      active = vkbKeyActive;
   }
   else
   {
      vkbCtrlLocked = false;
      active = vkbKeyInActive;
   }
   if (vkbCtrl1)
      var name = document.getElementsByName('vkbctrl1');
   else
      var name = document.getElementsByName('vkbctrl0');
   name[0].style.backgroundColor = name[1].style.backgroundColor = active;
   if (!vkbCtrlLocked) vkbCtrl1 = 0;
}

/* alternate key has been pressed or un-pressed physically or by one-shot */
function vkbAltPress (count)
{
   var active;
   if (!vkbAltLocked)
   {
      vkbAltLocked = true;
      vkbAlt1 = count;
      active = vkbKeyActive;
   }
   else
   {
      vkbAltLocked = false;
      active = vkbKeyInActive;
   }
   if (vkbAlt1)
      var name = document.getElementsByName('vkbalt1');
   else
      var name = document.getElementsByName('vkbalt0');
   name[0].style.backgroundColor = name[1].style.backgroundColor = active;
   if (!vkbAltLocked) vkbAlt1 = 0;
}

/* one-shot key has been pressed or un-pressed physically or by one-shot */
function vkbOncePress ()
{
   var active;
   if (!vkbOnce1)
   {
      vkbOnce1 = 1;
      active = vkbKeyActive;
   }
   else
   {
      if (vkbTheDetachedChild)
      {
         /* detached keyboard */
         window.opener.thisDCLinabox.focusCursor();
         var parent = window.open('', 'vkbDCLinabox');
         parent.focus();
      }
      else
      {
         /* attached keyboard */
         document.getElementById("input").focus();
         thisDCLinabox.focusCursor();
      }

      vkbOnce1 = 0;
      active = 'inherit';
   }
   var name = document.getElementsByName('vkbonce');
   name[0].style.backgroundColor = name[1].style.backgroundColor = active;
}

/************/
/* detached */
/************/

var vkbDetachChild;

/* the "detach keyboard" key has been pressed */
function vkbDetach ()
{
   if (vkbTheDetachedChild) return;
   if (vkbDetachChild && !vkbDetachChild.closed)
   {
      virtualKeyboardClick (this);
      vkbDetachChild.window.focus();
      return;
   }
   window.addEventListener('unload',vkbDetachUnload);
   window.name = 'vkbDCLinabox';
   var specs = 'toolbar=0,location=0,directories=0,status=0,menubar=0,' +
               'scrollbars=0,resizable=0,copyhistory=0,width=850,height=250';
   var locn = window.location;
   var url = locn.protocol + '//' + locn.host + '/dclinabox/-/vkb_lkish.html';
   vkbDetachChild = window.open(url, "vkbDetachWindow", specs);
   virtualKeyboardClick (this);
   vkbDetachChild.window.focus();
}

/* close the virtual keyboard as the terminal session window is close */
function vkbDetachUnload ()
{
   if (vkbDetachChild && !vkbDetachChild.closed) vkbDetachChild.close();
}

var vkbTheDetachedChild = false;

/* the detached window HTML onload= event */
function vkbDetached ()
{
   vkbTheDetachedChild = true;
   var target = document.getElementById("vtvkb");
   vkbBuild();
   setTimeout (vkbDetachedAdjust, 50);
}

function vkbDetachedAdjust ()
{
   document.body.style.fontSize = window.opener.DCLinaboxFontSize + 'px';

   var target = document.getElementById("vtvkb");
   target.style.display = 'block';
   target.style.border = 'none';
   target.style.width = 'auto';

   target = document.getElementById("vkbtable");
   target.style.margin = 0;
   target.style.padding = 0;
   target.style.width = 'auto';

   target = document.getElementById("vkbtable1");
   target.style.width = 'auto';
   target.style.lineHeight = '1.6em';
   target.style.fontSize = '100%';

   target = document.getElementById("vkbtable2");
   target.style.width = 'auto';
   target.style.lineHeight = '1.6em';
   target.style.fontSize = '100%';

   setTimeout (vkbDetachedResize, 50);
}

var vkbDetachWidth = 0;
var vkbDetachHeight = 0;
var vkbDetachLast = 0;

/* keep the child (detached keyboard) window an appropriate size */
function vkbDetachedResize ()
{
   var date = new Date();
   var secs = date.getTime() / 1000;
   if (secs == vkbDetachLast) return;
   vkbDetachLast = secs;

   if (!(vkbDetachWidth && vkbDetachHeight))
   {
      var vkbtable = document.getElementById("vkbtable");
      var vkbtable1 = document.getElementById("vkbtable1");
      var width = vkbtable1.offsetWidth;
      width += window.outerWidth - window.innerWidth;
      var height = vkbtable1.offsetHeight;
      height += window.outerHeight - window.innerHeight;
      vkbDetachWidth = width + 28; 
      vkbDetachHeight = height + 28; 
   }
   window.resizeTo(vkbDetachWidth, vkbDetachHeight);
}

/*****************************************************************************/