/**
 * $Id: virtualkeyboard.js 428 2008-06-17 12:08:28Z wingedfox $
 * $HeadURL: https://svn.debugger.ru/repos/jslibs/Virtual%20Keyboard/tags/VirtualKeyboard.v3.5.0b1/virtualkeyboard.js $
 *
 * Virtual Keyboard.
 * (C) 2006 Vladislav SHCHapov, phprus@gmail.com
 * (C) 2006-2007 Ilya Lebedev <ilya@lebedev.net>
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 * See http://www.gnu.org/copyleft/lesser.html
 *
 * Do not remove this comment if you want to use script!
 *
 * @author Vladislav SHCHapov <phprus@gmail.com>
 * @author Ilya Lebedev <ilya@lebedev.net>
 * @version $Rev: 428 $
 * @lastchange $Author: wingedfox $ $Date: 2008-06-17 16:08:28 +0400 (Втр, 17 Июн 2008) $
 */
/*
*  The Virtual Keyboard
*
*  @class VirtualKeyboard
*  @constructor
*/
var VirtualKeyboard = new function () {
  var self = this;
  self.$VERSION$ = " $HeadURL: https://svn.debugger.ru/repos/jslibs/Virtual%20Keyboard/tags/VirtualKeyboard.v3.5.0b1/virtualkeyboard.js $ ".match(/\/[^\.]*[\.\/]([^\/]+)\/[\w\.\s$]+$/)[1]+"."+(" $Rev: 428 $ ".replace(/\D/g,""));
  /**
   *  Some configurable stuff
   *
   *  @type Object
   *  @scope private
   */
  var options = {
     'layout' : null
  }
  /**
   *  ID prefix
   *
   *  @type String
   *  @access private
   */
  var idPrefix = 'kb_b';
  /**
   *  This flag is used to enable or disable keyboard animation
   *  This is very useful in the secure environments, like password input. Controlled by the CSS class on the field
   *
   *  @see cssClasses
   *  @type Boolean
   *  @scope private
   */
  var animate = true;
  /**
   *  list of the control keys to be shown
   *
   *
   *
   */
  var controlkeys = {14:'backspace'
                    ,15:'tab'
                    ,28:'enter'
                    ,29:'caps'
                    ,41:'shift_left'
                    ,52:'shift_right'
                    ,53:'del'
                    ,54:'ctrl_left'
                    ,55:'alt_left'
                    ,56:'space'
                    ,57:'alt_right'
                    ,58:'ctrl_right'};

  /**
   *  Current keyboard mapping
   *
   *  @type Array
   *  @scope private
   */
  var keymap;

  /**
   *  List of the available mappings
   *
   *  @type Object
   *  @scope private
   */
  var keymaps = {
        'QWERTY'              : "À1234567890m=ÜQWERTYUIOPÛÝASDFGHJKL;ÞZXCVBNM¼¾¿"
       ,'QWERTY Canadian'     : "Þ1234567890m=ÜQWERTYUIOPÛÝASDFGHJKL;ÀZXCVBNM¼¾¿"
       ,'QWERTY Dutch'        : "Þ1234567890Û¿ÜQWERTYUIOPÝ;ASDFGHJKL=ÀZXCVBNM¼¾m"
       ,'QWERTY Estonian'     : "¿1234567890m=ÜQWERTYUIOPÞÛASDFGHJKL;ÀZXCVBNM¼¾Ý"
       ,'QWERTY Greek (220)'  : "À1234567890¿ÛÜQWERTYUIOP=ÝASDFGHJKL;ÞZXCVBNM¼¾m"
       ,'QWERTY Greek (319)'  : "À1234567890¿=ÜQWERTYUIOPÛÝASDFGHJKL;ÞZXCVBNM¼¾m"
       ,'QWERTY Gujarati'     : "À1234567890m=XQWERTYUIOPÛÝASDFGHJKL;ÜZXCVBNM¼¾¿"
       ,'QWERTY Italian'      : "Ü1234567890ÛÝ¿QWERTYUIOP;=ASDFGHJKLÀÞZXCVBNM¼¾m"
       ,'QWERTY Kannada'      : "À1234567890m=ZQWERTYUIOPÛÝASDFGHJKL;ÞZXCVBNM¼¾¿"
       ,'QWERTY Portuguese'   : "À1234567890ÛÝ¿QWERTYUIOP=;ASDFGHJKLÞÜZXCVBNM¼¾m"
       ,'QWERTY Scandinavian' : "Ü1234567890=Û¿QWERTYUIOPÝ;ASDFGHJKLÀÞZXCVBNM¼¾m"
       ,'QWERTY Spanish'      : "Ü1234567890mÛ¿QWERTYUIOPÝ;ASDFGHJKLÀÞZXCVBNM¼¾ß"
       ,'QWERTY Tamil'        : "À1234567890m =ZQWERTYUIOPÛÝASDFGHJKL;ÞCVBNM¼¾ ¿"
       ,'QWERTY Turkish'      : "À1234567890ßm¼QWERTYUIOPÛÝASDFGHJKL;ÞZXCVBNM¿Ü¾"
       ,'QWERTY UK'           : "ß1234567890m=ÞQWERTYUIOPÛÝASDFGHJKL;ÀZXCVBNM¼¾¿"
       ,'QWERTZ Albanian'     : "À1234567890m=ÜQWERTZUIOPÛÝASDFGHJKL;ÞYXCVBNM¼¾¿"
       ,'QWERTZ Bosnian'      : "À1234567890¿=ÜQWERTZUIOPÛÝASDFGHJKL;ÞYXCVBNM¼¾m"
       ,'QWERTZ Czech'        : "À1234567890=¿ÜQWERTZUIOPÛÝASDFGHJKL;ÞYXCVBNM¼¾m"
       ,'QWERTZ German'       : "Ü1234567890ÛÝ¿QWERTZUIOP;=ASDFGHJKLÀÞYXCVBNM¼¾m"
       ,'QWERTZ Hungarian'    : "0123456789À¿=ÜQWERTZUIOPÛÝASDFGHJKL;ÞYXCVBNM¼¾m"
       ,'QWERTZ Slovak'       : "À1234567890¿ßÜQWERTZUIOPÛÝASDFGHJKL;ÞYXCVBNM¼¾m"
       ,'QWERTZ Swiss'        : "Ü1234567890ÛÝßQWERTZUIOP;ÞASDFGHJKLÀ¿YXCVBNM¼¾m"
       ,'AZERTY Belgian'      : "Þ1234567890ÛmÜAZERTYUIOPÝ;QSDFGHJKLMÀWXCVBN¼¾¿="
       ,'AZERTY French'       : "Þ1234567890Û=ÜAZERTYUIOPÝ;QSDFGHJKLMÀWXCVBN¼¾¿ß"
       ,',WERTY Bulgarian'    : "À1234567890m¾Ü¼WERTYUIOPÛÝASDFGHJKL;ÞZXCVBNMßQ¿"
       ,'QGJRMV Latvian'      : "À1234567890mFÜQGJRMVNZWXYH;USILDATECÞÛBÝKPOß¼¾¿"
       ,'/,.PYF UK-Dvorak'    : "m1234567890ÛÝÜÀ¼¾PYFGCRL¿=AOEUIDHTNSÞ;QJKXBMWVZ"
       ,'FG;IOD Turkish F'    : "À1234567890=mXFG;IODRNHPQWUÛEAÝTKMLYÞJÜVC¿ZSB¾¼"
       ,';QBYUR US-Dvorak'    : "7ÛÝ¿PFMLJ4321Ü;QBYURSO¾65=mKCDTHEAZ8ÞÀXGVWNI¼09"
       ,'56Q.OR US-Dvorak'    : "m1234JLMFP¿ÛÝÜ56Q¾ORSUYB;=78ZAEHTDCKÞ90X¼INWVGÀ"
  }
  /**
   *  Keyboard mode, bitmap
   *
   *
   *
   *
   *  @type Number
   *  @scope private
   */
  var mode = 0
     ,VK_NORMAL = 0
     ,VK_SHIFT = 1
     ,VK_ALT = 2
     ,VK_CTRL = 4
     ,VK_CAPS = 8;
  /**
   *  Deadkeys, original and mofified characters
   *
   *  @see http://en.wikipedia.org/wiki/Dead_key
   *  @see http://en.wikipedia.org/wiki/Combining_character
   *  @type Array
   *  @access private
   */
  var deadkeys = [
    // greek tonos
    ["\u0384", "\u03b1\u03ac \u03b5\u03ad \u03b9\u03af \u03bf\u03cc \u03b7\u03ae \u03c5\u03cd \u03c9\u03ce "+
               "\u0391\u0386 \u0395\u0388 \u0399\u038a \u039f\u038c \u0397\u0389 \u03a5\u038e \u03a9\u038f"
    ],
    // greek dialytika tonos
    ["\u0385", "\u03c5\u03b0 \u03b9\u0390"],
    // acute accent
    ["\xb4", "a\xe1 A\xc1 e\xe9 E\xc9 i\xed I\xcd o\xf3 O\xd3 u\xfa U\xda y\xfd Y\xdd "+
             "c\u0107 C\u0106 l\u013a L\u0139 n\u0144 N\u0143 r\u0155 R\u0154 s\u015b S\u015a w\u1e83 W\u1e82 z\u017a Z\u0179"
    ],
    // diaeresis
    ["\xa8", "a\xe4 A\xc4 e\xeb E\xcb i\xef I\xcf j\u0135 J\u0134 "+
             "o\xf6 O\xd6 u\xfc U\xdc y\xff Y\u0178 w\u1e85 W\1e84 "+ //latin
             "\u03c5\u03cb \u03b9\u03ca \u03a5\u03ab \u0399\u03aa"    //greek
    ],
    // circumflex
    ["\x5e", "a\xe2 A\xc2 e\xea E\xca i\xee I\xce o\xf4 O\xd4 u\xfb U\xdb y\u0176 Y\u0177 "+
             "c\u0109 C\u0108 h\u0125 H\u0124 g\u011d G\u011c s\u015d S\u015c w\0175 W\0174 "+ //latin
             "\u0131\xee \u0130\xce " // dotless small i, capital I with dot above
    ],
    // grave
    ["\x60", "a\xe0 A\xc0 e\xe8 E\xc8 i\xec I\xcc o\xf2 O\xd2 u\xf9 U\xd9 y\u1ef3 Y\u1ef2 w\u1e81 W\u1e80"],
    // tilde
    ["\x7e", "a\xe3 A\xc3 o\xf5 O\xd5 u\u0169 U\\u0168 n\xf1 N\xd1 y\u1ef8 Y\1ef7"],
    // ring above, degree sign
    ["\xb0", "a\xe5 A\xc5 u\u016f U\u016e"],
    // caron
    ["\u02c7", "e\u011b E\u011a "+
               "c\u010d C\u010c d\u010f D\u010e l\u013e L\u013d n\u0148 N\u0147 "+
               "r\u0158 R\u0158 s\u0161 S\u0160 t\u0165 T\u0164 z\u017e Z\u017d"
    ],
    // ogonek
    ["\u02db", "a\u0105 A\u0104 e\u0119 E\u0118 i\u012f I\u012e c\u010b C\u010a g\u0121 G\u0120 u\u0173 U\u0172"],
    // dot above
    ["\u02d9", "e\u0117 E\u0116 u0131i I\u0130 z\u017c Z\u017b"],
    // middle dot
    ["\xb7", "e\u0117 E\u0116 u0131i I\u0130 z\u017c Z\u017b"],
    // breve
    ["\u02d8", "a\u0103 A\u0102 e\u0115 E\u0114 o\0u14f O\0u14e G\u011f g\u011e"],
    // double acute
    ["\u02dd", "o\u0151 O\u0150 U\u0170 u\u0171"],
    // cedilla
    ["\xb8", "c\xe7 C\xc7 g\u0123 G\u0122 k\u0137 K\u0136 l\u013c L\u013b "+
             "n\u0146 N\u0145 r\u0157 R\u0156 S\u015e s\u015f T\u0162 t\u0163"
    ]
  ]
  /**
   *  CSS classes will be used to style buttons
   *
   *  @type Object
   *  @access private
   */
  var cssClasses = {
    'buttonUp'      : 'kbButton'
   ,'buttonDown'    : 'kbButtonDown'
   ,'buttonHover'   : 'kbButtonHover'
   ,'buttonNormal'  : 'normal'
   ,'buttonShifted' : 'shifted'
   ,'buttonAlted'   : 'alted'
   ,'capslock'      : 'capsLock'
   ,'deadkey'       : 'deadKey'
   ,'noanim'        : 'VK_no_animate'

  }
  /**
   *  current layout
   *
   *  @type Object
   *  @access public
   */
  var lang = null;
  /**
   *  Available layouts
   *
   *  Structure:
   *   [
   *    {'name' : {String} layout name to find it using switchLayout
   *     'keys' : {Array} 3-dimensional array of the keyboard codes [normal, shift, alt] keys
   *     'css' : {String} css class to be set on kbDesk when layout is activated
   *     'dk' : {String} list of the active dead keys
   *     'cbk' : {Function} custom input transformations
   *               OR
   *             {Object} { 'load' : optional on load callback
   *                        'activate' : optional activation callback
   *                        'charProcessor' : required input transformation callback
   *                      }
   *     'rtl' : true means the layout is right-to-left
   *
   *    }
   *   ]
   *
   *  @type Array
   *  @access private
   */
  var layout = []
  /**
   *  Name-to-ID map
   *
   *  @type Object
   *  @scope private
   */
  layout.hash = {}
  /**
   *  Shortcuts to the nodes
   *
   *  @type Object
   *  @access private
   */
  var nodes = {
      keyboard : null     // Keyboard container @type HTMLDivElement
     ,desk : null         // Keyboard desk @type HTMLDivElement
     ,langbox : null      // Language selector @type HTMLSelectElement
     ,attachedInput : null// Field, keyboard attached to
  }
  /**
   *  Key code to be inserted on the keypress
   *
   *  @type Number
   *  @scope private
   */
  var newKeyCode = null;

  /**************************************************************************
  **  KEYBOARD LAYOUT
  **************************************************************************/
  /**
   *  Add layout to the list
   *
   *  @see #layout
   *  @param {Object} l layout description hash:
   *    { 'code' : {String} layout code
   *     ,'name' : {String} layout name
   *     ,'keys' : {String,Array} keycodes
   *     ,'shift': {Object} optional shift keys, array of string
   *     ,'alt'  : {Array} optional altgr keys
   *     ,'dk'   : {String} list of the active deadkeys
   *     ,'cbk' : {Function} char processing callback
   *                OR
   *              { 'load' : {Function} optional load callback (called from addLayout)
   *               ,'activate' : {Function} optional activation callback (called from switchLayout)
   *               ,'charProcessor' : {Function} required char processing callback
   *              }
   *    }
   *  @scope public
   */
  self.addLayout = function(l) {

      var code = l.code.entityDecode().split("-")
         ,name = l.name.entityDecode()
         ,alpha = __doParse(l.keys)

      if (!isArray(alpha) || 47!=alpha.length) throw new Error ('VirtualKeyboard requires \'keys\' property to be an array with 47 items, '+alpha.length+' detected. Layout code: '+code+', layout name: '+name);

      /*
      *  overwrite keys with parsed data for future use
      */
      l.code = (code[1] || code[0]);
      l.name = name;
      l.keys = alpha;
      l.domain = code[0];

      name = l.code+" "+name
      if (!layout.hash.hasOwnProperty(name)) {
          layout.hash[name] = layout.length;
          l.toString = function(){return this.code+" "+this.name};
          layout.push(l);
      }
      /*
      *  call load handler for the current layout
      */
      if (l.cbk && isFunction(l.cbk.load))
          l.cbk.load.call(this);
  }
  /**
   *  Set current layout
   *
   *  @param {String} code layout name
   *  @return {Boolean} change state
   *  @access public
   */
  self.switchLayout = function (code) {
    if (!layout.hash.hasOwnProperty(code)) return false;

    /*
    *  if number of the option != number of layouts, regenerate list
    */
    if (layout.length != nodes.langbox.options.length) __buildOptionsList();
    /*
    *  touch the dropdown box
    */
    nodes.langbox.options[layout.hash[code]].selected = true;

    lang = layout[layout.hash[code]];
    if (!isArray(lang)) lang = layout[layout.hash[code]] = __prepareLayout(lang);

    /*
    *  overwrite layout
    */
    nodes.desk.innerHTML = __getKeyboardHtml(lang);

    /*
    *  set layout-dependent class names
    */
    nodes.desk.className = lang.css
    self.IME.css = lang.css

    /*
    *  reset mode for the new layout
    */
    mode = VK_NORMAL;
    /*
    *  call IME activation method, if exists
    */
    if (isFunction(lang.activate)) {
        lang.activate();
    }
    /*
    *  toggle RTL/LTR state
    */
    if (nodes.attachedInput) (nodes.attachedInput.contentWindow?nodes.attachedInput.contentWindow.document.body
                                                               :nodes.attachedInput).dir = lang.rtl?'rtl':'ltr'
    return true;
  }

  /**
   *  Toggles layout mode (switch alternative key bindings)
   *
   *  @access private
   */
  self.toggleLayoutMode = function () {
    /*
    *  now, process to layout toggle
    */
    var bi = -1
       /*
       *  0 - normal keys
       *  1 - shift keys
       *  2 - alt keys (has priority, when it pressed together with shift)
       */
       ,sh = Math.min(mode&(VK_ALT|VK_SHIFT),2)
       ,ca = [cssClasses.buttonNormal,cssClasses.buttonShifted,cssClasses.buttonAlted];
    DOM.CSS(nodes.desk).removeClass.apply(self,ca).addClass(ca[sh]);
    for (var i=0, lL=lang.length; i<lL; i++) {
        if (isString(lang[i])) continue;
        bi++;
        var btn = document.getElementById(idPrefix+bi).firstChild.childNodes;
        /*
        *  swap symbols and its CSS classes
        */
        if (btn.length>1) {
            if (btn[sh].firstChild && btn[sh].firstChild.nodeValue.length)
                DOM.CSS(btn[0]).removeClass(ca).addClass(ca[sh]);
            DOM.CSS(btn[1]).removeClass(ca).addClass([cssClasses.buttonShifted
                                                     ,cssClasses.buttonNormal
                                                     ,cssClasses.buttonShifted][sh]);
            DOM.CSS(btn[2]).removeClass(ca).addClass([cssClasses.buttonAlted
                                                     ,cssClasses.buttonAlted
                                                     ,cssClasses.buttonNormal][sh]);
        }
    }
  }
  /**
   *  Return the list of the available layouts
   *
   *  @return {Array}
   *  @scope public
   */
  self.getLayouts = function () {
      var lts = [];
      for (var i=0,lL=layout.length;i<lL;i++) {
          lts[lts.length] = [layout[i].code,layout[i].name];
      }
      return lts.sort();
  }

  //---------------------------------------------------------------------------
  // GLOBAL EVENT HANDLERS
  //---------------------------------------------------------------------------
  /**
   *  Do the key clicks, caught from both virtual and real keyboards
   *
   *  @param {HTMLInputElement} key on the virtual keyboard
   *  @param {EventTarget} evt optional event object, to be used to re-map the keyCode
   *  @access private
   */
  var _keyClicker_ = function (key, evt) {
      var chr = ""
         ,ret = false;
      key = key.replace(idPrefix, "");
      switch (key) {
          case "caps" :
          case "shift" :
          case "shift_left" :
          case "shift_right" :
          case "alt" :
          case "alt_left" :
          case "alt_right" :
              return;
          case 'backspace':

              /*
              *  is char is in the buffer, or selection made, made decision at __charProcessor
              */
              if (String(DocumentSelection.getSelection(nodes.attachedInput)).length > 1) {
                  chr = "\x08";
              } else if (evt) {
                  self.IME.hide(true);
                  return true;
              } else {
                  DocumentSelection.deleteAtCursor(nodes.attachedInput, false);
                  self.IME.hide(true);
              }
              break;
          case 'del':
              self.IME.hide(true);
              if (evt)
                  return true;
              DocumentSelection.deleteAtCursor(nodes.attachedInput, true);
              break;
          case 'space':
              chr = " ";
              break;
          case 'tab':
              chr = "\t";
              break;
          case 'enter':
              chr = "\n";
              break;
          default:
                  var el = document.getElementById(idPrefix+key);
                  /*
                  *  replace is used to strip 'nbsp' base char, when its used to display combining marks
                  *  @see __getCharHtmlForKey
                  */
                  try {
                      chr = (el.firstChild.childNodes[Math.min(mode&(VK_ALT|VK_SHIFT),2)].firstChild || el.firstChild.firstChild.firstChild).nodeValue.replace("\xa0","").replace("\xa0","");
                  } catch (err) {
                      return;
                  }
                  /*
                  *  do uppercase if either caps or shift clicked, not both
                  *  and only 'normal' key state is active
                  */
                  if (((mode & VK_SHIFT || mode & VK_CAPS) && (mode ^ (VK_SHIFT | VK_CAPS)))) chr = chr.toUpperCase();
                  /*
                  *  reset shift state, if clicked on the letter button
                  */
                  if (!(evt && evt.shiftKey) && mode&VK_SHIFT) {
                      reSetDualKeys('shift', VK_SHIFT);
                      self.toggleLayoutMode();
                      if ((mode & VK_SHIFT || mode & VK_CAPS) && (mode ^ (VK_SHIFT | VK_CAPS))) {
                          if (animate) DOM.CSS(nodes.desk).addClass(cssClasses.capslock);
                      } else {
                          if (animate) DOM.CSS(nodes.desk).removeClass(cssClasses.capslock)
                      }
                  }
              break;
      }
      if (chr) {
          /*
          *  process current selection and new symbol with __charProcessor, it might update them
          */
          if (!(chr = __charProcessor(chr, DocumentSelection.getSelection(nodes.attachedInput)))) return ret;
          /*
          *  try to create an event, then fallback to DocumentSelection, if something fails
          */
          try {
              /*
              *  throw an error when selection is required or multiple chars submitted
              *  it's simpler than write number of nesting if..else statements
              */
              if (chr[1] || chr[0].length>1 || nodes.attachedInput.contentDocument || '\t' == chr[0]) {
                  throw new Error;
              }
              var ck = chr[0].charCodeAt(0);
              /*
              *  trying to create an event, borrowed from YAHOO.util.UserAction
              */
              if (isFunction(document.createEvent)) {
                  var evt = null;
                  try {
                      evt = document.createEvent("KeyEvents");
                      evt.initKeyEvent('keypress', false, true, nodes.attachedInput.contentWindow, false, false, false, false, 0, ck);
                  } catch (ex) {
                      /*
                      *  Safari implements
                      */
                      evt = document.createEvent("KeyboardEvents");
                      evt.initKeyEvent('keypress', false, true, nodes.attachedInput.contentWindow, false, false, false, false, ck, 0);
                  }
                  evt.VK_bypass = true;
                  nodes.attachedInput.dispatchEvent(evt);
              } else {
                  evt.keyCode = 10==ck?13:ck;
                  ret = true;
              }
          } catch (e) {
              DocumentSelection.insertAtCursor(nodes.attachedInput,chr[0]);
              /*
              *  select as much, as __charProcessor callback requested
              */
              if (chr[1]) {
                  DocumentSelection.setRange(nodes.attachedInput,-chr[1],0,true);
              }
              nodes.attachedInput.focus();
          }
      }
      return ret;
  }
  /**
   *  Captures some keyboard events
   *
   *  @param {Event} keydown
   *  @access protected
   */
  var _keydownHandler_ = function(e) {
    /*
    *  it's global event handler. do not process event, if keyboard is closed
    */
    if (!self.isOpen()) return;
    /*
    *  differently process different events
    */
    var keyCode = e.getKeyCode();
    switch (e.type) {
      case 'keydown' :
        switch (keyCode) {
          case 8: // backspace
          case 9: // tab
          case 46: // del
              var el = nodes.desk.childNodes[keymap[keyCode]];
              /*
              *  set the class only 1 time
              */
              if (animate && !e.getRepeat()) DOM.CSS(el).addClass(cssClasses.buttonDown);
              if (!_keyClicker_(el.id, e)) e.preventDefault();

              break;
          case 16://shift
              if (!e.getRepeat() && !(mode&VK_SHIFT)) {
                  reSetDualKeys('shift', VK_SHIFT);
                  self.toggleLayoutMode();
              }
              break;
          case 17: //ctrl
          case 18: //alt
              if (!e.getRepeat() && e.altKey && e.ctrlKey && !(mode&(VK_ALT|VK_CTRL))) {
                  reSetDualKeys('ctrl', VK_CTRL);
                  reSetDualKeys('alt', VK_ALT);
                  self.toggleLayoutMode();
              }
              break;
          case 20: //caps lock
              if (!e.getRepeat()) {
                  var cp = document.getElementById(idPrefix+'caps');
                  if (!(mode & VK_CAPS)) {
                      mode = mode | VK_CAPS;
                      DOM.CSS(cp).addClass(cssClasses.buttonDown)
                  } else {
                      mode = mode ^ VK_CAPS;
                      DOM.CSS(cp).removeClass(cssClasses.buttonDown)
                  }
              }
              break;
          case 27:
              VirtualKeyboard.close();
              return false;
          default:
              if (keymap.hasOwnProperty(keyCode)) {
                  if (!(e.altKey ^ e.ctrlKey)) {
                      var el = nodes.desk.childNodes[keymap[keyCode]];
                      if (animate) DOM.CSS(el).addClass(cssClasses.buttonDown);
                      /*
                      *  assign the key code to be inserted on the keypress
                      */
                      newKeyCode = el.id;
                  }
                  if (e.altKey && e.ctrlKey) {
                      e.preventDefault();
                      /*
                      *  this block is used to print a char when ctrl+alt pressed
                      *  browsers does not invoke "kepress" in this case
                      */
                      if (e.srcElement) {
                          _keyClicker_(nodes.desk.childNodes[keymap[keyCode]].id, e)
                          newKeyCode = "";
                      }
                  }
              } else {
                  self.IME.hide();
              }
              break;
        }
        break;
      case 'keyup' :
        switch (keyCode) {
            case 17:
            case 18:
                if (!e.ctrlKey && mode&(VK_CTRL|VK_ALT)) {
                    reSetDualKeys('ctrl', VK_CTRL);
                    reSetDualKeys('alt', VK_ALT);
                    self.toggleLayoutMode();
                }
                break;
            case 16:
                reSetDualKeys('shift', VK_SHIFT);
                self.toggleLayoutMode();
                break;
            case 20:
                return;
            default:
                if (animate && keymap.hasOwnProperty(keyCode)) {
                    DOM.CSS(nodes.desk.childNodes[keymap[keyCode]]).removeClass(cssClasses.buttonDown);
                }
        }
        break;
      case 'keypress' :
        /*
        *  flag is set only when virtual key passed to input target
        */
        if (newKeyCode && !e.VK_bypass) {
            if (!_keyClicker_(newKeyCode, e)) {
                e.preventDefault();
            }
            /*
            *  reset flag
            */
            newKeyCode = null;
        }
        /*
        *  suppress dead keys from the keyboard driver
        */
        if (0==keyCode && !newKeyCode && !e.VK_bypass) {
            e.preventDefault();
        }
        return;
    }
    /*
    *  do uppercase transformation
    */
    if (!e.getRepeat() && (20 == keyCode || 16 == keyCode)) {
        if ((mode & VK_SHIFT || mode & VK_CAPS) && (mode ^ (VK_SHIFT | VK_CAPS))) {
            if (animate) DOM.CSS(nodes.desk).addClass(cssClasses.capslock);
        } else {
            if (animate) DOM.CSS(nodes.desk).removeClass(cssClasses.capslock);
        }
    }
  }
  /**
   *  Handle clicks on the buttons, actually used with mouseup event
   *
   *  @param {Event} mouseup event
   *  @access protected
   */
  var _btnClick_ = function (e) {
    /*
    *  either a pressed key or something new
    */
    var el = DOM.getParent(e.srcElement||e.target,'a');
    /*
    *  skip invalid nodes
    */
    if (!el || el.parentNode.id.indexOf(idPrefix)<0) return;
    el = el.parentNode;

    switch (el.id.substring(idPrefix.length)) {
      case "caps":
      case "shift_left":
      case "shift_right":
      case "alt_left":
      case "alt_right":
      case "ctrl_left":
      case "ctrl_right":
          return;
    }
    if (animate) DOM.CSS(el).removeClass(cssClasses.buttonDown)
    _keyClicker_(el.id);
  }
  /**
   *  Handle mousedown event
   *
   *  Method is used to set 'pressed' button state and toggle shift, if needed
   *  Additionally, it is used by keyboard wrapper to forward keyboard events to the virtual keyboard
   *
   *  @param {Event} mousedown event
   *  @access protected
   */
  var _btnMousedown_ = function (e) {
    /*
    *  either pressed key or something new
    */
    var el = DOM.getParent(e.srcElement||e.target, 'a');
    /*
    *  skip invalid nodes
    */
    if (!el || el.parentNode.id.indexOf(idPrefix)<0) return;
    el = el.parentNode;

    var key = el.id.substring(idPrefix.length);
    switch (key) {
      case "caps":
        var cp = document.getElementById(idPrefix+'caps');
        if (!(mode & VK_CAPS)) {
          mode = mode | VK_CAPS;
          DOM.CSS(cp).addClass(cssClasses.buttonDown)
        } else {
          mode = mode ^ VK_CAPS;
          DOM.CSS(cp).removeClass(cssClasses.buttonDown)
        }
        break;
      case "shift_left":
      case "shift_right":
        /*
        *  Shift is pressed in on both keyboard and virtual keyboard, return
        */
        if (mode&VK_SHIFT && e.shiftKey) break;
        reSetDualKeys('shift', VK_SHIFT);
        self.toggleLayoutMode();
        break;
      case "alt_left":
      case "alt_right":
      case "ctrl_left":
      case "ctrl_right":
        /*
        *  Alt is pressed in on both keyboard and virtual keyboard, return
        */
        if (mode&VK_ALT && e.altKey || mode&VK_CTRL && e.ctrlKey) break;
        reSetDualKeys('alt', VK_ALT);
        reSetDualKeys('ctrl', VK_CTRL);
        self.toggleLayoutMode();
        break;
      /*
      *  any real pressed key
      */
      default:
        if (animate) DOM.CSS(el).addClass(cssClasses.buttonDown)
        break;
    }
    /*
    *  do uppercase transformation
    */
    if ('caps' == key || 'shift_left' == key || 'shift_right' == key) {
        if ((mode & VK_SHIFT || mode & VK_CAPS) && (mode ^ (VK_SHIFT | VK_CAPS))) {
          if (animate) DOM.CSS(nodes.desk).addClass(cssClasses.capslock);
        } else {
          if (animate) DOM.CSS(nodes.desk).removeClass(cssClasses.capslock)
        }
    }
    e.preventDefault();
    e.stopPropagation();
  }
  /**
   *  Handle mouseout and mouseover events
   *
   *  Method is used to remove 'pressed' button state
   *
   *  @param {Event} mouseup event
   *  @access protected
   */
  var _btnMouseInOut_ = function (e) {
    /*
    *  either pressed key or something new
    */
    var el = DOM.getParent(e.srcElement||e.target, 'a')
       ,mtd = {'mouseover': 'addClass', 'mouseout' : 'removeClass'};
    /*
    *  skip invalid nodes
    */
    if (!el || el.parentNode.id.indexOf(idPrefix)<0) return;
    el = el.parentNode;

    /*
    *  hard-to-avoid IE bug cleaner. if 'hover' state is get removed, button looses it's 'down' state
    *  should be applied for every button, needed to save 'pressed' state on mouseover/out
    */
    if (el.id.indexOf('shift')>-1) {
      /*
      *  both shift keys should be blurred
      */
      var s1 = document.getElementById(idPrefix+'shift_left'),
          s2 = document.getElementById(idPrefix+'shift_right');
      s1.className = DOM.CSS(s2)[mtd[e.type]](cssClasses.buttonHover).getClass();
    } else if (el.id.indexOf('alt')>-1 || el.id.indexOf('ctrl')>-1) {
      /*
      *  both alt and ctrl keys should be blurred
      */
      var s1 = document.getElementById(idPrefix+'alt_left')
         ,s2 = document.getElementById(idPrefix+'alt_right')
         ,s3 = document.getElementById(idPrefix+'ctrl_left')
         ,s4 = document.getElementById(idPrefix+'ctrl_right')
      s1.className = s2.className= s3.className= DOM.CSS(s4)[mtd[e.type]](cssClasses.buttonHover).getClass();
    } else {
      if (animate) DOM.CSS(el)[mtd[e.type]](cssClasses.buttonHover);
    }
    e.preventDefault();
    e.stopPropagation();
  }

  /**
   *  Switches keyboard map...
   *
   *  @param {Event} e
   *  @scope private
   */
  function switchMapping (e) {
      keymap = keymaps[e.target.value];
  }
  /**********************************************************
  *  MOST COMMON METHODS
  **********************************************************/
  /**
   *  Used to attach keyboard output to specified input
   *
   *  @param {Null, HTMLInputElement,String} element to attach keyboard to
   *  @return {HTMLInputElement, Null}
   *  @access public
   */
  self.attachInput = function (el) {
    /*
    *  if null is supplied, don't change the target field
    */
    if (null == el && !nodes.attachedInput) return null;
    if (isString(el)) el = document.getElementById(el);

    if (el == nodes.attachedInput) return nodes.attachedInput;

    /*
    *  perform initialization...
    */
    if (!lang)
        self.switchLayout(options.layout) || self.switchLayout(layout[0].toString());
    if (!lang)
        throw new Error ('No layouts available');
    /*
    *  reset input state, defined earlier
    */
    if (nodes.attachedInput) (nodes.attachedInput.contentWindow?nodes.attachedInput.contentWindow.document.body
                                                               :nodes.attachedInput).dir = ''
    /*
    *  force IME hide on field switch
    */
    self.IME.hide();
    /*
    *  only inputable nodes are allowed
    */
    if (nodes.attachedInput) {
        var oe = nodes.attachedInput
        if (oe.contentWindow) {
            oe = oe.contentWindow.document.body.parentNode
        }
        EM.removeEventListener(oe,'keydown',_keydownHandler_);
        EM.removeEventListener(oe,'keypress',_keydownHandler_);
        EM.removeEventListener(oe,'keyup',_keydownHandler_);
        EM.removeEventListener(oe,'mousedown',self.IME.hide);
    }
    if (!el || !el.tagName) {
        nodes.attachedInput = null
        return null;
    }

    nodes.attachedInput = el;

    /*
    *  set keyboard animation for the current field
    */
    if (nodes.attachedInput)
        animate = !DOM.CSS(nodes.attachedInput).hasClass(cssClasses.noanim);
    else
        animate = true;

    /*
    *  for iframe target we track its HTML node
    */
    if (el.contentWindow) {
        el = el.contentWindow.document.body
        /*
         *  toggle RTL/LTR state
         */
        el.dir = lang.rtl?'rtl':'ltr'
        el = el.parentNode;
    } else {
        el.dir = lang.rtl?'rtl':'ltr'
    }
    EM.addEventListener(el,'keydown',_keydownHandler_);
    EM.addEventListener(el,'keyup',_keydownHandler_);
    EM.addEventListener(el,'keypress',_keydownHandler_);
    EM.addEventListener(el,'mousedown',self.IME.hide);

    return nodes.attachedInput;
  }
  /**
   *  Returns the attached input node
   *
   *  @return {HTMLInputElement, Null}
   *  @scope public
   */
  self.getAttachedInput = function (el) {
      return nodes.attachedInput;
  }
  /**
   *  Shows keyboard
   *
   *  @param {HTMLElement, String} input element or it to bind keyboard to
   *  @param {String} holder keyboard holder container, keyboard won't have drag-drop when holder is specified
   *  @param {HTMLElement} kpTarget optional target to bind key* event handlers to,
   *                       is useful for frame and popup keyboard placement
   *  @return {Boolean} operation state
   *  @access public
   */
  self.open =
  self.show = function (input, holder, kpTarget){
    if ( !(input = self.attachInput(nodes.attachedInput || input)) || !nodes.keyboard || !document.body ) return false;

    /*
    *  check pass means that node is not attached to the body
    */
    if (!nodes.keyboard.parentNode || nodes.keyboard.parentNode.nodeType==11) {
        if (isString(holder)) holder = document.getElementById(holder);
        if (!holder.appendChild) return false;
        holder.appendChild(nodes.keyboard);
        /*
        *  we'll bind event handler here
        */
        if (!isUndefined(kpTarget) && input != kpTarget && kpTarget.appendChild) {
            EM.addEventListener(kpTarget,'keydown', _keydownHandler_);
            EM.addEventListener(kpTarget,'keyup', _keydownHandler_);
            EM.addEventListener(kpTarget,'keypress', _keydownHandler_);
        }
    }

    return true;
  }
  /**
   *  Hides the keyboard
   *
   *  @return {Boolean}
   *  @scope public
   */
  self.close =
  self.hide = function () {
    if (!nodes.keyboard || !self.isOpen()) return false;
    /*
    *  force IME hide
    */
    if (self.IME.isOpen()) {
        self.IME.hide();
        return;
    }
    nodes.keyboard.parentNode.removeChild(nodes.keyboard);
    (nodes.attachedInput.contentWindow?nodes.attachedInput.contentWindow.document.body
                                      :nodes.attachedInput).dir = lang.rtl?'rtl':'ltr'
    nodes.attachedInput = null;
    return true;
  }
  /**
   *  Toggles keyboard state
   *
   *  @param {HTMLElement, String} input element or it to bind keyboard to
   *  @param {String} holder keyboard holder container, keyboard won't have drag-drop when holder is specified
   *  @param {HTMLElement} kpTarget optional target to bind key* event handlers to,
   *                       is useful for frame and popup keyboard placement
   *  @return {Boolean} operation state
   *  @access public
   */
  self.toggle = function (input, holder, kpTarget) {
      self.isOpen()?self.close():self.show(input, holder, kpTarget);
  }
  /**
   *  Returns true if keyboard is opened
   *
   *  @return {Boolean}
   *  @scope public
   */
  self.isOpen = function () /* :Boolean */ {
      return nodes.keyboard.parentNode && nodes.keyboard.parentNode.nodeType == 1;
  }
  //---------------------------------------------------------------------------
  // PRIVATE METHODS
  //---------------------------------------------------------------------------
  /**
   *  Builds options for the layout selection box
   *
   *  @scope private
   */
  var __buildOptionsList = function () {
      var s = layout.sort()
         ,l,o,n
         ,cc = {};
      layout.hash = {};
      nodes.langbox.innerHTML = "";
      for (var i=0,sL=s.length;i<sL;i++) {
          l = layout[i];
          if (cc.label!=l.code) {
              cc = document.createElement('optgroup');
              cc.label = l.code;
              nodes.langbox.appendChild(cc);
          }
          n = l.code+" "+l.name;
          o = document.createElement('option');
          o.value = n;
          o.appendChild(document.createTextNode(l.name));
          o.label = l.name;
          cc.appendChild(o);
          /*
          *  record option position
          */
          layout.hash[n] = i;
      }
  }
  /**
   *  Converts string of chars or array of char codes to the array of chars
   *
   *  @param {Array, String} s source to check&parse
   *  @return {Array}
   *  @scope private
   */
  var __doParse = function(s) {
      if (isString(s))
          return s.match(/\x01.+?\x02|./g).map(function(a){return a.replace(/[\x01-\x03]/g,"")});
      else
          return s.map(function(a){return isArray(a)?a.map(String.fromCharCode).join(""):String.fromCharCode(a)});
  }
  /**
   *  Prepares layout for typing
   *
   *  @param {Object} l layout object to process
   *  @scope private
   */
  var __prepareLayout = function(l) {
      /*
      *  convert layout in machine-aware form
      */
      var alpha = l.keys
         ,shift = l.shift || {}
         ,alt = l.alt || {}
         ,dk = l.dk || []
         ,cbk = l.cbk
         ,ca = null
         ,cac = -1
         ,cs = null
         ,csc = -1
         ,lt = []
         ,css = l.domain

      lt.name = l.name;
      lt.code = l.code;

      for (var i=0, aL = alpha.length; i<aL; i++) {
         if (shift.hasOwnProperty(i)) {
           cs = __doParse(shift[i]);
           csc = i;
         }
         if (alt.hasOwnProperty(i)) {
           ca = __doParse(alt[i]);
           cac = i;
         }
         lt[i] = [alpha[i],                                          // normal chars
                  (csc>-1&&cs.hasOwnProperty(i-csc)?cs[i-csc]:null), // shift chars
                  (cac>-1&&ca.hasOwnProperty(i-cac)?ca[i-cac]:null)  // alt chars
                 ];
      }
      /*
      *  add control keys
      */
      for (var i in controlkeys) {
          if (controlkeys.hasOwnProperty(i)) {
              lt.splice(i,0,controlkeys[i]);
          }
      }

      lt.dk = __doParse(dk)

      /*
      *  check for right-to-left languages
      */
      lt.rtl = !!lt.toString().match(/[\u05b0-\u06ff]/)

      /*
      *  this CSS will be set on kbDesk
      */
      lt.css = css
      /*
      *  finalize things by calling loading callback, if exists
      */
      if (isFunction(cbk)) {
          lt.charProcessor = cbk
      } else if (cbk) {
          lt.activate = cbk.activate;
          lt.charProcessor = cbk.charProcessor;
      }
      return lt;
  }
  /**
   *  Sets specified state on dual keys (like Alt, Ctrl)
   *
   *  @param {String} a1 key suffix to be checked
   *  @param {Number} a2 keyboard mode
   *  @scope private
   */
  var reSetDualKeys = function (a1,a2) {
    if (a1 && a2) {
        /*
        *  toggle keys, it's needed, really
        */
        var s1 = document.getElementById(idPrefix+a1+'_left')
           ,s2 = document.getElementById(idPrefix+a1+'_right')
        if (mode&a2) {
            mode = mode ^ a2;
            s1.className = DOM.CSS(s2).removeClass(cssClasses.buttonDown).getClass();
        } else {
            mode = mode | a2;
            s1.className = DOM.CSS(s2).addClass(cssClasses.buttonDown).getClass();
        }
        return true;
    }
    return false;
  }
  /**
   *  Char processor
   *
   *  It does process input letter, possibly modifies it
   *
   *  @param {String} char letter to be processed
   *  @param {String} buf current keyboard buffer
   *  @return {Array} new char, flag keep buffer contents
   *  @scope private
   */
  var __charProcessor = function (tchr, buf) {
    var res = [];
    if (isFunction(lang.charProcessor)) {
      /*
      *  call user-supplied converter
      */
      res = lang.charProcessor(tchr,buf);
    } else if (tchr == "\x08") {
      res = ['',0];
    } else {
      /*
      *  process char in buffer first
      *  buffer size should be exactly 1 char to don't mess with the occasional selection
      */
      var fc = buf.charAt(0);
      if ( buf.length==1 && lang.dk.indexOf(fc)>-1 ) {
        /*
        *  dead key found, no more future processing
        *  if new key is not an another deadkey
        */
        res[1] = tchr != fc & lang.dk.indexOf(tchr)>-1;
        res[0] = deadkeys[fc][tchr]?deadkeys[fc][tchr]:tchr;
      } else {
        /*
        *  in all other cases, process char as usual
        */
        res[1] = lang.dk.indexOf(tchr)>-1 && deadkeys.hasOwnProperty(tchr);
        res[0] = tchr;
      }
    }
    return res;
  }
  /**
   * Keyboard layout builder
   *
   * @param {Array} lang keys to put on the keyboard
   * @return {String} serialized HTML
   * @scope private
   */
  var __getKeyboardHtml = function (lang) {
    var inp = document.createElement('span');
    /*
    *  inp is used to calculate real char width and detect combining symbols
    *  @see __getCharHtmlForKey
    */
    document.body.appendChild(inp);
    inp.style.position = 'absolute';
    inp.style.left = '-1000px';

    for (var i=0, aL=lang.length, btns = [], zcnt = 0, chr; i<aL; i++) {
      chr = lang[i];
      btns.push("<div id=\"",idPrefix,(isArray(chr)?zcnt++:chr)
               ,"\" class=\"",cssClasses.buttonUp
               ,"\"><a href=\"#",i,"\""
               ,">",(isArray(chr)?(__getCharHtmlForKey(lang,chr[0],cssClasses.buttonNormal,inp)
                                  +__getCharHtmlForKey(lang,chr[1],cssClasses.buttonShifted,inp)
                                  +__getCharHtmlForKey(lang,chr[2],cssClasses.buttonAlted,inp))
                                 :"<!-- -->")
               ,"</a></div>");
    }
    document.body.removeChild(inp);
    return btns.join("");
  }
  /**
   *  Char html constructor
   *
   *  @param {Object} lyt layout object
   *  @param {String} chr char code
   *  @param {String} css optional additional class names
   *  @param {HTMLInputElement} i input field to test char length against
   *  @return {String} resulting html
   *  @scope private
   */
  var __getCharHtmlForKey = function (lyt, chr, css, inp) {
      var html = []
         ,dk = isArray(lyt.dk) && lyt.dk.indexOf(chr)>-1
         ,i = 0

      /*
      *  if key matches agains current deadchar list
      */
      if (dk) css = css+" "+cssClasses.deadkey;

      inp.innerHTML = chr;
      /*
      *  this is used to detect true combining chars, like THAI CHARACTER SARA I
      *  NBSPs are appended on the both sides to handle ltr and rtl chars at once
      */
      if (chr && inp.offsetWidth < 4) inp.innerHTML = "\xa0"+chr+"\xa0";

      html[i++] = "<span";
      if (css) {
          html[i++] = " class=\""+css+"\"";
      }
      html[i++] = " title=\""+chr+"\""
      html[i++] = " >"+(chr?inp.innerHTML:"")+"</span>";
    return html.join("");
  }
  /**
   *  Keyboard constructor
   *
   *  @access public
   */
  var __construct = function() {
      /*
      *  process the deadkeys, to make more usable, but non-editable object
      */
      var dk = {};
      for (var i=0, dL=deadkeys.length; i<dL; i++) {
        if (!deadkeys.hasOwnProperty(i)) continue;
        /*
        *  got correct deadkey symbol
        */
        dk[deadkeys[i][0]] = {};
        var chars = deadkeys[i][1].split(" ");
        /*
        *  process char:mod_char pairs
        */
        for (var z=0, cL=chars.length; z<cL; z++) {
          dk[deadkeys[i][0]][chars[z].charAt(0)] = chars[z].charAt(1);
        }
      }
      /*
      *  resulting array:
      *
      *  { '<dead_char>' : { '<key>' : '<modification>', }
      */
      deadkeys = dk;

      var mappings = [];
      for (var i in keymaps) {
          var map = keymaps[i].split("").map(function(c){return c.charCodeAt(0)});
          /*
          *  add control keys
          */
          map.splice(14,0,8);
          map.splice(15,0,9);
          map.splice(28,0,13);
          map.splice(29,0,20);
          map.splice(41,0,16);
          map.splice(52,0,16);
          map.splice(53,0,46);
          map.splice(54,0,17);
          map.splice(55,0,18);
          map.splice(56,0,32);
          map.splice(57,0,18);
          map.splice(58,0,17);
          /*
          *  convert keymap array to the object, to have better typing speed
          */
          var tk = map;
          map = [];
          for (var z=0, kL=tk.length; z<kL; z++) {
              map[tk[z]] = z;
          }
          keymaps[i] = map;
          mappings.push(i);
      }
      keymap = keymaps['QWERTY'];


      /*
      *  create keyboard UI
      */
      nodes.keyboard = document.createElement('div');
      nodes.keyboard.id = 'virtualKeyboard';
      nodes.keyboard.innerHTML = "<div id=\"kbDesk\"><!-- --></div>"
                                +"<select id=\"kb_langselector\"></select>"
                                +"<select id=\"kb_mappingselector\"></select>";

      nodes.desk = nodes.keyboard.firstChild;

      var el = nodes.keyboard.childNodes.item(1);
      EM.addEventListener(el,'change', function(e){self.switchLayout(this.value)});
      nodes.langbox = el;

      var el = el.nextSibling;

      for (var i=0, mL=mappings.length; i<mL; i++) {
          el.options[i] = new Option(mappings[i],mappings[i]);
      }
      EM.addEventListener(el,'change', switchMapping);
      /*
      *  insert some copyright information
      */
      EM.addEventListener(nodes.desk,'mousedown', _btnMousedown_);
      EM.addEventListener(nodes.desk,'mouseup', _btnClick_);
      EM.addEventListener(nodes.desk,'mouseover', _btnMouseInOut_);
      EM.addEventListener(nodes.desk,'mouseout', _btnMouseInOut_);
      EM.addEventListener(nodes.desk,'dragstart', EM.preventDefaultAction);
      EM.addEventListener(nodes.desk,'click', EM.preventDefaultAction);

      /*
      *  check url params for the default layout name
      */
      var opts = getScriptQuery('virtualkeyboard.js');
      if (opts.layout) {
          options.layout = opts.layout;
      }
  }
  /*
  *  call the constructor
  */
  __construct();
}
/**
 *  Container for the custom language IMEs, don't mess with the window object
 *
 *  @type {Object}
 */
