$(function () {
  // Positions are 1-indexed to match how the original tool (and the
  // in-game name entry screen) describes trainer-name character slots.
  // Position 1 is never read by the glitch; it's rendered but inert.
  var SPECIES_POSITIONS = [3, 5, 7];
  var LEVEL_POSITIONS = [2, 4, 6];
  var ROLE_LABEL = {
    1: "unused",
    2: "level 1",
    3: "species 1",
    4: "level 2",
    5: "species 2",
    6: "level 3",
    7: "species 3"
  };
  // Symbols not present on a standard keyboard; everything else usable
  // in a name (letters, digits, ( ) : ; [ ] ! - ? . / ,) can just be typed.
  var SYMBOL_BUTTONS = ["PK", "MN", "×", "♂", "♀"];
  var FALLBACK_SPECIES = "MissingNo.";
  var FALLBACK_LEVEL = 127;

  var charmap = {};
  var $nameRow = $("#name-row");
  var $results = $("#results");

  for (var i = 1; i <= 7; i++) {
    var $slot = $('<div class="slot"></div>');
    $slot.append('<div class="index">char ' + i + '</div>');
    $slot.append('<div class="role">' + ROLE_LABEL[i] + '</div>');

    var $input = $('<input type="text" maxlength="2" autocomplete="off" spellcheck="false">')
      .attr("id", "char" + i)
      .data("pos", i);
    $slot.append($input);

    if (i > 1) {
      var $symbols = $('<div class="symbols"></div>');
      SYMBOL_BUTTONS.forEach(function (sym) {
        var $btn = $('<button type="button"></button>').text(sym);
        $btn.on("click", function () {
          $input.val($(this).text());
          decode();
          focusNext(i);
        });
        $symbols.append($btn);
      });
      $slot.append($symbols);
    }

    $nameRow.append($slot);
  }

  $nameRow.on("input", "input", function () {
    var pos = $(this).data("pos");
    if (this.value.length >= 1) {
      focusNext(pos);
    }
    decode();
  });

  function focusNext(pos) {
    if (pos < 7) {
      $("#char" + (pos + 1)).trigger("focus");
    }
  }

  function lookup(token) {
    if (!token) return null;
    return charmap[token] || null;
  }

  function decode() {
    var chars = [];
    for (var i = 1; i <= 7; i++) {
      chars[i] = $("#char" + i).val();
    }

    $results.empty();
    for (var pair = 0; pair < 3; pair++) {
      var speciesPos = SPECIES_POSITIONS[pair];
      var levelPos = LEVEL_POSITIONS[pair];

      var speciesEntry = lookup(chars[speciesPos]);
      var levelEntry = lookup(chars[levelPos]);

      var species = speciesEntry ? speciesEntry.pokemon : FALLBACK_SPECIES;
      var level = levelEntry ? levelEntry.decimal : FALLBACK_LEVEL;

      var $card = $('<div class="encounter"></div>');
      $card.append('<div class="from">from char ' + speciesPos + ' &amp; char ' + levelPos + '</div>');
      $card.append('<div class="species">' + escapeHtml(species) + '</div>');
      $card.append('<div class="level">Level ' + level + '</div>');
      $results.append($card);
    }
  }

  function escapeHtml(str) {
    return $("<div>").text(str).html();
  }

  $.getJSON("data/charmap.json")
    .done(function (data) {
      charmap = data;
      decode();
    })
    .fail(function () {
      $("#load-error").show();
    });
});