/* How to make dynamic Keyboard with JavaScript */

let keyboard_data = {
  1: [" qwertyuiop ", "_ asdfghjkl ", "upper,__ zxcvbnm __,backspace", "-1123,emoji,+3space,+2return  "],
  2: [" 1234567890 ", " -/:;()$&@\" ", "-1#+=,__,dot,comma,quotation,exclamation,apostrophe,__,backspace  ", "-1ABC,emoji,+3space,+2return  "]
};

/* Call keyboard_set(type) */
function keyboard_set (type) {
  keyboardType = type;
  let keys = keyboard_data[type];
  for (let i = 1; i <= 4; i++) {
    let kk = keys[i - 1].split(' ');
    let row = $('#keyboard_row_' + i.toString());
    row.html('');

    if (kk[0] != "") {
      let special_keys = kk[0].split(',');
      for (let sc = 0; sc < special_keys.length; sc++) {
        if (special_keys[sc][0] == '_') {
          let cls = 'key' + special_keys[sc].split('_').join('_half');
          row.append('<div class="' + cls + '"></div>');
        } else if(signal_keys[special_keys[sc]]) {
          let back_name = special_keys[sc];
          let key_name = signal_keys[special_keys[sc]];
          row.append('<div class="key signal_key key_'
          + back_name
          + '">' + key_name + '</div>');
        } else if (special_keys[sc][0] == '+') {
          let back_name = special_keys[sc].substring(2);
          row.append('<div class="key special_key key_type'
          + special_keys[sc][1] + ' ' + back_name
          + '" style="background-image: url(\'./images/key_' + back_name + '_back.png\')">' + back_name + '</div>');
        } else if (special_keys[sc][0] == '-') {
          let back_name = special_keys[sc].substring(2);
          row.append('<div class="key special_key key_type'
          + special_keys[sc][1] + ' ' + back_name
          + '">' + back_name + '</div>');
        } else {
          row.append('<div class="key special_key" style="background-image: url(\'./images/key_special_' + special_keys[sc] + '.png\')"></div>');
        }
      }
    }

    for (let c = 0; c < kk[1].length; c++) {
      row.append('<div class="key key_' + kk[1][c] + '"><c>' + kk[1][c] + '</c></div>')
    }

    if (kk[2] != "") {
      let special_keys = kk[2].split(',');
      for (let sc = 0; sc < special_keys.length; sc++) {
        if (special_keys[sc][0] == '_') {
          let cls = 'key' + special_keys[sc].split('_').join('_half');
          row.append('<div class="' + cls + '"></div>');
        } else if (special_keys[sc][0] == '+') {
          let back_name = special_keys[sc].substring(2);
          row.append('<div class="key special_key key_type'
          + special_keys[sc][1] + ' ' + back_name
          + '" style="background-image: url(\'./images/key_' + back_name + '_back.png\')">' + back_name + '</div>');
        } else {
          row.append('<div class="key special_key" style="background-image: url(\'./images/key_special_' + special_keys[sc] + '.png\')"></div>');
        }
      }
    }
  }
}