var style_cookie = "weabot_style_ib";
if (localStorage.hasOwnProperty(style_cookie)) {
  setTheme(localStorage.getItem(style_cookie));
}

function setTheme(styletitle) {
  var css = document.getElementById("css");
  if (css) {
    css.href = "/static/css/" + styletitle.toLowerCase() + ".css";
    localStorage.setItem(style_cookie, styletitle);
  }
}

/* IE/Opera fix, because they need to go learn a book on how to use indexOf with arrays */
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(elt /*, from*/) {
    var len = this.length;
    var from = Number(arguments[1]) || 0;
    from = from < 0 ? Math.ceil(from) : Math.floor(from);
    if (from < 0) from += len;
    for (; from < len; from++) {
      if (from in this && this[from] === elt) return from;
    }
    return -1;
  };
}

function postClick(num) {
  var sel = window.getSelection().toString();
  if (sel) sel = sel.replace(/^/gm, ">") + "\n";
  insert(">>" + num + "\n" + sel);
}

function insert(text) {
  var textarea = document.forms.postform.message;
  if (textarea) {
    if (textarea.createTextRange && textarea.caretPos) {
      // IE
      var caretPos = textarea.caretPos;
      caretPos.text =
        caretPos.text.charAt(caretPos.text.length - 1) == " " ? text + " " : text;
    } else if (textarea.setSelectionRange) {
      // Firefox
      var start = textarea.selectionStart;
      var end = textarea.selectionEnd;
      textarea.value =
        textarea.value.substr(0, start) + text + textarea.value.substr(end);
      textarea.setSelectionRange(start + text.length, start + text.length);
    } else {
      textarea.value += text + " ";
    }
    textarea.focus();
  }
  return false;
}