VirtualKeyboard.Langs = {};
/**
 *  Simple IME thing, using to show input tips, supplied by the callback
 *
 *  Usage: just call VirtualKeyboard.IME.show(suggestionlist); to show the suggestions
 *
 *  @scope public
 */
VirtualKeyboard.IME = new function () {
    var self = this;
    var html = "<div id=\"VirtualKeyboardIME\"><div class=\"right\"><!--!--></div><div class=\"left\"></div><div class=\"IMEContent\"><br clear=\"both\" /></div></div>";
    var ime = null;
    var chars = "";
    var page = 0;
    var sg = [];
    var target = null;
    var targetWindow = window.dialogArguments||window.opener||window.top;

    /**
     *  Shows the IME tooltip
     *
     *  @param {Array} s optional array of the suggestions
     *  @scope public
     */
    self.show = function (s) {
        /*
        *  external property, set in the #switchLayout
        */
        ime.className = self.css

        target = VirtualKeyboard.getAttachedInput();
        DOM.getParent(target,'body').appendChild(ime);
        if (s) self.setSuggestions(s);
        if (target && ime && sg.length>0) {
            EM.addEventListener(target,'blur', keepSelection);
            ime.style.display = "block";
            self.updatePosition(target);
        } else {
            self.hide();
        }
    }
    /**
     *  Hides IME
     *
     *  @param {Boolean} keep keeps selection
     *  @scope public
     */
    self.hide = function (keep) {
        if (ime) ime.style.display = "none";
        EM.removeEventListener(target,'blur', keepSelection);
        if (target && DocumentSelection.getSelection(target) && !keep) DocumentSelection.deleteSelection(target);
        target = null;
        sg=[];
    }
    /**
     *  Updates position of the IME tooltip
     *
     *  @scope public
     */
    self.updatePosition = function () {
        ime.style.width = '50px';
        var dt = ime.offsetWidth - ime.childNodes[2].clientWidth;
        ime.style.width = ime.childNodes[2].scrollWidth+dt+'px';
        var xy = DOM.getOffset(target);
        ime.style.left = xy.x+'px';
        var co = DocumentSelection.getSelectionOffset(target);
        ime.style.top = xy.y+co.y+co.h+'px';
    }
    /**
     *  Imports suggestions and applies them
     *
     *  @scope public
     */
    self.setSuggestions = function (arr) {
        if (!isArray(arr)) return false;
        sg = arr;
        page = 0;
        showPage();
        self.updatePosition(target);
    }
    /**
     *  Returns suggestion list
     *
     *  @param {Number} idx optional index in the suggestions array
     *  @return {String, Array} all suggestions, or one by its index
     *  @scope public
     */
    self.getSuggestions = function (idx) {
        return isNumber(idx)?sg[idx]:sg;
    }
    /**
     *  Shows the next page of suggestions
     *
     *  @scope public
     */
    self.nextPage = function () {
         page = Math.max(Math.min(page+1,(Math.ceil(sg.length/10))-1),0);
         showPage();
         return false;
    }
    /**
     *  Shows the previous page of suggestions
     *
     *  @scope public
     */
    self.prevPage = function () {
         page = Math.max(page-1,0);
         showPage();
         return false;
    }
    /**
     *  Returns the current page number
     *
     *  @return {Number} page number
     *  @scope public
     */
    self.getPage = function () {
         return page;
    }
    /**
     *  Returns char by its number in the suggestions array
     *
     *  @param {Number} n char number in the current page
     *  @return {String} char
     *  @scope public
     */
    self.getChar = function (n) {
         n = --n<0?9:n;
         return sg[self.getPage()*10+n]
    }
    self.isOpen = function () {
         return 'block' == ime.style.display;
    }
    /**
     *  Shows currently selected page in the IME tooltip
     *
     *  @scope private
     */
    var showPage = function () {
        for (var i=0,p=page*10,s=[]; i<10 && !isUndefined(sg[p+i]); i++) {
            s[s.length] = "<b>"+((i+1)%10)+"</b>"+": "+sg[p+i];
        }
        ime.childNodes[2].innerHTML = s.join("; ")+"<br clear=\"both\" />";
    }
    var keepSelection = function() {
        DocumentSelection.setRange(target,DocumentSelection.getStart(this),DocumentSelection.getEnd(this));
        this.focus();
    }
    /**
     *  Just the constructor
     */
    var _construct = function () {
        var el = targetWindow.document.createElement('div');
        el.innerHTML = html;
        ime = el.firstChild;
        ime.style.display = 'none';
        ime.childNodes[0].appendChild(targetWindow.document.createComment(""));
        ime.childNodes[1].appendChild(targetWindow.document.createComment(""));
        ime.childNodes[0].onmousedown = self.nextPage;
        ime.childNodes[1].onmousedown = self.prevPage;
    }
    _construct();
}