var kbArray = new Array();
var agent = navigator.userAgent.toLowerCase();
var msie = (agent.indexOf("msie") != -1);

function setup_event(elem, eventType, handler)
{
  if(elem.attachEvent)
  {
    elem.attachEvent("on" + eventType, handler);
  }
  else if(elem.addEventListener)
  {
    elem.addEventListener(eventType, handler, false);
  }
}

function detach_event(elem, eventType, handler)
{
  if(elem.detachEvent)
  {
    elem.detachEvent("on" + eventType, handler);
  }
  else if(elem.removeEventListener)
  {
    elem.removeEventListener(eventType, handler, false);
  }
}

function get_event_source(e)
{
  var event = e ? e : window.event;
  return event.srcElement ? event.srcElement : event.target;
}

//////////////////// function to create style//////////////
function setup_style(element, top, left, width, height, position, border_color, text_align, line_height, font_weight, font_size, padding_left, padding_right)
{
  if(top) element.style.top = top;
  if(left) element.style.left = left;
  if(width) element.style.width = width;
  if(height) element.style.height = height;
  if(position) element.style.position = position;

  if(border_color) element.style.border = "1px solid " + border_color;
  if(line_height) element.style.lineHeight = line_height;
  if(text_align) element.style.textAlign = text_align;

  if(padding_left) element.style.paddingLeft = padding_left;
  if(padding_right) element.style.paddingRight = padding_right;
	element.style.fontWeight = (font_weight ? font_weight : "bold");
  element.style.fontSize = (font_size ? font_size : "14px");

  if(msie) element.UNSELECTABLE = "on";
}
//////////////////// function to create style ends here//////////////

function setup_key_element(top, left, width, height, border_color, text_align, line_height, font_weight, font_size, padding_left, padding_right,font_color)
{
  var key = document.createElement("DIV");
  setup_style(key, top, left, width, height, "absolute");

  var key_sub = document.createElement("DIV");
  key.appendChild(key_sub);

  setup_style(key_sub, "", "", "", line_height, "relative", border_color, text_align, line_height, font_weight, font_size, padding_left, padding_right);

  var retObj = new Object();
  retObj.main = key;
  retObj.sub = key_sub;

  return retObj;
}

