var lastTime = 0;
var refreshInterval;
var refreshMaxTime = 30;
var refreshTime;
var manual = 0;
var serviceType = 0; // 2 = BBS, 3 = IB
var thread_length = 0;
var thread_lastreply = 0;
var thread_title = "";
var thread_first_length = 0;
var http_request = new XMLHttpRequest();

function checkNew(e) {
  e.preventDefault();
  manual = 1;
  loadJSON();
  if (chk.checked) refreshMaxTime = 25;
}

function loadJSON() {
  if (chk.checked)
    stopCounter("...");
  if (manual)
    document.getElementById("counter").innerText = "...";
  var data_file;
  if (serviceType == 2 || serviceType == 3) {
    board = document.getElementsByName("board")[0].value;
    parent = document.getElementsByName("parent")[0].value;
    data_file = "/cgi/api/thread?dir=" + board + "&id=" + parent + "&offset=" + thread_length + "&time=" + lastTime;
  } else {
    return false;
  }
  http_request.open("GET", data_file, true);
  http_request.send();
}

function updateThread(posts, total_replies, serverTime) {
  thread_div = document.getElementsByClassName("thread")[0];


  for (var i = 0; i < posts.length; i++) {
    post = posts[i];
    var num = thread_length + i + 1;
    var div = document.createElement('div');
    if (serviceType == 2) div.className = "reply";
    else div.className = "replycont";
    if (post.email) {
      if (post.tripcode) s_name = '<a href="mailto:' + post.email + '"><span class="name"><b>' + post.name + '</b> ' + post.tripcode + '</span></a>';
      else s_name = '<a href="mailto:' + post.email + '"><span class="name"><b>' + post.name + '</b></span></a>';
    } else {
      if (post.tripcode) s_name = '<span class="name"><b>' + post.name + '</b> ' + post.tripcode + '</span>';
      else s_name = '<span class="name"><b>' + post.name + '</b></span>';
    }
    if (serviceType == 2) {
      if (post.file) {
        s_img = '<a href="/' + board + '/src/' + post.file + '" target="_blank" class="thumb"><img src="/' + board + '/thumb/' + post.thumb + '" width="' + post.thumb_width + '" height="' + post.thumb_height + '" /><br />' + Math.round(post.file_size/1024) + 'KB ' + post.file.substring(post.file.lastIndexOf(".")+1, post.file.length).toUpperCase() + '</a>';
      } else s_img = '';
      if (post.IS_DELETED == 1) div.innerHTML = '<h4 class="deleted">' + num + ' : Mensaje eliminado por el usuario.</h4>';
      else if (post.IS_DELETED == 2) div.innerHTML = '<h4 class="deleted">' + num + ' : Mensaje eliminado por miembro del staff.</h4>';
           else
             div.innerHTML = '<h4>' + num + ' : ' + s_name + ' : <span class="date" data-unix="' + post.timestamp + '">' + post.timestamp_formatted + '</span> <span class="del"><a href="/cgi/report/' + board + '/' + post.id + '/' + num + '">rep</a> <a href="#">del</a></span></h4>' + s_img + '<div class="msg">' + post.message + '</div>';
    } else {
      if (post.file) {
        if (post.image_width != 0) {
          s_img = '<div class="fs"><a href="/' + board + '/src/' + post.file + '" class="expimg" data-id="' + post.id + '" data-thumb="/' + board + '/thumb/' + post.thumb + '" data-w="' + post.image_width + '" data-h="' + post.image_height + '" data-tw="' + post.thumb_width + '" data-th="' + post.thumb_height + '">' + post.file + '</a>-(' + post.file_size+ ' B, ' + post.image_width + 'x' + post.image_height + ')</div>';
        } else {
          s_img = '<div class="fs"><a href="/' + board + '/src/' + post.file + '" target="_blank">' + post.file + '</a>-(' + post.file_size+ ' B)</div>';
        }
        s_img += '<a target="_blank" href="/' + board + '/src/' + post.file + '" id="thumb' + post.id + '"><img class="thumb" alt="' + post.id + '" src="/' + board + '/thumb/' + post.thumb + '" width="' + post.thumb_width + '" height="' + post.thumb_height + '" /></a>';
        s_msg = '<blockquote style="margin-left:' + (post.thumb_width+40) + 'px;">' + post.message + '</blockquote>';
      } else {
        s_img = '';
        s_msg = '<blockquote>' + post.message + '</blockquote>';
      }
      if (post.IS_DELETED == 0) {
        div.innerHTML = '<table border="0"><tr><td class="ell">…</td><td class="reply" id="reply' + post.id + '"><div class="info"><input type="checkbox" name="delete" value="' + post.id + '" />' + (post.subject ? (' <span class="subj">' + post.subject + '</span>') : '') + ' ' + s_name + ' ' + '<span class="date" data-unix="' + post.timestamp + '">' + post.timestamp_formatted + '</span> <span class="reflink"><a href="#' + post.id + '">No.</a><a href="#" class="postid">' + post.id + '</a></span> <a class="rep" href="/cgi/report/' + board + '/' + post.id + '">rep</a></div>' + s_img + s_msg + '</td></tr></table>';
      }
    }

    if (serviceType == 2) thread_div.appendChild(div);
    else thread_div.insertBefore(div, document.getElementsByClassName("cut")[0]);
    thread_div.setAttribute("data-length",num);
    if (serviceType == 2) {
      var res=document.getElementsByTagName("h3")[0].getElementsByTagName("span")[0];
      res.innerText = res.innerText.replace(/[0-9]+/, num);
    }
  }

  if (posts.length > 0) {
    if (!manual)
      refreshMaxTime = 10;
    if (!document.hasFocus())
      if (posts.length > 1) notif(thread_title, posts.length + ' nuevos mensajes');
      else notif(thread_title, 'Un nuevo mensaje');
  } else {
    if (refreshMaxTime <= 60)
      refreshMaxTime += 5;
  }

  thread_length = parseInt(total_replies) + 1;
  //document.getElementsByClassName("thread")[0].firstChild.children[0].innerHTML = "("+thread_length+")";
  new_unread = thread_length - thread_first_length;

  if (new_unread)
    document.title = "(" + new_unread + ") " + thread_title;
  else
    document.title = thread_title;
}