function checkhighlight() {
  var match;
  if ((match = /#i([0-9]+)/.exec(document.location.toString()))) {
    if (!document.forms.postform.message.value)
      insert(">>" + match[1] + "\r\n");
  } else if ((match = /#([0-9]+)/.exec(document.location.toString()))) {
    highlight(match[1]);
  }
}

function highlight(post) {
  var hl = document.getElementsByClassName("reply highlight");
  if (hl.length) { hl[0].className = "reply"; }
  var reply = document.getElementById("p" + post);
  if (reply) {
    reply.className = "reply highlight";
    var match = /^([^#]*)/.exec(document.location.toString());
    document.location = match[1] + "#" + post;
  }
}

function expandimg(e) {
  var post_id = e.dataset.id;
  var img_url = e.href;
  var thumb_url = e.dataset.thumb;
  var img_w = parseInt(e.dataset.w);
  var img_h = parseInt(e.dataset.h);
  var thumb_w = parseInt(e.dataset.tw);
  if (thumb_w < 1) return true;
  var thumb_h = parseInt(e.dataset.th);
  var format = img_url.substring(img_url.lastIndexOf(".") + 1, img_url.length);
  var exp_vid = 0;

  if (window.innerWidth > 900)
  var ratio = Math.min((window.innerWidth - 130) / img_w, 1);
  else var ratio = Math.min((window.innerWidth - 40) / img_w, 1);

  var img_cont = document.getElementById("thumb" + post_id);
  var post_block = img_cont.parentElement.parentElement.getElementsByTagName(
    "blockquote"
  )[0];
  var img;

  for (var i = 0; i < img_cont.childNodes.length; i++)
    if (img_cont.childNodes[i].nodeName.toLowerCase() == "img") {
      img = img_cont.childNodes[i];
    } else if (img_cont.childNodes[i].nodeName.toLowerCase() == "video") {
      img = img_cont.childNodes[i];
      exp_vid = 1;
    }

  if (img) {
    if (format == "webm" || format == "mp4" && exp_vid == 0)
      var new_img = document.createElement("video");
    else var new_img = document.createElement("img");
    
    new_img.setAttribute("class", "thumb");
    new_img.setAttribute("alt", "" + post_id);

    if (img.getAttribute("width") == "" + thumb_w &&
    img.getAttribute("height") == "" + thumb_h) {
      // thumbnail -> fullsize
      if (format == "webm" || format == "mp4") {
        new_img.setAttribute("controls", "");
        new_img.setAttribute("loop", "");
        new_img.setAttribute("autoplay", "");
      }
      new_img.setAttribute("src", "" + img_url);
      new_img.setAttribute("width", img_w);
      new_img.setAttribute("height", img_h);
      new_img.setAttribute("style", "max-width:" +
        Math.floor(img_w * ratio) + "px;max-height:" +
        Math.floor(img_h * ratio) + "px;");
      post_block.setAttribute("style", "");
      img_cont.style.display = "table";
    } else {
      // fullsize -> thumbnail
      if (format == "webm" || format == "mp4") {
        new_img.removeAttribute("controls");
        new_img.removeAttribute("loop");
        new_img.removeAttribute("autoplay");
      }
      new_img.setAttribute("src", "" + thumb_url);
      new_img.setAttribute("width", thumb_w);
      new_img.setAttribute("height", thumb_h);
      post_block.setAttribute("style", "margin-left:" +
        (parseInt(thumb_w) + 40) + "px;max-width:" +
        (1000 - parseInt(thumb_w)) + "px");
      img_cont.removeAttribute("style");
    }

    while (img_cont.lastChild) img_cont.removeChild(img_cont.lastChild);

    img_cont.appendChild(new_img);
  }
}

function filePreview(e) {
  var file = postform.file.files[0];
  var inpt = document.getElementById("file");
  var prev = document.getElementById("filepreview");
  var noimg = document.getElementById("noimage");
  if (noimg) noimg = document.getElementById("noimage").parentNode;
  var read = new FileReader();
  read.readAsDataURL(file);
  read.onload = function() {
    inpt.style.display = "none";
    if (noimg) noimg.style.display = "none";
    prev.removeAttribute("style");
    var fname =
      file.name.length < 20 ? file.name : file.name.substr(0, 19) + "…";
    if (file.type.startsWith("image"))
      prev.insertAdjacentHTML("beforeend",
        '<img class="thumbpreview" src="' + read.result + '" /> ' + fname);
    else prev.insertAdjacentHTML("beforeend", fname);
    prev.appendChild(document.createTextNode(" ["));
    var btn = document.createElement("a");
    btn.href = "#";
    btn.innerText = "Quitar";
    btn.addEventListener("click", function(e) {
      e.preventDefault();
      prev.innerHTML = "";
      prev.style.display = "none";
      inpt.removeAttribute("style");
      if (noimg) noimg.removeAttribute("style");
      inpt.value = "";
    });
    prev.appendChild(btn);
    prev.appendChild(document.createTextNode("] "));
  };
}

function saveInputs(e) {
  var e = e || window.event;
  var form = e.target || e.srcElement;
  if (typeof form.fielda !== "undefined") weabot.name = form.fielda.value;
  if (typeof form.fielda !== "undefined") weabot.email = form.fieldb.value;
  localStorage.setItem("weabot", JSON.stringify(weabot));
}

function setInputs(id) {
  if (document.getElementById(id)) {
    with (document.getElementById(id)) {
      if (typeof fielda !== "undefined" && !fielda.value && weabot.name)
        fielda.value = weabot.name;
      if (typeof fielda !== "undefined" && !fieldb.value && weabot.email)
        fieldb.value = weabot.email;
      if (!password.value)
        password.value = getPassword();
      addEventListener("submit", saveInputs);
    }
  }
}

function getPassword() {
  if (weabot.password) return weabot.password;
  
  var pass = "";
  var char = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?!-_.";
  for (var i=0; i<10; i++) {
    pass += char[Math.floor(Math.random() * char.length)];
  }
  weabot.password = pass;
  localStorage.setItem("weabot", JSON.stringify(weabot));
  return pass;
}

function catSearch() {
  var filter = this.value.toLowerCase();
  var nodes = document.getElementsByTagName("p");
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].innerText.toLowerCase().includes(filter))
      nodes[i].parentNode.removeAttribute("style");
    else nodes[i].parentNode.style.display = "none";
  }
}

function togglePost(e) {
  if (e.tagName == "DIV") {
    var post = e.parentElement;
  } else {
    var post = e.parentElement.parentElement;
  }
  
  var pid = post.id.slice(1);
  var typ = post.id.charAt(0);
  var itm = "hid-" + typ + "-" + document.body.dataset.brd;
  
  var hidp = localStorage.getItem(itm);
  var hid = Array();
  if (hidp) hid = hidp.split("!");
  
  if (post.classList.contains("hidden")) {
    if (hid.includes(pid)) hid.splice(hid.indexOf(pid), 1);
  } else {
    if (!hid.includes(pid)) hid.push(pid);
  }
  post.classList.toggle("hidden");

  localStorage.setItem(itm, hid.join("!"));
}

document.addEventListener("DOMContentLoaded", function(e) {
  var board = document.body.dataset.brd;
  checkhighlight();
  
  if (localStorage.hasOwnProperty("weabot")) {
    weabot = JSON.parse(localStorage.getItem("weabot"));
  } else {
    weabot = { name: null, email: null, password: null };
  }
  
  var head = document.getElementById("main_nav");
  var a = head.getElementsByTagName("a");
  for (var i = 0; i < a.length; i++) {
    if (a[i].getAttribute("href") == "/" + board + "/") {
      a[i].className = "cur_brd";
      break;
    }
  }

  if (document.body.clientWidth < 600) {
    var navlink = head.getElementsByTagName("a");

    var sel = document.createElement("select");
    sel.id = head.id + "_sel";
    sel.addEventListener("change", function(e){
      window.location.href = this.value;
    });

    for (var i=1; i<navlink.length; i++) {
      var c = document.createElement("option");
      c.text = navlink[i].textContent;
      c.value = navlink[i].href;
      if (navlink[i].className == "cur_brd") {
        c.selected = true;
      }
      sel.options.add(c);
    }

    head.textContent = ""
    var home = document.createElement("a");
    home.text = "Bienvenido a Internet";
    home.href = "/home.html";
    head.appendChild(home);
    head.appendChild(document.createTextNode(" ★ "));
    head.appendChild(sel);

    head.className = "mob";
    document.body.style.marginTop = "1em";
  }

  for (var i=0; i<2; i++) {
    var type = "pt".charAt(i);
    var hidp = localStorage.getItem("hid-" + type + "-" + board);
    if (hidp) {
      var hid = hidp.split("!");
      for (var j = 0; j < hid.length; j++) {
        var post = document.getElementById(type+hid[j]);
        if (post) post.classList.add("hidden");
      }
    }
  }

  var styleSelect = document.getElementById("styles");
  if (styleSelect) {
    styleSelect.addEventListener("change", function(e) { setTheme(this.value); });
    styleSelect.value = localStorage.getItem(style_cookie);
  }
  
  if (document.getElementById("postform")) {
    setInputs("postform");
    postform.file.addEventListener("change", filePreview);
  }

  var del = document.getElementById("delform");
  if (del) del.password.value = weabot.password;

  var cat = document.getElementById("catalog");
  if (cat) {
    if (j>0) {
      document.getElementById("hid-label").removeAttribute("style");
      document.getElementById("hid-num").innerText = j;
    }
    
    document.getElementById("cat-size").addEventListener("click", function(e) {
      e.preventDefault();
      var thumb = cat.getElementsByTagName("img");
      if (cat.classList.contains("enlarged")) {
        for (var i = 0; i < thumb.length; i++) {
          thumb[i].src = thumb[i].src.replace("/thumb/", "/cat/");
        }
      } else {
        for (var i = 0; i < thumb.length; i++) {
          thumb[i].src = thumb[i].src.replace("/cat/", "/thumb/");
        }
      }
      cat.classList.toggle("enlarged");
      this.innerText = (this.innerText == "Pequeño") ? "Grande" : "Pequeño";
    });
    
    document.getElementById("cat-hide").addEventListener("click", function(e) {
      e.preventDefault();
      cat.classList.toggle("notxt");
      this.innerText = (this.innerText == "Ocultar") ? "Mostrar" : "Ocultar";
    });

    document.getElementById("cat-srch").addEventListener("keyup", catSearch);
    
    document.getElementById("hid-num").addEventListener("click", function(e) {
      e.preventDefault();
      cat.classList.toggle("showhid");
    });
  } else {  
    window.addEventListener("hashchange", checkhighlight);
  }
});

document.addEventListener("click", function(e) {
  var cn = e.target.className;
  if (cn == "num") {
    e.preventDefault();
    postClick(e.target.textContent);
    return;
  }
  if (cn == "expimg") {
    e.preventDefault();
    expandimg(e.target);
    return;
  }
  if (cn == "tt") {
    e.preventDefault();
    togglePost(e.target);
    return;
  }
}, false);

document.addEventListener("dblclick", function(e) {
  if (e.target.closest(".info")) {
    e.preventDefault();
    togglePost(e.target.closest(".info"));
    return;
  }
}, false);