var taggr = {
  // (A) ATTACH TAGGING
  len : 0, // track number of characters for "backspace remove tag"
  attach : instance => {
    // (A1) TAGS WRAPPER
    instance.target.classList.add("tagwrap");

    // (A2) ATTACH INPUT FIELD
    instance.tagin = document.createElement("input");
    instance.tagin.type = "text";
    instance.tagin.className = "tagin";
    if (instance.maxLength !== undefined) { instance.tagin.maxLength = instance.maxLength; }
    instance.target.appendChild(instance.tagin);

    // (A3) KEY LISTEN
    instance.tagin.onkeydown = evt => taggr.len = instance.tagin.value.length;
    instance.tagin.onkeyup = evt => {
      // (A3-1) COMMA OR ENTER TO ADD TAG
      if (evt.code=="Comma" || evt.code=="Enter") {
        if (instance.tagin.value=="," || instance.tagin.value=="") {
          instance.tagin.value = "";
        } else {
          taggr.add(instance, instance.tagin.value.replace(/,/g, ""));
        }
      }
      
      // (A3-2) BACKSPACE TO REMOVE LAST TAG (IF CURRENT VALUE IS EMPTY)
      if (evt.code=="Backspace" && taggr.len == 0) {
        let last = instance.target.querySelectorAll(".tag");
        if (last.length>0) { last[last.length - 1].remove(); }
      }
    };

    // (A4) ATTACH DEFAULT TAGS
    if (instance.tags !== undefined) {
      instance.tags.forEach((name, i) => taggr.add(instance, name));
    }

    // (A5) GET TAGS
    instance.target.getTags = () => {
      let tags = [];
      Array.from(instance.target.querySelectorAll(".tag"))
      .forEach(tag => tags.push(tag.innerHTML));
      return tags;
    };
  },

  // (B) ADD A NEW TAG
  add : (instance, name) => {
    // (B1) CHECK MAX TAGS
    if (instance.maxTags !== undefined) {
      let count = instance.target.querySelectorAll(".tag").length;
      if (count >= instance.maxTags) {
        alert(`Maximum ${instance.maxTags} tags allowed.`);
        return;
      }
    }

    // (B2) CREATE & APPEND NEW TAG
    let tag = document.createElement("div");
    tag.className = "tag";
    tag.innerHTML = name;
    tag.onclick = () => tag.remove();
    instance.target.insertBefore(tag, instance.tagin);

    // (B3) EMPTY TAG INPUT
    instance.tagin.value = "";
  }
};

// (C) ATTACH TAG
window.onload = () => {
  taggr.attach({
    target : document.getElementById("demo"), // required, target <div>
    tags : ["Doge", "Cate"], // optional, default tags
    maxLength : 12, // optional, max tag characters
    maxTags : 3 // optional, max number of tags
  });
};