function notif(title, msg) {
  var n = new Notification(title, {
    body: msg
  });
  setTimeout(n.close.bind(n), 10000);
}

function counter() {
  if (refreshTime < 1) {
    loadJSON();
  } else {
    refreshTime--;
    document.getElementById("counter").innerHTML = (refreshTime + 1);
  }
}

function detectService() {
  if (document.body.className === "threadpage") {
    if (!document.getElementById("n")) return;
    thread_title = document.title;
    thread_length = parseInt(document.getElementsByClassName("thread")[0].dataset.length);
    thread_first_length = thread_length;
    replylist = document.getElementsByClassName("reply");
    lastr = replylist[replylist.length - 1].textContent;
    thread_lastreply = parseInt(lastr.substr(0, lastr.indexOf(" :")));
    if (thread_length == thread_lastreply) {
      serviceType = 2;
      document.getElementById("n").addEventListener("click", checkNew);
      var footer = document.getElementsByClassName("lastposts")[0];
      var in1 = document.createElement("input");
      in1.id = "autorefresh";
      in1.setAttribute("type", "checkbox");
      in1.addEventListener("click", autoRefresh);
      in1.style.display = "none";
      var in2 = document.createElement("label");
      in2.id = "n2";
      in2.setAttribute("for", "autorefresh");
      in2.style.marginRight = "4px";
      in2.style.cursor = "pointer";
      in2.textContent = "Auto refresh";
      var in3 = document.createElement("span");
      in3.id = "counter";
      in3.style.position = "absolute";
      in3.textContent = "OFF";
      footer.appendChild(document.createTextNode(" | "));
      footer.appendChild(in1);
      footer.appendChild(in2);
      footer.appendChild(in3);
      return true;
    } else {
      return false;
    }
  } else if (document.body.className === "res") {
    serviceType = 3;
    thread_title = document.title;
    thread_length = parseInt(document.getElementsByClassName("thread")[0].dataset.length);
    thread_first_length = thread_length;
    replylist = document.getElementsByClassName("thread");
    replylist += document.getElementsByClassName("reply");
    var footer = document.getElementsByClassName("nav")[0];
    var mnl = document.createElement("a");
    mnl.id = "shownew";
    mnl.href = "#";
    mnl.textContent = "Ver nuevos posts";
    var in1 = document.createElement("input");
    in1.id = "autorefresh";
    in1.setAttribute("type", "checkbox");
    in1.addEventListener("click", autoRefresh);
    in1.style.display = "none";
    var in2 = document.createElement("label");
    in2.setAttribute("for", "autorefresh");
    in2.style.cursor = "pointer";
    in2.title = "Ver nuevos posts automáticamente";
    in2.textContent = "Auto";
    var in4 = document.createElement("span");
    in4.id = "counter";
    in4.textContent = "OFF";
    footer.appendChild(document.createTextNode(" ["));
    footer.appendChild(mnl);
    document.getElementById("shownew").addEventListener("click", checkNew);
    footer.appendChild(document.createTextNode("] ["));
    footer.appendChild(in1);
    footer.appendChild(in2);
    footer.appendChild(document.createTextNode("] "));
    footer.appendChild(in4);
    return true;
  } else {
    return false;
  }
}