function ShowVKeyboard(container_id, callback_proc, shownhide_on_change)
{
  var ct = document.getElementById(container_id);
  var vkboard = kbArray[container_id];

  if(vkboard)
  {
    var changed = false;

    if((vkboard.Callback != callback_proc) && (String(callback_proc).length > 0))
    {
      vkboard.Callback = callback_proc;
      changed = true;
    }

    if(!changed || (changed && shownhide_on_change))
    {
      ct.style.display = (ct.style.display == "none" ? "block" : "none");

      if(ct.style.display == "none")
      {
        var menu = document.getElementById(container_id + "___lang_menu");
        if(menu)
          menu.style.display = "none";
      }
    }
  }
  else
  {
    vkboard = new Object;

    vkboard.Callback = callback_proc;
    vkboard.Caps = false;
    vkboard.Shift = false;
    vkboard.AltGr = false;
    vkboard.DeadAction = null;
    vkboard.DeadValue = null;
    vkboard.CurrentLayout = "Us";

    vkboard.keys = new Array();
    vkboard.ctrl = new Array();

    kbArray[container_id] = vkboard;

    var kb = document.createElement("DIV");
    ct.appendChild(kb);

    kb.style.position = "relative";
    kb.style.top = "0px";
    kb.style.left = "0px";
    kb.style.width = "540px";
    kb.style.border = "1px solid #999";

    var kb_main = document.createElement("DIV");
    kb.appendChild(kb_main);

    kb_main.style.position = "relative";
    kb_main.style.width = "540px";
    kb_main.style.height = "131px";
    kb_main.style.cursor = "hand";

    // Number row:

    for(var i = 0; i < 13; i++)
    {
      var key = setup_key_element("1px", String(i * 26 + 1) + "px", "25px", "25px", "#777", "center", "23px");
      key.sub.id = container_id + "___key" + String(i);
      kb_main.appendChild(key.main);

      vkboard.keys[i] = key.sub;
    }

    var kb_kbp = setup_key_element("1px", "339px", "74px", "25px", "#777", "right", "23px", "normal", "14px", "", "4px");
    kb_kbp.sub.innerHTML = "BackSpace";
    kb_kbp.sub.id = container_id + "___kbp";
    kb_main.appendChild(kb_kbp.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_kbp.sub;

    // Top row:

    var kb_tab = setup_key_element("27px", "1px", "37px", "25px", "#777", "left", "23px", "normal", "14px", "4px");
    kb_tab.sub.innerHTML = "Tab";
    kb_tab.sub.id = container_id + "___tab";
    kb_main.appendChild(kb_tab.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_tab.sub;

    for(; i < 26; i++)
    {
      var key = setup_key_element("27px", String((i - 13) * 26 + 39) + "px", "25px", "25px", "#777", "center", "23px");
      key.sub.id = container_id + "___key" + String(i);
      kb_main.appendChild(key.main);

      vkboard.keys[i] = key.sub;
    }

    var kb_enter_top = setup_key_element("27px", "377px", "36px", "27px", "#777", "center", "25px");
    kb_enter_top.sub.style.borderBottomColor = "#fff";
    kb_enter_top.sub.innerHTML = "&nbsp;";
    kb_enter_top.sub.subst = "Enter";                   	 // Special expando
    kb_enter_top.sub.id = container_id + "___enter_top";
    kb_main.appendChild(kb_enter_top.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_enter_top.sub;

    // Home row:

    var kb_caps = setup_key_element("53px", "1px", "50px", "25px", "#777", "left", "23px", "normal", "14px", "4px");
    kb_caps.sub.innerHTML = "Caps";
    kb_caps.sub.id = container_id + "___caps";
    kb_main.appendChild(kb_caps.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_caps.sub;

    for(; i < 38; i++)
    {
      var key = setup_key_element("53px", String((i - 26) * 26 + 52) + "px", "25px", "25px", "#777", "center", "23px");
      key.sub.id = container_id + "___key" + String(i);
      kb_main.appendChild(key.main);

      vkboard.keys[i] = key.sub;
    }

    var kb_enter_l = setup_key_element("53px", "364px", "16px", "25px", "#777", "right", "23px", "normal", "14px", "", "4px");
    kb_enter_l.sub.style.borderRightColor = "#FFF";
    kb_enter_l.sub.innerHTML = "&nbsp";
    kb_enter_l.sub.subst = "Enter";
    kb_enter_l.sub.id = container_id + "___enter_l";
    kb_main.appendChild(kb_enter_l.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_enter_l.sub;

    var kb_enter = setup_key_element("53px", "377px", "36px", "25px", "#777", "right", "23px", "normal", "14px", "", "4px");
    kb_enter.sub.style.borderTopColor = "#FFF";
    kb_enter.sub.style.borderLeftColor = "#FFF";
    kb_enter.sub.innerHTML = "Enter";
    kb_enter.sub.id = container_id + "___enter";
    kb_main.appendChild(kb_enter.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_enter.sub;

    // Bottom row:

    var kb_shift = setup_key_element("79px", "1px", "63px", "25px", "#777", "left", "23px", "normal", "14px", "4px");
    kb_shift.sub.innerHTML = "Shift";
    kb_shift.sub.id = container_id + "___shift";
    kb_main.appendChild(kb_shift.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_shift.sub;

    for(; i < 48; i++)
    {
      var key = setup_key_element("79px", String((i - 38) * 26 + 65) + "px", "25px", "25px", "#777", "center", "23px");
      key.sub.id = container_id + "___key" + String(i);
      kb_main.appendChild(key.main);

      vkboard.keys[i] = key.sub;
    }

    var kb_shift_r = setup_key_element("79px", "325px", "88px", "25px", "#777", "right", "23px", "normal", "14px", "", "4px");
    kb_shift_r.sub.innerHTML = "Shift";
    kb_shift_r.sub.id = container_id + "___shift_r";
    kb_main.appendChild(kb_shift_r.main);
    vkboard.ctrl[vkboard.ctrl.length] = kb_shift_r.sub;

    // Language selector:
    var kb_lang = setup_key_element("105px", "1px", "33px", "25px", "#F77", "left", "23px", "normal", "14px", "4px");
    kb_lang.sub.id = container_id + "___lang";
    vkboard.ctrl[vkboard.ctrl.length] = kb_lang.sub;

    var kb_res_2 = setup_key_element("105px", "35px", "33px", "25px", "#CCC", "center", "23px");
    kb_res_2.sub.innerHTML = "&nbsp;";
    kb_res_2.sub.id = container_id + "___res_2";

    var kb_res_3 = setup_key_element("105px", "69px", "33px", "25px", "#CCC", "center", "23px");
    kb_res_3.sub.innerHTML = "&nbsp;";
    kb_res_3.sub.id = container_id + "___res_3";

    var kb_space = setup_key_element("105px", "103px", "157px", "25px", "#777", "center", "23px");
	kb_space.sub.id = container_id + "___space";
	//kb_space.sub.innerHTML="Space";
    setup_event(kb_space.sub, 'mousedown', generic_callback_proc);
    vkboard.ctrl[vkboard.ctrl.length] = kb_space.sub;

    var kb_alt_gr = setup_key_element("105px", "261px", "33px", "25px", "#777", "center", "23px", "normal", "11px");
    kb_alt_gr.sub.innerHTML = "AltGr";
    kb_alt_gr.sub.id = container_id + "___alt_gr";
    vkboard.ctrl[vkboard.ctrl.length] = kb_alt_gr.sub;

    var kb_res_5 = setup_key_element("105px", "295px", "33px", "25px", "#CCC", "center", "23px");
    kb_res_5.sub.innerHTML = "&nbsp;";
    kb_res_5.sub.id = container_id + "___res_5";

    var kb_res_6 = setup_key_element("105px", "329px", "33px", "25px", "#CCC", "center", "23px");
    kb_res_6.sub.innerHTML = "&nbsp;";
    kb_res_6.sub.id = container_id + "___res_6";

    kb_main.appendChild(kb_lang.main);
    kb_main.appendChild(kb_res_2.main);
    kb_main.appendChild(kb_res_3.main);
    kb_main.appendChild(kb_space.main);
    kb_main.appendChild(kb_alt_gr.main);
    kb_main.appendChild(kb_res_5.main);
    kb_main.appendChild(kb_res_6.main);

    // Numeric keypad:
    var kb_pad_eur = setup_key_element("1px", "436px", "25px", "25px", "#777", "center", "23px");
    kb_pad_eur.sub.innerHTML = "&#x20AC;";
    kb_pad_eur.sub.id = container_id + "___pad_eur";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_eur.sub;

    var kb_pad_slash = setup_key_element("1px", "462px", "25px", "25px", "#777", "center", "23px");
    kb_pad_slash.sub.innerHTML = "/";
    kb_pad_slash.sub.id = container_id + "___pad_slash";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_slash.sub;

    var kb_pad_star = setup_key_element("1px", "488px", "25px", "25px", "#777", "center", "23px");
    kb_pad_star.sub.innerHTML = "*";
    kb_pad_star.sub.id = container_id + "___pad_star";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_star.sub;

    var kb_pad_minus = setup_key_element("1px", "514px", "25px", "25px", "#777", "center", "23px");
    kb_pad_minus.sub.innerHTML = "-";
    kb_pad_minus.sub.id = container_id + "___pad_minus";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_minus.sub;

    var kb_pad_7 = setup_key_element("27px", "436px", "25px", "25px", "#777", "center", "23px");
    kb_pad_7.sub.innerHTML = "7";
    kb_pad_7.sub.id = container_id + "___pad_7";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_7.sub;

    var kb_pad_8 = setup_key_element("27px", "462px", "25px", "25px", "#777", "center", "23px");
    kb_pad_8.sub.innerHTML = "8";
    kb_pad_8.sub.id = container_id + "___pad_8";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_8.sub;

    var kb_pad_9 = setup_key_element("27px", "488px", "25px", "25px", "#777", "center", "23px");
    kb_pad_9.sub.innerHTML = "9";
    kb_pad_9.sub.id = container_id + "___pad_9";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_9.sub;

    var kb_pad_plus = setup_key_element("27px", "514px", "25px", "51px", "#777", "center", "49px");
    kb_pad_plus.sub.innerHTML = "+";
    kb_pad_plus.sub.id = container_id + "___pad_plus";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_plus.sub;

    var kb_pad_4 = setup_key_element("53px", "436px", "25px", "25px", "#777", "center", "23px");
    kb_pad_4.sub.innerHTML = "4";
    kb_pad_4.sub.id = container_id + "___pad_4";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_4.sub;

    var kb_pad_5 = setup_key_element("53px", "462px", "25px", "25px", "#777", "center", "23px");
    kb_pad_5.sub.innerHTML = "5";
    kb_pad_5.sub.id = container_id + "___pad_5";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_5.sub;

    var kb_pad_6 = setup_key_element("53px", "488px", "25px", "25px", "#777", "center", "23px");
    kb_pad_6.sub.innerHTML = "6";
    kb_pad_6.sub.id = container_id + "___pad_6";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_6.sub;

    var kb_pad_1 = setup_key_element("79px", "436px", "25px", "25px", "#777", "center", "23px");
    kb_pad_1.sub.innerHTML = "1";
    kb_pad_1.sub.id = container_id + "___pad_1";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_1.sub;

    var kb_pad_2 = setup_key_element("79px", "462px", "25px", "25px", "#777", "center", "23px");
    kb_pad_2.sub.innerHTML = "2";
    kb_pad_2.sub.id = container_id + "___pad_2";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_2.sub;

    var kb_pad_3 = setup_key_element("79px", "488px", "25px", "25px", "#777", "center", "23px");
    kb_pad_3.sub.innerHTML = "3";
    kb_pad_3.sub.id = container_id + "___pad_3";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_3.sub;

    var kb_pad_enter = setup_key_element("79px", "514px", "25px", "51px", "#777", "center", "49px", "normal", "9px");
    kb_pad_enter.sub.innerHTML = "Enter";
    kb_pad_enter.sub.id = container_id + "___pad_enter";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_enter.sub;

    var kb_pad_0 = setup_key_element("105px", "436px", "51px", "25px", "#777", "left", "23px", "bold", "14px", "7px");
    kb_pad_0.sub.innerHTML = "0";
    kb_pad_0.sub.id = container_id + "___pad_0";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_0.sub;

    var kb_pad_period = setup_key_element("105px", "488px", "25px", "25px", "#777", "center", "23px");
    kb_pad_period.sub.innerHTML = ".";
    kb_pad_period.sub.id = container_id + "___pad_period";
    vkboard.ctrl[vkboard.ctrl.length] = kb_pad_period.sub;

    kb_main.appendChild(kb_pad_eur.main);
    kb_main.appendChild(kb_pad_slash.main);
    kb_main.appendChild(kb_pad_star.main);
    kb_main.appendChild(kb_pad_minus.main);

    kb_main.appendChild(kb_pad_7.main);
    kb_main.appendChild(kb_pad_8.main);
    kb_main.appendChild(kb_pad_9.main);
    kb_main.appendChild(kb_pad_plus.main);

    kb_main.appendChild(kb_pad_4.main);
    kb_main.appendChild(kb_pad_5.main);
    kb_main.appendChild(kb_pad_6.main);

    kb_main.appendChild(kb_pad_1.main);
    kb_main.appendChild(kb_pad_2.main);
    kb_main.appendChild(kb_pad_3.main);
    kb_main.appendChild(kb_pad_enter.main);

    kb_main.appendChild(kb_pad_0.main);
    kb_main.appendChild(kb_pad_period.main);

    refresh_layout(container_id);
  }
}

function set_key_state(key, onoff, textcolor, bordercolor, backgroundcolor)
{
  if(key && key.style)
  {
    if(backgroundcolor) key.style.backgroundColor = backgroundcolor;
    if(bordercolor) key.style.borderColor = bordercolor;
    if(textcolor) key.style.color = textcolor;
  }

  detach_event(key, 'mousedown', generic_callback_proc);
  if(onoff)
    setup_event(key, 'mousedown', generic_callback_proc);
}

function refresh_layout(container_id)
{
  var vkboard = kbArray[container_id];

  var layout_name = vkboard.CurrentLayout;
  var arr_type = vkboard.AltGr ? (vkboard.Shift ? "alt_gr_shift" : "alt_gr") : (vkboard.Shift ? "shift" : (vkboard.Caps ? "caps" : "normal"));

  var nkeys = vkboard.keys.length;

  eval("var caps_arr = typeof(" + layout_name + "_caps) != 'undefined'");
  if(caps_arr)
    eval("caps_arr = " + layout_name + "_caps.length == " + String(nkeys));

  eval("var shift_arr = typeof(" + layout_name + "_shift) != 'undefined'");
  if(shift_arr)
    eval("shift_arr = " + layout_name + "_shift.length == " + String(nkeys));

  eval("var alt_gr_arr = typeof(" + layout_name + "_alt_gr) != 'undefined'");
  if(alt_gr_arr)
    eval("alt_gr_arr = " + layout_name + "_alt_gr.length == " + String(nkeys));

  eval("var alt_gr_shift_arr = alt_gr_arr && typeof(" + layout_name + "_alt_gr_shift) != 'undefined'");
  if(alt_gr_shift_arr)
    eval("alt_gr_shift_arr = " + layout_name + "_alt_gr_shift.length == " + String(nkeys));

  var caps = document.getElementById(container_id + "___caps");
  var shift = document.getElementById(container_id + "___shift");
  var shift_r = document.getElementById(container_id + "___shift_r");
  var alt_gr = document.getElementById(container_id + "___alt_gr");
  var space = document.getElementById(container_id + "___space");
  var lang = document.getElementById(container_id + "___lang");
  var enter_t = document.getElementById(container_id + "___enter_top");
  var enter_l = document.getElementById(container_id + "___enter_l");
  var enter_c = document.getElementById(container_id + "___enter");

  if(shift_arr)
  {
    set_key_state(shift, true, "#253", "#777", vkboard.Shift ? "#DDD" : "#ABC");
    set_key_state(shift_r, true, "#253", "#777", vkboard.Shift ? "#DDD" : "#ABC");
  }
  else
  {
    set_key_state(shift, false, "#CCC", "#CCC", "#ABC");
    set_key_state(shift_r, false, "#CCC", "#CCC", "#ABC");

    if(arr_type == "shift")
    {
      arr_type = "normal";
      vkboard.Shift = false;
    }
  }

  if(alt_gr_arr)
  {
    set_key_state(alt_gr, true, "#253", "#777", vkboard.AltGr ? "#DDD" : "#ABC");

    if((arr_type == "alt_gr") || (arr_type == "alt_gr_shift"))
    {
      if(alt_gr_shift_arr)
      {
        set_key_state(shift, true, "#253", "#777", "#ABC");
        set_key_state(shift_r, true, "#253", "#777", "#ABC");
      }
      else
      {
        set_key_state(shift, false, "#CCC", "#CCC", "#ABC");
        set_key_state(shift_r, false, "#CCC", "#CCC", "#ABC");

        arr_type = "alt_gr";
        vkboard.Shift = false;
      }
    }
  }
  else
  {
    set_key_state(alt_gr, false, "#CCC", "#CCC", "#ABC");

    if(arr_type == "alt_gr")
    {
      arr_type = "normal";
      vkboard.AltGr = false;
    }
    else if(arr_type == "alt_gr_shift")
    {
      arr_type = "normal";
      vkboard.AltGr = false;
      vkboard.Shift = false;

      shift.style.backgroundColor = "#ABC";
      shift_r.style.backgroundColor = "#ABC";
    }
  }

  if(caps_arr && (arr_type != "alt_gr") && (arr_type != "alt_gr_shift"))
  {
    set_key_state(caps, true, "#253", "#777", vkboard.Caps ? "#DDD" : "#ABC");
  }
  else
  {
    set_key_state(caps, false, "#CCC", "#CCC", "#ABC");

    vkboard.Caps = false;
    if(arr_type == "caps") arr_type = "normal";
  }

  for(var i = 0; i < nkeys; i++)
  {
    var ndx = "[" + String(i) + "]";

    eval("var key_val = " + layout_name + "_" + arr_type + ndx);
    var key = vkboard.keys[i];

    if(vkboard.Shift && vkboard.Caps)
    {
      eval("var key_nrm = " + layout_name + "_normal" + ndx);
      eval("var key_cps = " + layout_name + "_caps" + ndx);
      eval("var key_shf = " + layout_name + "_shift" + ndx);

      if((key_cps == key_shf) && (key_nrm != key_cps))
        key_val = key_nrm;
    }

    if(String(typeof(key_val)).toLowerCase() == "object")
    {
      key.innerHTML = key_val[0];
      key.dead = key_val[1];

      if(vkboard.DeadAction == key_val[1]) vkboard.DeadValue = key_val[0];

      set_key_state(key, true, "#F00", "#777", (vkboard.DeadValue == key_val[0] ? "#DDD" : "#ABC"));
    }
    else
    {
      key.dead = null;

      var block = false;
      if((key_val != "") && vkboard.DeadAction)
      {
        eval("for(var j = 0; j < " + vkboard.DeadAction + ".length; j++) { if(" + vkboard.DeadAction + "[j][0] == key_val) { key_val = " + vkboard.DeadAction + "[j][1]; break; }}");

        eval("if(j == " + vkboard.DeadAction + ".length) block = true");
      }

      if(key_val != "")
      {
        key.innerHTML = key_val;

        if(block)
          set_key_state(key, false, "#CCC", "#CCC", "#ABC");
        else
          set_key_state(key, true, "#253", "#777", "#ABC");
      }
      else
      {
        key.innerHTML = "&nbsp;";
        set_key_state(key, false, "#CCC", "#CCC", "#ABC");
      }
    }
  }

  for(i = 0; i < vkboard.ctrl.length; i++)
  {
    var elem = vkboard.ctrl[i];
    switch(elem)
    {
      case caps: case shift: case shift_r: case alt_gr:
        break;

      case space:
        space.innerHTML = vkboard.DeadAction ? vkboard.DeadValue : "&#x00A0;";
        break;

      case lang:
      {
        detach_event(elem, 'mousedown', handle_lang_choice_menu);
        if(vkboard.DeadAction)
        {
          set_key_state(elem, false, "#CCC", "#CCC", "#ABC");
        }
        else
        {
          set_key_state(elem, false, "#253", "#F77", "#ABC");
          setup_event(elem, 'mousedown', handle_lang_choice_menu);
        }
      }
      break;

      default:
      {
        if(vkboard.DeadAction)
          set_key_state(elem, false, "#CCC", "#CCC", "#ABC");
        else
          set_key_state(elem, true, "#253", "#777", "#ABC");

        switch(elem)
        {
          case enter_t: elem.style.borderBottomColor = "#FFF"; break;
          case enter_l: elem.style.borderRightColor = "#FFF"; break;
          case enter_c: elem.style.borderTopColor = elem.style.borderLeftColor = "#FFF"; break;
          default: break;
        }
      }
    }
  }

  lang.innerHTML = layout_name;
}

function handle_lang_choice_menu(event)
{
  var in_el = get_event_source(event);
  var container_id = in_el.id.substring(0, in_el.id.indexOf("___"));

  var menu = document.getElementById(container_id + "___lang_menu");
  if(menu)
  {
    menu.style.display = (menu.style.display == "block" ? "none" : "block");
  }
  else
  {
    var ct = document.getElementById(container_id);

    menu = document.createElement("DIV");
    ct.appendChild(menu);

    menu.id = container_id + "___lang_menu";
    menu.style.display = "block";
    menu.style.position = "relative";
    menu.style.top = "1px";
    menu.style.left = "0px";
    menu.style.width = "102px";
    menu.style.border = "1px solid #777";

    var menu_main = document.createElement("DIV");
    menu.appendChild(menu_main);

    menu_main.style.position = "relative";
    menu_main.style.width = "102px";
    menu_main.style.height = String(avail_langs.length * 26 + 1) + "px";
    menu_main.style.cursor = "default";

    for(var j = 0; j < avail_langs.length; j++)
    {
      var item = setup_key_element(String(26 * j + 1) + "px", "1px", "100px", "25px", "#CCC", "left", "23px", "normal", "14px", "4px");
      menu_main.appendChild(item.main);

      item.sub.id = container_id + "___lang_" + String(j);
      item.sub.innerHTML = avail_langs[j][1];

      setup_event(item.sub, 'mousedown', handle_lang_choice_item);
      setup_event(item.sub, 'mouseover', new Function("event", "get_event_source(event).style.backgroundColor = '#DDD'"));
      setup_event(item.sub, 'mouseout', new Function("event", "get_event_source(event).style.backgroundColor = '#FFF'"));
    }
  }
}

function handle_lang_choice_item(event)
{
  var in_el = get_event_source(event);

  var ndx = in_el.id.indexOf("___lang_");
  var lng = in_el.id.substring(ndx + 8, in_el.id.length);

  var container_id = in_el.id.substring(0, ndx);
  var vkboard = kbArray[container_id];

  vkboard.CurrentLayout = avail_langs[lng][0];
  refresh_layout(container_id);

  document.getElementById(container_id + "___lang_menu").style.display = "none";
}

function generic_callback_proc(event)
{
  event.cancelBubble = true;
  event.returnValue = false;

  var in_el = get_event_source(event);
  var container_id = in_el.id.substring(0, in_el.id.indexOf("___"));

  var vkboard = kbArray[container_id];
  var val = in_el.subst ? in_el.subst : in_el.innerHTML;

  if((val != "Caps") && (val != "Shift") && (val != "AltGr") && (in_el.dead || vkboard.DeadAction))
  {
    if(vkboard.DeadAction)
    {
      if(in_el.dead) val = "";

      vkboard.DeadAction = null;
      vkboard.DeadValue = null;
      refresh_layout(container_id);
    }
    else
    {
      vkboard.DeadAction = in_el.dead;
      refresh_layout(container_id);
      return;
    }
  }

  switch(val)
  {
    case "Caps": case "Shift": case "AltGr":
    {
      eval("vkboard." + val + " = !vkboard." + val);
      refresh_layout(container_id);
      return;
    }

    case "Tab": val = "   "; break;
    case "&lt;": val = "<"; break;
    case "&gt;": val = ">"; break;
    case "&amp;": val = "&"; break;
    case "&nbsp;": val = " "; break;
    case "&quot;": val = "\""; break;
    default: break;
  }

  if(val && vkboard.Callback)
    eval(vkboard.Callback + (val == "\"" ? "('" + val + "')" : (val == "\\" ? "(\"\\\\\")" : "(\"" + val + "\")")));
}

// Layout info:

var avail_langs = new Array(Array("Us", "English (US)"));

// Us International:

var Us_normal = new Array(Array("&#x0060;", "Grave"), "&#x0031;", "&#x0032;", "&#x0033;", "&#x0034;", "&#x0035;", "&#x0036;", "&#x0037;", "&#x0038;", "&#x0039;", "&#x0030;", "&#x002D;", "&#x003D;",
                          "&#x0071;", "&#x0077;", "&#x0065;", "&#x0072;", "&#x0074;", "&#x0079;", "&#x0075;", "&#x0069;", "&#x006F;", "&#x0070;", "&#x005B;", "&#x005D;", "&#x005C;",
                          "&#x0061;", "&#x0073;", "&#x0064;", "&#x0066;", "&#x0067;", "&#x0068;", "&#x006A;", "&#x006B;", "&#x006C;", "&#x003B;", "&#x0027;", "",
                          "&#x007A;", "&#x0078;", "&#x0063;", "&#x0076;", "&#x0062;", "&#x006E;", "&#x006D;", "&#x002C;", "&#x002E;", "&#x002F;");

var Us_caps = new Array(Array("&#x0060;", "Grave"), "&#x0031;", "&#x0032;", "&#x0033;", "&#x0034;", "&#x0035;", "&#x0036;", "&#x0037;", "&#x0038;", "&#x0039;", "&#x0030;", "&#x002D;", "&#x003D;",
                        "&#x0051;", "&#x0057;", "&#x0045;", "&#x0052;", "&#x0054;", "&#x0059;", "&#x0055;", "&#x0049;", "&#x004F;", "&#x0050;", "&#x005B;", "&#x005D;", "&#x005C;",
                        "&#x0041;", "&#x0053;", "&#x0044;", "&#x0046;", "&#x0047;", "&#x0048;", "&#x004A;", "&#x004B;", "&#x004C;", "&#x003B;", "&#x0027;", "",
                        "&#x005A;", "&#x0058;", "&#x0043;", "&#x0056;", "&#x0042;", "&#x004E;", "&#x004D;", "&#x002C;", "&#x002E;", "&#x002F;");

var Us_shift = new Array(Array("&#x007E;", "Tilde"), "&#x0021;", "&#x0040;", "&#x0023;", "&#x0024;", "&#x0025;", Array("&#x005E;", "Circumflex"), "&#x0026;", "&#x002A;", "&#x0028;", "&#x0029;", "&#x005F;", "&#x002B;",
                         "&#x0051;", "&#x0057;", "&#x0045;", "&#x0052;", "&#x0054;", "&#x0059;", "&#x0055;", "&#x0049;", "&#x004F;", "&#x0050;", "&#x007B;", "&#x007D;", "&#x007C;",
                         "&#x0041;", "&#x0053;", "&#x0044;", "&#x0046;", "&#x0047;", "&#x0048;", "&#x004A;", "&#x004B;", "&#x004C;", "&#x003A;", "&#x0022;", "",
                         "&#x005A;", "&#x0058;", "&#x0043;", "&#x0056;", "&#x0042;", "&#x004E;", "&#x004D;", "&#x003C;", "&#x003E;", "&#x003F;");

var Us_alt_gr = new Array("", "&#x00A1;", "&#x00B2;", "&#x00B3;", "&#x00A4;", "&#x20AC;", "&#x00BC;", "&#x00BD;", "&#x00BE;", "&#x0091;", "&#x0092;", "&#x00A5;", "&#x00D7;",
                          "&#x00E4;", "&#x00E5;", "&#x00E9;", "&#x00AE;", "&#x00FE;", "&#x00FC;", "&#x00FA;", "&#x00ED;", "&#x00F3;", "&#x00F6;", "&#x00AB;", "&#x00BB;",
                          "&#x00AC;", "&#x00E1;", "&#x00DF;", "&#x0111;", "", "", "", "", "", "&#x00F8;", "&#x00B6;", Array("&#x00B4;", "Acute"), "", "&#x00E6;", "", "&#x00A9;", "", "",
                          "&#x00F1;", "&#x00B5;", "&#x00E7;", "", "&#x00BF;");

var Us_alt_gr_shift = new Array("", "&#x00B9;", "", "", "&#x00A3;", "", "", "", "", "", "", "", "&#x00F7;", "&#x00C4;", "&#x00C5;", "&#x00C9;", "", "&#x00DE;", "&#x00DC;",
                                "&#x00DA;", "&#x00CD;", "&#x00D3;", "&#x00D6;", "", "", "&#x00A6;", "&#x00C1;", "&#x00A7;", "&#x0110;", "", "", "", "", "", "&#x00D8;",
                                "&#x00B0;", Array("&#x00A8;", "Umlaut"), "", "&#x00C6;", "", "&#x00A2;", "", "", "&#x00D1;", "", "&#x00C7;", "", "");