function startCounter() {
  refreshTime = refreshMaxTime;
  counter();
  refreshInterval = setInterval(counter, 1000);
}

function stopCounter(str) {
  clearInterval(refreshInterval);
  document.getElementById("counter").innerHTML = str;
}

function autoRefresh(e) {
  chk_snd = document.getElementById("autosound");
  if (document.getElementById("autorefresh").checked) {
    if (chk_snd)
      chk_snd.disabled = false;
    Notification.requestPermission();
    lastTime = Math.floor(Date.now() / 1000);
    refreshTime = refreshMaxTime;
    startCounter();
  } else {
    if (chk_snd)
      document.getElementById("autosound").disabled = true;
    stopCounter("OFF");
  }
}

http_request.onreadystatechange = function() {
  if (http_request.readyState == 4) {
    var jsonObj = JSON.parse(http_request.responseText);
    if (jsonObj.state == "success") {
      if (serviceType == 2 || serviceType == 3)
        updateThread(jsonObj.posts, jsonObj.total_replies, jsonObj.time);
      lastTime = jsonObj.time;
      if (chk.checked)
        startCounter();
    }
    if (!chk.checked) {
      document.getElementById("counter").innerText = "OFF";
    }
    manual = 0;
  }
}
document.addEventListener("DOMContentLoaded", function() {
  if (!detectService()) return;

  chk = document.getElementById("autorefresh");
  chk_snd = document.getElementById("autosound");

  if (localStorage.getItem("autorefresh")) {
    document.getElementById("autorefresh").checked = true;
    autoRefresh();
  }
  if (!chk_snd) return;
  if (localStorage.getItem("mainpage_nosound"))
    document.getElementById("autosound").checked = false;
});

window.addEventListener("unload", function() {
  if (!serviceType) return;
  
  chk = document.getElementById("autorefresh");
  chk_snd = document.getElementById("autosound");

  if (chk.checked)
    localStorage.setItem("autorefresh", true);
  else
    localStorage.removeItem("autorefresh");
  if (!chk_snd) return;
  if (!document.getElementById("autosound").checked)
    localStorage.setItem("mainpage_nosound", true);
  else
    localStorage.removeItem("mainpage_nosound");
});