BBS Colorful Chatroom

// ==UserScript==
// @name             BBS Chatroom
// @namespace        dollars-bbs.org
// @author           Degritone
// @description      Adds back in limited functionality for the chatroom for the Dollars BBS
// @match            *://*.dollars-bbs.org/*
// @match            *://qchat.rizon.net/
// @grant            GM.setValue
// @grant            GM.getValue
// @grant            GM.deleteValue
// ==/UserScript==

function request(url){
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET",url,false);
  xmlHttp.send(null);
  return xmlHttp.responseText;
}

let prefixes = /^\+?%?@?&?~?/;
let icons = [];
let iconColors = [];
let aoonline;

if(window.location.href.startsWith("https://dollars-bbs.org/chatroom")){
  document.title = "Dollars BBS | Chatroom";
  //window.location.href = "https://qchat.rizon.net";
  let ip = request("https://api.ipify.org/");
  console.log(ip);
  let dhrip = request("https://dhr.ddns.net/ip");
  console.log(dhrip);
  let frameSrc = ip==dhrip?"https://localhost":"https://dhr.ddns.net";
  let iframe = document.createElement("iframe");
  iframe.src = frameSrc;
  iframe.style.width = "100%";
  iframe.style.height = "100%";
  iframe.style.border = "none";
  iframe.style.margin = "0px";
  iframe.style.position = "fixed";
  iframe.style.top = "0px";
  iframe.style.left = "0px";
  document.body.innerHTML = "";
  document.body.appendChild(iframe);
} if(window.location.href.startsWith("https://dollars-bbs.org")){
  chatLink();
} else if(window.location.href == "https://qchat.rizon.net/"){
  document.title = "Dollars BBS | Chatroom";
  checkForLoaded();
  loadIcon(0);
  iconReloadButton();
}

async function f(readerResult,i){
  if(!readerResult)
    return;
  if(readerResult.length<"data:1".length)
    return;
  await GM.setValue("bbsChatroomIcon."+i,readerResult);
  loadIcon(i,false);
}

async function requestb64(url,i){
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET",url,true);
  xmlHttp.responseType = "blob";
  xmlHttp.onload = function () {
    let reader = new FileReader();
    reader.onloadend = function () {
      f(reader.result,i);
    }
    reader.readAsDataURL(xmlHttp.response);
  };
  xmlHttp.send(null);
}

async function getAOOnline(){
  let xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET","https://api.allorigins.win/raw?url=https://archive.org/",false);
  let t;
  try{
    t = setTimeout(xmlHttp.abort,10000);
    xmlHttp.send(null);
  }catch(e){
    if(t)
      clearTimeout(t);
    return false;
  }
  if(t)
    clearTimeout(t);
  return xmlHttp.status==200;
}

function iconReloadButton(){
  let reloadButton = document.createElement("div");
  reloadButton.onclick = ()=>{icons = [];loadIcon(0,true);};
  reloadButton.style.position = "fixed";
  reloadButton.style.right = "20px";
  reloadButton.style.top = "0px";
  reloadButton.style.border = "2px #000000 solid";
  reloadButton.style.borderRadius = "10px";
  reloadButton.style.fontSize = "18px";
  reloadButton.style.background = "#EEEEEE";
  reloadButton.style.lineHeight = "26px";
  reloadButton.style.paddingLeft = "3px";
  reloadButton.style.paddingRight = "3px";
  reloadButton.innerHTML = "Refresh Icons";
  reloadButton.title = "This may take multiple minutes";
  document.body.appendChild(reloadButton);
}

async function loadIcon(i,skipGM=false){
  let icon = document.createElement("img");
  icon.style.width = "58px";
  icon.style.margin = "auto";
  icon.width = 58;
  icon.height = 58;
  icon.setAttribute("class","drrrIcon");
  let image = "https://archive.org/download/drrr-like-chat-icons/"+i+".png";
  let colorless = false;
  let gmv = await GM.getValue("bbsChatroomIcon."+i);
  if(!gmv || skipGM)
    aoonline = await getAOOnline();
  if(gmv){
    if(gmv.length<"data:1".length || skipGM){
      await GM.deleteValue("bbsChatroomIcon."+i);
      loadIcon(i);
      return;
    }
    image = gmv;
  }else if(aoonline){
    let allorigins = "https://api.allorigins.win/raw?url=";
    image = allorigins+image;
    requestb64(image,i);
    return;
  }else{
    colorless = true;
    icon.crossOrigin = null;
  }
  icon.src = image;
  icon.onload = function(){
    getIconColors(icon,i,colorless);
    loadIcon(i+1,skipGM);
    icons[i] = icon;
    iconLoader();
    let colless = document.createAttribute("colorless");
    colless.value = colorless;
    icon.setAttributeNode(colless);
  };
}

function getIconColors(icon,i,colorless){
  if(colorless){
    iconColors[i] = [63,63,63,1];
    return;
  }
  let canvas = document.createElement("canvas");
  canvas.width = 58;
  canvas.height = 58;
  let context = canvas.getContext("2d");

  context.drawImage(icon,0,0,58,58);
  iconColors[i] = [];
  let imageData = context.getImageData(0,0,58,58).data;
  iconColors[i][0] = imageData[58*6*4+48*4];
  iconColors[i][1] = imageData[58*6*4+48*4+1];
  iconColors[i][2] = imageData[58*6*4+48*4+2];
  if(iconColors[i][0]<63 && iconColors[i][1]<63 && iconColors[i][2]<63){
    iconColors[i][0] = 63;
    iconColors[i][1] = 63;
    iconColors[i][2] = 63;
  }
  iconColors[i][3] = 1;
}

function chatLink(){
  let menu = document.getElementById("pagemenu");
  if(!menu){
    setTimeout(chatLink,100);
    return;
  }
  let chatroom = document.createElement("li");
  chatroom.innerHTML = "<a href='https://dollars-bbs.org/chatroom'>Chatroom</a>";
  menu.children[2].children[0].innerHTML = "Other Chats";
  menu.insertBefore(chatroom,menu.children[2]);
  let sidebar = document.getElementById("sidebar");
  let a = sidebar.getElementsByTagName("a");
  a = a[2%a.length];
  a.href = "https://qchat.rizon.net";
}

function checkForLoaded(){
  let loaded = document.getElementsByClassName("tr2").length;
  if(!loaded)
    setTimeout(checkForLoaded,100);
  else
    setTimeout(login,100);
}

function login(){
  document.title = "Dollars BBS | Chatroom";

  let topNode = document.getElementsByClassName("dynamicpanel qwebirc-qui topboundpanel outertabbar outertabbar_top")[0];
  topNode.style.display = "none";

  let favicon = document.createElement("link");
  favicon.href = "https://dollars-bbs.org/random/favicon.ico";
  favicon.rel = "shortcut icon";
  document.head.appendChild(favicon);

  let bg = document.getElementsByClassName("dynamicpanel qwebirc-qui middleboundpanel lines")[0];
  bg.style.background = "#000000";
  bg.style.color = "#DDDDDD";
  bg.style.top = "0px";
  bg.style.bottom = "0px";
  bg.style.left = "0px";
  bg.style.right = "0px";
  bg.style.height = "";

  let form = document.getElementsByTagName("table")[1];
  form.style.top = "0px";
  form.style.left = "50%";
  form.style.transform = "translateX(-50%)";
  form.style.position = "absolute";
  form.children[0].removeChild(form.children[0].children[0]);

  let startButton = document.getElementsByTagName("input");
  for(let i=0;i<startButton.length;i++){
    if(startButton[i].value == "Connect"){
      startButton = startButton[i];
      break;
    }
  }
  startButton.style.width = "148px";

  startButton.onclick = ()=>{waitForChat(false,document.getElementsByTagName("input")[0].value);};

  inputs();
  tipsBox();
}

function iconLoader(){
  let name = document.getElementsByTagName("input")[0];
  let bg = document.getElementsByClassName("dynamicpanel qwebirc-qui middleboundpanel lines")[0];
  let iconHolder = document.getElementById("iconHolder");
  if(!iconHolder){
    iconHolder = document.createElement("div");
    bg.appendChild(iconHolder);
    iconHolder.id = "iconHolder";
    iconHolder.style.width = (13*60)+"px";
    iconHolder.style.position = "absolute";
    iconHolder.style.top = "112px";
    iconHolder.style.bottom = "0px";
    iconHolder.style.left = "50%";
    iconHolder.style.transform = "translateX(-50%)";
    iconHolder.style.display = "flex";
    iconHolder.style.flexWrap = "wrap";
    iconHolder.style.flexDirection = "row";
    iconHolder.style.justifyContent = "center";
    iconHolder.style.overflowY = "scroll";
  }
  let start = 0;
  if(name.value.match(/^\[[0-9]+\]/))
    start = parseInt(name.value.replace("[","").replace(/\].+/,""));
  for(let i=iconHolder.children.length;i<icons.length;i++){
    let selection = document.createElement("div");
    selection.style.width = "60px";
    selection.style.height = "75px";
    selection.style.display = "inline-block";
    selection.style.position = "relative";
    selection.style.margin = "0px";
    selection.style.alignSelf = "center";

    let radio = document.createElement("input");
    radio.type = "radio";
    radio.id = "icon"+i;
    radio.name = "icon";
    radio.value = i;
    radio.style.left = "23px";
    radio.style.bottom = "2px";
    radio.style.position = "absolute";
    radio.style.margin = "0px";
    if(i==start)
      radio.checked = "checked";

    let label = document.createElement("label");
    label.htmlFor = "icon"+i;

    label.appendChild(icons[i].cloneNode());
    selection.appendChild(label);
    selection.appendChild(radio);
    selection.onclick = ()=>{adjustName();};

    iconHolder.appendChild(selection);
  }
  inputs();
}

function inputs(){
  let nameInput = document.getElementsByTagName("input")[0];
  if(nameInput.value == ""){
    let cookies = document.cookie.split(";");
    for(let i=0;i<cookies.length;i++){
      let pair = cookies[i].split("=");
      if(pair[0] == " name" && nameInput.value == "")
        nameInput.value = pair[1];
    }
  }

  if(!document.getElementById("typingName")){
    let name = document.createElement("input");
    name.autocomplete = "off";
    name.autocorrect = "off";
    name.autocapitalize = "off";
    name.spellcheck = false;
    name.style = window.getComputedStyle(nameInput);
    name.id = "typingName";
    name.value = nameInput.value.replace(/\[[0-9]+\]/,"");
    name.oninput = ()=>adjustName();
    nameInput.parentNode.appendChild(name);

    let channelInput = document.getElementsByTagName("input")[2];
    channelInput.value = "#dollars-bbs";
    channelInput.parentNode.parentNode.style.display = "none";
  }
  nameInput.style.display = "none";

  let iconHolder = document.getElementById("iconHolder");
  if(iconHolder){
    let w = Math.ceil(icons.length/Math.floor((window.innerHeight-parseInt(iconHolder.style.top.replace("px","")))/75))*60;
    iconHolder.style.width = Math.min(w,window.innerWidth)+"px";
  }
}

function tipsBox(){
  let tips = document.createElement("div");
  tips.style.width = "250px";
  tips.style.height = "100px";
  tips.style.position = "fixed";
  tips.style.left = "200px";
  tips.style.top = "5px";
  tips.style.backgroundColor = "#EEEEEE";
  tips.style.border = "2px solid #FFFFFF";
  tips.style.borderRadius = "10px";
  tips.style.textAlign = "center";
  tips.id = "tipsBox";
  tips.innerHTML = "Click this box to get cycling tips on things you can do with the script!";
  document.body.appendChild(tips);
  let tip = [];
  tip[0] = "You can type %@ to begin formatting text. %@&lt;0-15> is colored text. Other valid formatting characters are I, M, B, S, U, K, R.";
  tip[1] = "You can press CTRL and a valid formatting character to type that character in 2 less button presses.";
  tip[2] = "You can use %@&lt;0-15>,&lt;0-15> to color both the text and its background or just %@,&lt;number> to color just the background.";
  tip[3] = "You can end already set formatting from your message with %@R.";
  tip[4] = "You can change your name with /nick. This also allows you to change your icon by changing your name to [&lt;0-15>]<name>.";
  tip[5] = "You can PM people by pressing either the circular button right of the textbox or using /query &lt;name>.";
  tip[6] = "You can add someone's name to the textbox by clicking their name.";
  tip[7] = "Don't do /help.";
  tip[8] = "If you ever get lost, you can return to a known channel with the channel picker in the top right.";
  tip[9] = "You can join other channels by doing /join #&lt;channel>.";
  tip[10] = "You can drag a file onto the textbox to upload it!<br><br>The generated links do not work in Chrome, but you can still upload your file.";
  tip = shuffle(tip);
  tips.setAttribute("class","-1");
  tips.addEventListener("click",()=>{
    let i = parseInt(tips.getAttribute("class"))%tip.length;
    i++;
    tips.innerHTML = tip[i];
    tips.setAttribute("class",i);
  });
}

function shuffle(array) {
  let currentIndex = array.length,  randomIndex;
  while(currentIndex != 0){
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]];
  }
  return array;
}

let ownName = "";

function adjustName(){
  let name = document.getElementsByTagName("input")[0];
  let radios = document.getElementsByName("icon");
  let value = 0;
  for(let i=0;i<radios.length;i++){
    if(radios[i].checked){
      value = radios[i].value
      break;
    }
  }

  name.value = "["+value+"]"+document.getElementById("typingName").value;
  name.dispatchEvent(new Event("input"));
  ownName = name.value;
}

function waitForChat(once=false,name=""){
  if(!once){
    once = true;
    let cover = document.createElement("div");
    cover.id = "loadingCover";
    cover.style.position = "fixed";
    cover.style.top = "0px";
    cover.style.bottom = "0px";
    cover.style.left = "0px";
    cover.style.right = "0px";
    cover.style.background = "#000000";
    cover.style.color = "#FFFFFF";
    cover.innerHTML = "LOADING";
    document.body.appendChild(cover);
    let date = new Date();
    date.setTime(date.getTime()+(1000*60*60*24*365));
    document.cookie = "name="+name+"; expires="+encodeURIComponent(date.toUTCString())+";";
    ownName = name;
    document.body.removeChild(document.getElementById("tipsBox"));
  }
  if(!document.getElementsByClassName("nicklist tab-invisible dynamicpanel qwebirc-qui rightboundpanel")[0]){
    setTimeout(waitForChat,100,once);
    return;
  }
  chat(false,false);
}

let sound = getCookie("sound")?(getCookie("sound").split("-")[0]=="on"):false;
let messageSound = new Audio("https://archive.org/download/DRRR-message-sound/message%20sound.mp3");
let logoutSound = new Audio("https://archive.org/download/DRRR-message-sound/logout%20sound.mp3");
messageSound.crossOrigin = "anonymous";
logoutSound.crossOrigin = "anonymous";
let augain;
document.body.addEventListener("click",audioInitiate);
function audioInitiate(){
  let auctx = new AudioContext();
  let aumessage = auctx.createMediaElementSource(messageSound);
  let aulogout = auctx.createMediaElementSource(logoutSound);
  augain = auctx.createGain();
  augain.gain.value = 3;
  aumessage.connect(augain);
  aulogout.connect(augain);
  augain.connect(auctx.destination);
  document.body.removeEventListener("click",audioInitiate);
}

let textColor = [];
textColor[0] = "rgb(255,255,255)";
textColor[1] = "rgb(0,0,0)";
textColor[2] = "rgb(0,0,139)";
textColor[3] = "rgb(0,100,0)";
textColor[4] = "rgb(255,0,0)";
textColor[5] = "rgb(139,0,0)";
textColor[6] = "rgb(128,0,128)";
textColor[7] = "rgb(255,165,0)";
textColor[8] = "rgb(255,255,0)";
textColor[9] = "rgb(0,128,0)";
textColor[10] = "rgb(0,128,128)";
textColor[11] = "rgb(0,255,255)";
textColor[12] = "rgb(0,0,255)";
textColor[13] = "rgb(255,0,255)";
textColor[14] = "rgb(169,169,169)";
textColor[15] = "rgb(128,128,128)";

let ctrlDown = false;
document.body.addEventListener("keydown",(e)=>{
  if(e.keyCode == 17 || e.keyCode == 91)
    ctrlDown = true;
});
document.body.addEventListener("keyup",(e)=>{
  if(e.keyCode == 17 || e.keyCode == 91)
    ctrlDown = false;
});

function chat(once,loaded){
  document.title = "Dollars BBS | Chatroom";
  let linkTags = document.getElementsByTagName("link");
  linkTags[linkTags.length-1].href = "https://dollars-bbs.org/random/favicon.ico";
  if(!(document.getElementsByClassName("dynamicpanel qwebirc-qui topicboundpanel topic tab-invisible colourline")[0] || document.getElementsByTagName("input")[0]) && !once){
    setTimeout(chat,100,false,false);
    return;
  }
  if(!loaded){
    setTimeout(chat,100,false,true);
    document.body.removeChild(document.getElementById("loadingCover"));
    return;
  }

  setTimeout(chat,100,true,true);

  let input = document.getElementsByClassName("dynamicpanel qwebirc-qui bottomboundpanel input")[0];
  input.style.position = "relative";
  input.style.top = "0px";

  let messageList = document.getElementsByClassName("dynamicpanel qwebirc-qui middleboundpanel lines ircwindow")[0];
  if(!messageList)
    messageList = document.getElementsByClassName("drrrMessageList")[0];
  messageList.style.background = "rgba(0,0,0,1)";
  messageList.style.overflowY = "scroll";
  messageList.style.overflowX = "hidden";
  messageList.style.width = "100%";
  messageList.style.bottom = "0px";
  messageList.style.position = "fixed";

  let pmListsList = document.getElementsByClassName("drrrPmList");

  let bufferDivs = messageList.getElementsByClassName("bufferDiv");
  if(!bufferDivs[0])
    bufferDivs = [];
  for(let i=bufferDivs.length;i<3;i++){
    let d = document.createElement("div");
    messageList.prepend(d);
    d.style.display = "none";
    d.setAttribute("class","bufferDiv");
  }
  bufferDivs = messageList.getElementsByClassName("bufferDiv");

  let messages = messageList.getElementsByClassName("colourline");

  for(let i=0;i<messages.length;i++){
    let slashMe = 0;
    let spans = messages[i].getElementsByTagName("span");
    let mpm = false;
    if(spans.length<4){
      if(spans.length<3){
        continue;
      }
      slashMe = 1;
    }
    if((spans[1].innerHTML.startsWith("-") && !spans[1].innerHTML.startsWith('-<span class="hyperlink-whois">Onee-chan</span>-')) || spans[1].innerHTML.startsWith("[notice("))
      mpm = true;

    let timestamp = document.createElement("div");
    timestamp.innerHTML = spans[0].innerHTML;
    let reply = document.createElement("div");
    reply.setAttribute("class","drrrReply");
    reply.style.width = (600+58+25)+"px";
    reply.style.margin = "auto";
    reply.style.position = "relative";
    reply.style.display = "flex";
    let personHolder = document.createElement("div");
    personHolder.style.width = "58px";
    personHolder.style.position = "relative";
    personHolder.style.display = "flex";
    reply.appendChild(personHolder);
    let replyHolder = document.createElement("div");
    replyHolder.style.width = "600px";
    replyHolder.style.display = "flex";
    let replyBubble = document.createElement("div");
    replyBubble.style.alignSelf = "center";
    replyBubble.style.display = "flex";
    let replyText = document.createElement("div");
    replyText.style.display = "flex";
    replyBubble.appendChild(replyText);
    replyHolder.appendChild(replyBubble);
    reply.appendChild(replyHolder);

    let name = "";
    let hlwi = messages[i].getElementsByClassName("hyperlink-whois")[0]
    name = hlwi?hlwi:spans[3-slashMe];
    let self = name.parentNode.getAttribute("class") == "Xu";
    let m = self?name.parentNode.nextSibling:name.parentNode;
    if(!m)
      m = name.parentNode;
    if(m.innerHTML == "@" || m.innerHTML == "%" || m.innerHTML == "~")
      m = spans[3+(self?2:0)-slashMe];
    let mh = m;
    let opmm = !m.innerHTML.startsWith("-");
    if(self)
      m.innerHTML = m.innerHTML.replace(/.*?&gt;(<span>.+?<\/span>)? ?/,"");
    else if(!slashMe)
      m.innerHTML = m.innerHTML.replace(/.*?&gt;(<span>.+?<\/span>)? ?/,"");
    else
      m.innerHTML = m.innerHTML.replace(/.+<\/span> /,"");
    if(mpm){
      if(m.innerHTML.startsWith("-"))
        m.innerHTML = m.innerHTML.replace(/.+?- /,"");
      else
        m.innerHTML = m.innerHTML.replace(/.+?\)\] /,"");
    }
    m = formatSpan(m);
    for(let j=0;mh.nextSibling && j<2000;j++){
      mh = mh.nextSibling;
      if(mh == name)
        mh = mh.nextSibling;
      if(!mh)
        break;
      m+=formatSpan(mh);
    }
    name = name.innerHTML;
    replyText.innerHTML = "<span style='overflow-wrap: break-word; width: 100%;'>"+m+"</span>";

    let id = 0;
    for(let j=0;j<name.replace(prefixes,"").length;j++)
      id+=name.replace(prefixes,"").charCodeAt(j);
    id = id%icons.length;

    let qjl = m.match(/\[.+?@.+?\] has (quit \[.*?\]<\/span>)?(joined <span class="hyperlink-channel">#.+)?(left <span class="hyperlink-channel">#.+)?$/);
    if(qjl){
      let ip = m.match(/\[.+?\]/g);
      for(let j=0;j<ip.length;j++){
        if(ip[j].match(/\[.+?@.+?\]/)){
          ip = ip[j];
          break;
        }
      }
      replyText.innerHTML = "<span>——"+m.replace(ip,"").replace("  "," ")+"</span>";
      bufferDivs[2].after(replyText);
      replyText.style.color = "#FFFFFF";
      replyText.style.width = "683px";
      replyText.style.margin = "auto";
      messageList.removeChild(messages[i]);
      if(m.match(/quit \[.*?\]<\/span>$/) || m.match(/left <span class="hyperlink-channel">#.+$/))
        logoutSound.play();
      else
        messageSound.play();
      continue;
    }

    if(!mpm)
      bufferDivs[2].after(reply);
    else{
      let mlist = null;
      for(let j=0;j<pmListsList.length;j++){
        if(pmListsList[j].id == name){
          mlist = pmListsList[j];
          continue;
        }
      }
      if(mlist == null){
        mlist = createPmList(name);
        messageList.parentNode.appendChild(mlist);
        pmListsList = document.getElementsByClassName("drrrPmList");
      }
      mlist.prepend(reply);
      mlist.setAttribute("unread",opmm?0:parseInt(mlist.getAttribute("unread"))+1);
    }
    if(opmm && mpm)
      name = ownName;

    let iconHolder = document.createElement("div");
    personHolder.appendChild(iconHolder);
    if(name.match(/\[[0-9]+\]/)){
      id = parseInt(name.replace(/\[/,"").replace(/\].+/,""));
    }

    if(!icons[id]){
      loadIcon(id);
      setTimeout(setIcon,5000,id,iconHolder,mpm);
      id = 0;
      for(let j=0;j<name.replace(prefixes,"").length;j++)
        id+=name.replace(prefixes,"").charCodeAt(j);
      id = id%icons.length;
      setIcon(id,iconHolder,mpm);
    } else
      setIcon(id,iconHolder,mpm);

    let namePlate = document.createElement("div");
    namePlate.innerHTML = name.replace(/\[[0-9]+\]/,"");
    namePlate.style.margin = "auto";
    namePlate.style.width = "90px";
    namePlate.style.textAlign = "center";
    namePlate.style.color = "#FFFFFF";
    namePlate.style.position = "absolute";
    namePlate.style.transform = "translateX(-50%) translateY(-6px)"
    namePlate.style.overflowWrap = "break-word";
    namePlate.style.left = "29px";
    namePlate.style.top = "calc(50% + 39px)";
    iconHolder.style.display = "block";
    iconHolder.appendChild(namePlate);

    timestamp.style.position = "relative";
    timestamp.style.color = "#000000";
    timestamp.style.right = "65px";
    iconHolder.appendChild(timestamp);

    let topColor = iconColors[id][0]+","+iconColors[id][1]+","+iconColors[id][2]+","+iconColors[id][3];
    let topMiddleColor = iconColors[id][0]+","+iconColors[id][1]+","+iconColors[id][2]+","+(iconColors[id][3]-0.05);
    let bottomMiddleColor = iconColors[id][0]+","+iconColors[id][1]+","+iconColors[id][2]+","+(iconColors[id][3]-0.15);
    let bottomColor = iconColors[id][0]+","+iconColors[id][1]+","+iconColors[id][2]+","+(iconColors[id][3]-0.5);
    if(mpm){
      topColor = "255,255,255,1";
      topMiddleColor = "255,255,255,1";
      bottomMiddleColor = "255,255,255,1";
      bottomColor = "255,255,255,1";
    }
    replyBubble.style.background = "linear-gradient(to bottom,rgba("+topColor+"),rgba("+topMiddleColor+") 50%,rgba("+bottomMiddleColor+") 50%,rgba("+bottomColor+"))";
    replyBubble.style.border = "solid #FFFFFF 4px";
    replyBubble.style.borderRadius = "13px";
    replyBubble.style.maxWidth = Math.min(window.innerWidth,600)+"px";
    replyBubble.style.minWidth = (18*3)+"px";
    replyBubble.style.width = "auto";
    replyBubble.style.left = "30px";
    replyBubble.style.position = "relative";

    replyText.style.color = "#FFFFFF";
    if(iconColors[id][0]+iconColors[id][1]+iconColors[id][2]>230*3){
      replyText.style.color = "#050505";
      replyBubble.style.borderColor = "#888888";
    }
    if(mpm){
      replyText.style.color = "#000000";
      replyBubble.style.borderColor = "rgba("+iconColors[id][0]+","+iconColors[id][1]+","+iconColors[id][2]+",1)";
    }
    replyText.style.position = "relative";
    replyText.style.fontSize = "18px";
    replyText.style.margin = "18px";
    replyText.style.marginTop = "14px";
    replyText.style.lineHeight = "20px";
    replyText.style.width = "-moz-max-content";
    replyText.style.maxWidth = (Math.min(window.innerWidth,600)-18*2)+"px";

    reply.style.minHeight = (Math.max(replyBubble.offsetHeight,58)+16)+"px";
    reply.parentNode.style.display = "block";
    reply.mb = Math.min(namePlate.offsetHeight,Math.max(0,(58+(namePlate.offsetHeight+8)*1.5)-parseInt(reply.style.minHeight.replace("px",""))));
    if(mpm){
      let isPm = document.getElementsByClassName("drrrToggle")[0].getAttribute("on")=="on";
      let pmsel = document.getElementById("pmSelector");
      let cpm = pmsel.options[pmsel.selectedIndex];
      if(cpm)
        cpm = cpm.value.replace(/\[[0-9]+\]/,"");
      if(!(namePlate.innerHTML == cpm || namePlate.innerHTML == ownName.replace(/\[[0-9]+\]/,"")) || !isPm){
        reply.parentNode.style.display = "none";
      }
    }
    reply.style.marginBottom = reply.mb+"px";

    let arrowGradient = document.createElement("div");
    arrowGradient.style.width = "25px";
    arrowGradient.style.height = "12px";
    arrowGradient.style.background = "#000000";
    arrowGradient.style.top = "calc(50% - 1px)";
    arrowGradient.style.transform = "translateY(-50%)";
    arrowGradient.style.left = "-25px";
    arrowGradient.style.position = "absolute";

    let arrow = document.createElement("div");
    arrow.style.width = "25px";
    arrow.style.height = "13px";
    let h = replyBubble.offsetHeight/13*100;
    let arrowBackground = "linear-gradient(10deg,rgba(0,0,0,1),rgba(0,0,0,1) calc(40% - 3px),"+replyBubble.style.borderColor+" calc(40% - 3px),"+replyBubble.style.borderColor+" calc(40% + 1px),rgba(0,0,0,0) calc(40% + 1px),rgba(0,0,0,0)),"+
        "linear-gradient(170deg,rgba(0,0,0,1),rgba(0,0,0,1) calc(40% - 3px),"+replyBubble.style.borderColor+" calc(40% - 3px),"+replyBubble.style.borderColor+" calc(40% + 1px),rgba(0,0,0,0) calc(40% + 1px),rgba(0,0,0,0)),"+
        "linear-gradient(to bottom,rgba("+topColor+") -"+h+"%,rgba("+topMiddleColor+") calc(50% + 0.5px),rgba("+bottomMiddleColor+") calc(50% + 0.5px),rgba("+bottomColor+") "+h+"%)";
    arrow.style.background = arrowBackground;
    arrowGradient.appendChild(arrow);
    replyBubble.appendChild(arrowGradient);

    if(document.getElementById("inflateSetting") && !mpm)
      if(document.getElementById("inflateSetting").checked)
        animateNewMessage(reply,replyBubble,reply.mb,replyBubble.offsetHeight,replyBubble.offsetWidth-8,namePlate.offsetHeight,0);

    messageList.removeChild(messages[i]);

    if(window.scrollY>0){
      window.scroll(0,0);
      messageList.scroll(0,0);
    }

    if(sound)
      messageSound.play();
  }

  let separator = document.getElementsByClassName("lastpos")[0];
  if(separator)
    separator.parentNode.removeChild(separator);

  let onlineUsers = getOnlineUsers();
  let onlineDiv = document.getElementById("drrrOnline");
  if(!onlineDiv){
    onlineDiv = document.createElement("div");
    onlineDiv.style.display = "flex";
    onlineDiv.style.flexDirection = "row";
    onlineDiv.style.position = "relative";
    onlineDiv.style.width = "725px";
    onlineDiv.style.justifyContent = "center";
    onlineDiv.style.flexWrap = "wrap";
    onlineDiv.style.display = "none";
    onlineDiv.id = "drrrOnline";
  }
  for(let i=0;i<onlineUsers.length;i++){
    if(onlineDiv.children[i]){
      if(onlineUsers[i].id == onlineDiv.children[i].id)
        continue;
    }
    let div = onlineDiv.children[i]?onlineDiv.children[i]:document.createElement("div");
    if(!div.id)
      onlineDiv.appendChild(div);
    div.innerHTML = "";
    div.style.width = "-moz-max-content";
    div.style.maxWidth = "fit-content";
    div.style.marginTop = "2px";
    div.id = onlineUsers[i].id;
    if(i!=0)
      div.style.marginLeft = "10px";
    div.onclick = ()=>{
      let t = document.getElementsByTagName("textarea")[0];
      let tstart = t.value.slice(0,t.selectionStart);
      let tend = t.value.slice(t.selectionStart);
      t.value = tstart+(tstart.match(/ $/)||tstart.match(/^$/)?"":" ")+onlineUsers[i].id+(tend.match(/^ /)||tend.match(/^$/)?"":" ")+tend;
      t.oninput();
      t.focus();
    };
    div.style.cursor = "pointer";
    let oui = null;
    let ouiid = parseInt(onlineUsers[i].id.replace("[","").replace(/\].+/,""));
    if(icons[ouiid])
      oui = icons[ouiid].cloneNode();
    else{
      ouiid = 0;
      for(let j=0;j<onlineUsers[i].id.replace(prefixes,"").length;j++)
        ouiid+=onlineUsers[i].id.replace(prefixes,"").charCodeAt(j);
      ouiid = ouiid%icons.length;
      oui = icons[ouiid].cloneNode();
    }
    div.appendChild(oui);
    oui = div.children[0];
    oui.style.height = "18px";
    oui.style.width = "18px";
    oui.style.marginRight = "3px";
    let np = document.createElement("div");
    np.innerHTML = onlineUsers[i].display;
    np.style.color = "#000000";
    np.style.lineHeight = "18px";
    np.style.display = "inline-block";
    np.style.top = "-3px";
    np.style.position = "relative";
    div.appendChild(np);

    if(!document.getElementById(onlineUsers[i].id)){
      let mlist = createPmList(onlineUsers[i].id);
      messageList.parentNode.appendChild(mlist);
      pmListsList = document.getElementsByClassName("drrrPmList");
    }
  }
  for(let i=onlineUsers.length;i<onlineDiv.children.length;i++)
    onlineDiv.removeChild(onlineDiv.children[i]);

  if(!once){
    let header = document.getElementsByClassName("dynamicpanel qwebirc-qui topicboundpanel topic tab-invisible colourline")[0];
    if(header)
      header.style.display = "none";

    document.body.prepend(input);
    document.body.style.background = "rgba(238,238,238,1)";
    input.style.paddingLeft = "24px";
    input = document.getElementsByTagName("input")[0];
    let inputBox = document.createElement("textarea");
    input.parentNode.style.width = "725px";
    input.parentNode.style.margin = "auto";
    input.parentNode.style.background = "#EEEEEE";
    input.style.height = "0px";
    input.style.width = "0px";
    input.style.margin = "0px";
    input.style.border = "0px";
    input.style.padding = "0px";
    inputBox.style.width = "590px";
    inputBox.style.height = "65px";
    inputBox.style.overflowWrap = "break-word";
    inputBox.style.overflowX = "hidden";
    inputBox.style.whiteSpace = "normal";
    inputBox.style.background = "#FFFFFF";
    inputBox.style.position = "relative";
    inputBox.style.top = "0px";
    inputBox.style.left = "88px";
    inputBox.style.border = "2px solid #333333";
    inputBox.style.borderRadius = "10px";
    inputBox.style.fontSize = "18px";
    inputBox.placeholder = "";
    inputBox.ondrop = (e)=>{upload(e);};
    inputBox.oninput = (e)=>{
      let isPm = document.getElementsByClassName("drrrToggle")[0].getAttribute("on")=="on";
      let pmsel = document.getElementById("pmSelector");
      let cpm = pmsel.options[pmsel.selectedIndex];
      if(cpm)
        cpm = cpm.value;
      input.value = (isPm && cpm?"/notice "+cpm+" ":"")+inputBox.value.replace(/%@[iI]/g,String.fromCharCode(0x1D))
                                                               .replace(/%@[bB]/g,String.fromCharCode(0x02))
                                                               .replace(/%@[uU]/g,String.fromCharCode(0x1F))
                                                               .replace(/%@[sS]/g,String.fromCharCode(0x1E))
                                                               .replace(/%@[mM]/g,String.fromCharCode(0x11))
                                                               .replace(/%@[rR]/g,String.fromCharCode(0x0F))
                                                               .replace(/%@/g,String.fromCharCode(3));
    };
    inputBox.addEventListener("keydown",function(e){
                                          if(ctrlDown){
                                            switch(e.keyCode){
                                              case 75:
                                                e.preventDefault();
                                                inputBox.value+="%@";
                                                break;
                                              case 73:
                                                e.preventDefault();
                                                inputBox.value+="%@I";
                                                break;
                                              case 77:
                                                e.preventDefault();
                                                inputBox.value+="%@M";
                                                break;
                                              case 66:
                                                e.preventDefault();
                                                inputBox.value+="%@B";
                                                break;
                                              case 83:
                                                e.preventDefault();
                                                inputBox.value+="%@S";
                                                break;
                                              case 85:
                                                e.preventDefault();
                                                inputBox.value+="%@U";
                                                break;
                                              case 82:
                                                e.preventDefault();
                                                inputBox.value+="%@R";
                                                break;
                                            }
                                          }
                                          if(e.code=="Enter"){
                                            let isPm = document.getElementsByClassName("drrrToggle")[0].getAttribute("on")=="on";
                                            let pmsel = document.getElementById("pmSelector");
                                            let cpm = pmsel.options[pmsel.selectedIndex];
                                            if(cpm)
                                              cpm = cpm.value;
                                            if(inputBox.value.startsWith("/nick ")){
                                              ownName = inputBox.value.replace(/^\/nick /,"");
                                              modifyUserPlate();
                                            }
                                            input.value = (isPm && cpm?"/notice "+cpm+" ":"")+inputBox.value.replace(/%@[iI]/g,String.fromCharCode(0x1D))
                                                                                                     .replace(/%@[bB]/g,String.fromCharCode(0x02))
                                                                                                     .replace(/%@[uU]/g,String.fromCharCode(0x1F))
                                                                                                     .replace(/%@[sS]/g,String.fromCharCode(0x1E))
                                                                                                     .replace(/%@[mM]/g,String.fromCharCode(0x11))
                                                                                                     .replace(/%@[rR]/g,String.fromCharCode(0x0F))
                                                                                                     .replace(/%@/g,String.fromCharCode(3));
                                            inputBox.value = "";
                                            input.focus();
                                          }
                                        });
    input.onkeydown = function(){
                        inputBox.value = "";
                        messageList.scroll(0,0);
                        window.scroll(0,0);
                        inputBox.focus();
                      };
    input.parentNode.appendChild(inputBox);

    document.getElementById("ircui").style.top = "4000px";

    let user = document.createElement("div");
    user.style.width = "58px";
    user.style.display = "inline-block";
    user.style.position = "absolute";
    user.style.top = "0px";
    user.id = "userPlate";
    input.parentNode.prepend(user);
    modifyUserPlate();

    inputBox.style.height = (user.offsetHeight-4)+"px";

    input.parentNode.appendChild(onlineDiv);

    for(let i=0;i<3;i++){
    }
    let toggleBar = document.createElement("div");
    let toggleIconSrcs = [];
    toggleIconSrcs[0] = "https://archive.org/download/drrrchat-toggles/pm%20off.png";
    toggleIconSrcs[1] = "https://archive.org/download/drrrchat-toggles/pm%20on.png";
    toggleIconSrcs[2] = "https://archive.org/download/drrrchat-toggles/online%20off.png";
    toggleIconSrcs[3] = "https://archive.org/download/drrrchat-toggles/online%20on.png";
    toggleIconSrcs[4] = "https://archive.org/download/drrrchat-toggles/sound%20off.png";
    toggleIconSrcs[5] = "https://archive.org/download/drrrchat-toggles/sound%20on.png";
    toggleIconSrcs[6] = "https://archive.org/download/drrrchat-toggles/settings%20off.png";
    toggleIconSrcs[7] = "https://archive.org/download/drrrchat-toggles/settings%20on.png";

    let toggleIcons = [];
    for(let i=0;i<toggleIconSrcs.length/2;i++){
      toggleIcons[i] = document.createElement("img");
      toggleIcons[i].style.margin = "0px";
      toggleIcons[i].style.marginLeft = "5px";
      toggleIcons[i].style.cursor = "pointer";
      toggleIcons[i].setAttribute("class","drrrToggle");
      toggleIcons[i].src = toggleIconSrcs[i*2];
      toggleBar.appendChild(toggleIcons[i]);
      let o = document.createAttribute("on");
      o.value = "off";
      toggleIcons[i].setAttributeNode(o);
    }
    if(sound){
      toggleIcons[2].src = toggleIconSrcs[5];
      toggleIcons[2].setAttribute("on","on");
    }else{
      toggleIcons[2].setAttribute("on","off");
    }
    toggleBar.style.position = "absolute";
    toggleBar.style.marginLeft = "690px";
    toggleBar.style.width = (20*toggleIcons.length)+"px";

    input.parentNode.prepend(toggleBar);

    toggleIcons[0].onclick = ()=>{
      toggleIcons[0].setAttribute("on",toggleIcons[0].getAttribute("on")=="on"?"off":"on");
      let on = toggleIcons[0].getAttribute("on")=="on";
      let r = 0;
      for(let i=0;i<pmListsList.length;i++){
        let rev = pmListsList[i].getAttribute("revealed")=="true";
        if(rev)
          r = i;
        pmListsList[i].style.display = (rev&&on)?"block":"none";
      }
      toggleIcons[0].src = toggleIconSrcs[on?1:0];
      if(on){
        if(icons[userID].getAttribute("colorless")=="false"){
          if(user.children[0].outerHTML.startsWith("<img"))
            user.prepend(invertIcon(user.children[0],userID));
          else
            user.children[0].style.display = "block";
          user.children[1].style.display = "none";
        }
        pmListsList[r].style.display = "block";
        pmListsList[r].setAttribute("revealed",true);
      }else{
        if(icons[userID].getAttribute("colorless")=="false"){
          user.children[0].style.display = "none";
          user.children[1].style.display = "block";
        }
      }
    };
    toggleIcons[1].onclick = ()=>{onlineDiv.style.display = onlineDiv.style.display=="none"?"flex":"none"; toggleIcons[1].src = toggleIconSrcs[onlineDiv.style.display=="none"?2:3];};
    toggleIcons[2].onclick = ()=>{
      sound = !sound;
      toggleIcons[2].src = toggleIconSrcs[sound?5:4];
      toggleIcons[2].setAttribute("on",sound?"on":"off");
      saveCookie("sound",toggleIcons[2].getAttribute("on")+"-"+document.getElementById("volumeSlider").value);
    };

    let online = document.getElementsByClassName("nicklist tab-invisible dynamicpanel qwebirc-qui rightboundpanel")[0];
    if(online)
      online.style.display = "none";

    let settingsWindow = createSettingsWindow();

    toggleIcons[3].onclick = ()=>{
      settingsWindow.style.display = settingsWindow.style.display=="none"?"block":"none";
      toggleIcons[3].src = toggleIconSrcs[settingsWindow.style.display=="none"?6:7];
    };

    let postButton = document.createElement("div");
    postButton.style.margin = "auto";
    postButton.style.marginTop = "3px";
    postButton.style.marginBottom = "3px";
    postButton.style.color = "#000000";
    postButton.style.fontWeight = "bold";
    postButton.style.textAlign = "center";
    postButton.style.lineHeight = "26px";
    postButton.style.width = "250px";
    postButton.style.height = "26px";
    postButton.style.background = "linear-gradient(to bottom,#FAF7F8,#F9F9F5 50%,#F2F2EE 50%,#F1F1ED)";
    postButton.style.border = "2px solid #333333";
    postButton.style.borderRadius = "10px";
    postButton.style.cursor = "pointer";
    postButton.innerHTML = "POST!"
    postButton.onclick = ()=>{inputBox.focus();};
    inputBox.after(postButton);

    let topNode = document.getElementsByClassName("dynamicpanel qwebirc-qui topboundpanel outertabbar outertabbar_top")[0];
    topNode.style.display = "block";
    topNode.style.position = "fixed";
    topNode.style.width = (input.parentNode.getBoundingClientRect().left-10)+"px";
    topNode.style.backgroundColor = "#EEEEEE";
    topNode.style.borderBottom = "none";
    let topAs = topNode.getElementsByTagName("a");
    for(let i=0;i<topAs.length;i++){
      topAs[i].style.backgroundColor = topAs[i].getAttribute("class")=="tab tab-unselected"?"#E3EFFA":"#FFFFFE";;
      let mut = new MutationObserver((mutations)=>{
                                       if(mutations[0].attributeName == "class")
                                         mutations[0].target.style.backgroundColor = mutations[0].target.getAttribute("class")=="tab tab-unselected"?"#E3EFFA":"#FFFFFE";
                                     });
      mut.observe(topAs[i],{attributes:true});
    }
  }

  messageList.style.top = input.offsetHeight+"px";
  messageList.style.height = "calc(100% - "+messageList.style.top+")";
  for(let i=0;i<pmListsList.length;i++){
    pmListsList[i].style.top = input.offsetHeight+"px";
  }
  messageList.setAttribute("class","drrrMessageList");

  let pmSelector = document.getElementById("pmSelector");
  if(!pmSelector){
    pmSelector = document.createElement("select");
    pmSelector.style.position = "absolute";
    pmSelector.style.top = "20px";
    let w = 120;
    pmSelector.style.marginLeft = "690px";
    pmSelector.style.width = w+"px";
    pmSelector.id = "pmSelector";
    document.getElementsByTagName("input")[0].parentNode.prepend(pmSelector);
    pmSelector.onchange = ()=>{
      let selected = pmSelector.options[pmSelector.selectedIndex].value;
      for(let i=0;i<pmListsList.length;i++){
        pmListsList[i].setAttribute("revealed",pmListsList[i].id==selected);
        pmListsList[i].style.display = pmListsList[i].getAttribute("revealed")=="true"?"block":"none";
        if(pmListsList[i].getAttribute("revealed")=="true")
          pmListsList[i].setAttribute("unread",0);
      }
      input.value = "/notice "+selected.replace(/^%?@?~?/,"");
      input.parentNode.getElementsByTagName("textarea")[0].focus();
    };
  }
  pmSelector.style.display = (document.getElementsByClassName("drrrToggle")[0].getAttribute("on")=="on")?"block":"none";
  for(let i=0;i<onlineUsers.length;i++){
    if(pmSelector.children[i])
      if(pmSelector.children[i].innerHTML == onlineUsers[i].display)
        continue;
    let option = pmSelector.children[i]?pmSelector.children[i]:document.createElement("option");
    option.value = onlineUsers[i].id;
    option.innerHTML = onlineUsers[i].display;
    if(!pmSelector.children[i])
      pmSelector.appendChild(option);
  }
  for(let i=onlineUsers.length;i<pmSelector.children.length;i++)
    pmSelector.removeChild(pmSelector.children[i]);
  for(let i=0;i<pmSelector.children.length;i++){
    let op = pmSelector.children[i].value;
    let unread = parseInt(document.getElementById(op).getAttribute("unread"));
    if(unread){
      if(pmSelector.children[i].innerHTML.match(/ \([0-9]+\)$/))
        pmSelector.children[i].innerHTML = pmSelector.children[i].innerHTML.replace(/ \([0-9]+\)$/," ("+unread+")");
      else
        pmSelector.children[i].innerHTML = pmSelector.children[i].innerHTML+" ("+unread+")";
    }else
      pmSelector.children[i].innerHTML = pmSelector.children[i].innerHTML.replace(/ \([0-9]+\)$/,"");
  }
}

function modifyUserPlate(){
  let user = document.getElementById("userPlate");
  let userID = parseInt(ownName.replace("[","").replace(/\].+/,""));
  if(!icons[userID]){
    userID = 0;
    for(let j=0;j<ownName.replace(prefixes,"").length;j++)
      userID+=ownName.replace(prefixes,"").charCodeAt(j);
    userID = userID%icons.length;
  }
  let namePlate = document.getElementById("nameUnderIcon");
  if(!namePlate){
    user.appendChild(icons[userID].cloneNode());
    namePlate = document.createElement("div");
    user.appendChild(namePlate);
    namePlate.outerHTML = "<div id='nameUnderIcon'>"+ownName.replace(/\[[0-9]+\]/,"")+"</div>";
    namePlate = document.getElementById("nameUnderIcon");
    namePlate.style.position = "relative";
    namePlate.style.left = "50%";
    namePlate.style.top = "-4px";
    namePlate.style.transform = "translateX(-50%)";
    namePlate.style.width = "100px";
    namePlate.style.overflow = "visible";
    namePlate.style.overflowWrap = "break-word";
    namePlate.style.height = "auto";
    namePlate.style.lineHeight = "18px";
    namePlate.style.textAlign = "center";
  }else{
    namePlate.innerHTML = ownName.replace(/\[[0-9]+\]/,"");
    console.log(userID);
    console.log(icons.length);
    console.log(icons[userID]);
    namePlate.previousSibling.outerHTML = icons[userID].outerHTML;
  }
}

function setIcon(id,icon,isPms){
  if(!icons[id]){
    loadIcon(id);
    setTimeout(setIcon,5000,id,icon,isPms);
    return;
  }
  icon.appendChild(icons[id].cloneNode());
  if(isPms && icons[id].getAttribute("colorless")=="false"){
    let c = invertIcon(icon.children[0],id);
    icon.innerHTML = ""
    icon.appendChild(c);
  }
  icon.children[0].style.transform = "translateY(-50%)";
  icon.children[0].style.top = "50%";
  icon.children[0].style.position = "relative";
  icon.children[0].style.width = "58px";
}

function invertIcon(icon,id){
  let canvas = document.createElement("canvas");
  canvas.width = 58;
  canvas.height = 58;
  let ctx = canvas.getContext("2d");
  ctx.drawImage(icon,0,0,58,58);
  let imgdata = ctx.getImageData(0,0,58,58);
  let iconColor = iconColors[id];
  if(arrayEqual(iconColor,[63,63,63,1],false))
    iconColor = [0,0,0,1];
  for(let i=0;i<imgdata.data.length;i+=4){
    let color = [];
    color[0] = imgdata.data[i]
    color[1] = imgdata.data[i+1]
    color[2] = imgdata.data[i+2]
    color[3] = 1;
    if(arrayEqual(color,iconColor,true)){
      let c = 255;
      if(arrayEqual(color,[255,255,255,1],true))
        c = 0;
      imgdata.data[i] = c;
      imgdata.data[i+1] = c;
      imgdata.data[i+2] = c;
    } else if(arrayEqual(color,[255,255,255,1],true) || arrayEqual(color,[0,0,0,1],true)){
      imgdata.data[i] = iconColor[0];
      imgdata.data[i+1] = iconColor[1];
      imgdata.data[i+2] = iconColor[2];
    }else{
      imgdata.data[i] = 255-imgdata.data[i];
      imgdata.data[i+1] = 255-imgdata.data[i+1];
      imgdata.data[i+2] = 255-imgdata.data[i+2];
    }
  }
  ctx.putImageData(imgdata,0,0);
  return canvas;
}

function arrayEqual(a,b,fudge=false){
  if(a.length!=b.length)
    return false;
  if(fudge && deltaE(a,b)<10)
    return true;
  for(let i=0;i<a.length;i++)
    if(a[i]!=b[i] && !(fudge && deltaE(a,b)<10))
      return false;
  return true;
}

function deltaE(rgbA, rgbB) {
  let labA = rgb2lab(rgbA);
  let labB = rgb2lab(rgbB);
  let deltaL = labA[0] - labB[0];
  let deltaA = labA[1] - labB[1];
  let deltaB = labA[2] - labB[2];
  let c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
  let c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
  let deltaC = c1 - c2;
  let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
  let sc = 1.0 + 0.045 * c1;
  let sh = 1.0 + 0.015 * c1;
  let deltaLKlsl = deltaL / (1.0);
  let deltaCkcsc = deltaC / (sc);
  let deltaHkhsh = deltaH / (sh);
  let i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
  return i < 0 ? 0 : Math.sqrt(i);
}

function rgb2lab(rgb){
  let r = rgb[0] / 255, g = rgb[1] / 255, b = rgb[2] / 255, x, y, z;
  r = (r > 0.04045) ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
  g = (g > 0.04045) ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
  b = (b > 0.04045) ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
  x = (x > 0.008856) ? Math.pow(x, 1/3) : (7.787 * x) + 16/116;
  y = (y > 0.008856) ? Math.pow(y, 1/3) : (7.787 * y) + 16/116;
  z = (z > 0.008856) ? Math.pow(z, 1/3) : (7.787 * z) + 16/116;
  return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)]
}

function getOnlineUsers(){
  let onlineList = document.getElementsByClassName("nicklist tab-invisible dynamicpanel qwebirc-qui rightboundpanel")[0];
  let online = onlineList.getElementsByTagName("a");
  let people = [];
  for(let i=0;i<online.length;i++){
    let p = {id:"",display:""};
    p.id = online[i].children[0].innerHTML.replace(prefixes,"");
    p.display = p.id.replace(prefixes,"").replace(/^\[[0-9]+\]/,"");
    people[i] = p;
  }
  return people;
}

function createPmList(name){
  let mlist = document.createElement("div");
  mlist.style.background = "rgba(0,0,0,0.75)";
  mlist.style.overflowY = "scroll";
  mlist.style.overflowX = "hidden";
  mlist.style.width = "100%";
  mlist.style.height = ((18*2+20*2)*4+160)+"px";;
  mlist.style.position = "fixed";
  mlist.style.display = "none";
  mlist.setAttribute("class","drrrPmList");
  mlist.id = name;
  let r = document.createAttribute("revealed");
  r.value = false;
  mlist.setAttributeNode(r);
  let u = document.createAttribute("unread");
  u.value = 0;
  mlist.setAttributeNode(u);
  return mlist;
}

function createSettingsWindow(){
  let settingsWindow = document.createElement("div");
  settingsWindow.style.position = "fixed";
  settingsWindow.style.left = (document.getElementsByClassName("drrrToggle")[0].getBoundingClientRect().left)+"px";
  settingsWindow.style.width = "170px";
  settingsWindow.style.top = "16px";
  settingsWindow.style.display = "none";
  settingsWindow.style.background = "#EEEEEE";
  settingsWindow.style.border = "4px solid #FEFEFE";
  document.body.appendChild(settingsWindow);

  let label = document.createElement("div");
  label.innerHTML = "Volume";
  label.style.position = "relative";
  label.style.transform = "translate(-50%)";
  label.style.left = "50%";
  label.style.width = "-moz-max-content";
  label.style.maxWidth = "fit-content";
  settingsWindow.appendChild(label);
  let volumeSlider = document.createElement("input");
  volumeSlider.type = "range";
  volumeSlider.step = "any";
  volumeSlider.min = 1;
  volumeSlider.max = 9;
  volumeSlider.value = 3;
  volumeSlider.style.width = "160px";
  volumeSlider.style.position = "relative";
  volumeSlider.style.transform = "translate(-50%)";
  volumeSlider.style.left = "50%";
  volumeSlider.id = "volumeSlider";
  settingsWindow.appendChild(volumeSlider);
  let volumeBox = document.createElement("input");
  volumeBox.type = "number";
  volumeBox.step = "any";
  volumeBox.max = 300;
  volumeBox.min = 100/3;
  volumeBox.value = 100;
  volumeBox.style.width = "66px";
  volumeBox.style.position = "relative";
  volumeBox.style.transform = "translate(-50%)";
  volumeBox.style.left = "50%";
  settingsWindow.appendChild(volumeBox);

  volumeSlider.oninput = ()=>{volumeBox.value = volumeSlider.value*100/3;};
  volumeBox.oninput = ()=>{volumeSlider.value = volumeBox.value*3/100;};
  volumeSlider.onchange = ()=>{augain.gain.value = volumeSlider.value; saveCookie("sound",(document.getElementsByClassName("drrrToggle")[2].getAttribute("on"))+"-"+volumeSlider.value);};
  volumeBox.onchange = volumeSlider.onchange;

  let soundSetting = getCookie("sound");
  if(soundSetting)
    soundSetting = soundSetting.split("-")[1];
  else{
    soundSetting = "1";
    saveCookie("sound","off-1");
  }
  volumeSlider.value = parseFloat(soundSetting);
  volumeBox.value = volumeSlider.value*100/3;
  volumeSlider.onchange();

  let inflateSetting = getCookie("inflate");
  let inflateOn = "";
  let inflateFPS = 0;
  if(inflateSetting){
    inflateOn = inflateSetting.split("-")[0];
    inflateFPS = inflateSetting.split("-")[1];
  }else{
    saveCookie("inflate","true");
    inflateOn = "true";
    inflateFPS = 30;
  }

  let br = document.createElement("br");
  settingsWindow.appendChild(br);

  let inflateBox = document.createElement("input");
  inflateBox.type = "checkbox";
  inflateBox.name = "inflateSetting";
  inflateBox.checked = inflateOn=="true";
  inflateBox.id = "inflateSetting";
  let inflateLabel = document.createElement("label");
  inflateLabel.forHTML = "inflateSetting";
  inflateLabel.innerHTML = "Inflating Bubbles";
  let inflateTable = document.createElement("table");
  let inflateTr = document.createElement("tr");
  let inflateTd1 = document.createElement("td");
  let inflateTd2 = document.createElement("td");
  inflateTd1.appendChild(inflateLabel);
  inflateTd2.appendChild(inflateBox);
  inflateTr.appendChild(inflateTd1);
  inflateTr.appendChild(inflateTd2);
  inflateTable.appendChild(inflateTr);
  settingsWindow.appendChild(inflateTable);
  let inflateFPSLabel = document.createElement("div");
  inflateFPSLabel.innerHTML = "FPS";
  inflateFPSLabel.style.position = "relative";
  inflateFPSLabel.style.transform = "translate(-50%)";
  inflateFPSLabel.style.left = "50%";
  inflateFPSLabel.style.width = "-moz-max-content";
  inflateFPSLabel.style.maxWidth = "fit-content";
  settingsWindow.appendChild(inflateFPSLabel);
  let inflateFPSSlider = document.createElement("input");
  inflateFPSSlider.type = "range";
  inflateFPSSlider.step = 1;
  inflateFPSSlider.min = 5;
  inflateFPSSlider.max = 250;
  inflateFPSSlider.value = inflateFPS?inflateFPS:30;
  inflateFPSSlider.style.width = "160px";
  inflateFPSSlider.style.position = "relative";
  inflateFPSSlider.style.transform = "translate(-50%)";
  inflateFPSSlider.style.left = "50%";
  inflateFPSSlider.id = "inflateFPSSlider";
  settingsWindow.appendChild(inflateFPSSlider);
  let inflateFPSBox = document.createElement("input");
  inflateFPSBox.type = "number";
  inflateFPSBox.step = "any";
  inflateFPSBox.max = 250;
  inflateFPSBox.min = 5;
  inflateFPSBox.value = inflateFPS?inflateFPS:30;
  inflateFPSBox.style.width = "66px";
  inflateFPSBox.style.position = "relative";
  inflateFPSBox.style.transform = "translate(-50%)";
  inflateFPSBox.style.left = "50%";
  settingsWindow.appendChild(inflateFPSBox);

  inflateBox.onchange = ()=>{saveCookie("inflate",""+inflateBox.checked+"-"+inflateFPSSlider.value);};
  inflateFPSBox.oninput = ()=>{inflateFPSSlider.value = inflateFPSBox.value;};
  inflateFPSSlider.oninput = ()=>{inflateFPSBox.value = inflateFPSSlider.value;};
  inflateFPSBox.onchange = ()=>{inflateBox.onchange();};
  inflateFPSSlider.onchange = ()=>{inflateBox.onchange();};

  return settingsWindow;
}

function getCookie(name){
  let cookies = document.cookie.split(";");
  for(let i=0;i<cookies.length;i++){
    let pair = cookies[i].split("=");
    if(pair[0] == " "+name){
      return pair[1];
    }
  }
  return null;
}

function saveCookie(name,value){
  let date = new Date();
  date.setTime(date.getTime()+(1000*60*60*24*365));
  document.cookie = name+"="+value+"; expires="+encodeURIComponent(date.toUTCString())+";"
}

async function animateNewMessage(reply,replyBubble,mb,height,width,nameHeight,i,j=0,startTime=new Date()){
  let thisTime = new Date();
  let fps = document.getElementById("inflateFPSSlider")?document.getElementById("inflateFPSSlider").value:30;
  let ms = Math.floor(1000/fps);
  if(thisTime.value<=startTime.value)
    thisTime = new Date(startTime.value+ms);
  if(i>200){
    reply.style.marginBottom = mb+"px";
    replyBubble.style.width = "auto";
    replyBubble.style.height = "auto";
    replyBubble.style.borderWidth = "4px";
    replyBubble.children[0].style.fontSize = "18px";
    replyBubble.children[0].style.lineHeight = "20px";
    replyBubble.children[0].style.display = "block";
    replyBubble.children[1].style.display = "block";
    return;
  }
  let overpop = 1.1;
  setTimeout(animateNewMessage,ms,reply,replyBubble,mb,height,width,nameHeight,i+6*(thisTime-startTime)/4,j,thisTime);
  replyBubble.style.width = (width*overpop*i/200)+"px"
  replyBubble.style.height = (height*overpop*i/200)+"px";
  replyBubble.style.borderWidth = (4*overpop*i/200)+"px"
  replyBubble.children[0].style.display = "none";
  replyBubble.children[1].style.display = "none";
  if(height*overpop*i/200>18*2){
    if(j == 0)
      j = i;
    replyBubble.children[0].style.display = "block";
    replyBubble.children[1].style.display = "block";
    replyBubble.children[0].style.fontSize = (18*overpop*(i-j)/(200-j))+"px";
    replyBubble.children[0].style.lineHeight = (20*overpop*(i-j)/(200-j))+"px";
  }
  reply.style.marginBottom = Math.min(nameHeight,Math.max(58+(nameHeight+8)*1.5-replyBubble.offsetHeight,0))+"px";
}

function formatSpan(m){
  let strike = String.fromCharCode(0x1E);
  let italic = String.fromCharCode(0x1D);
  let mono = String.fromCharCode(0x11);
  let mo = m.getAttribute("class")?m.getAttribute("class"):"";
  m = m.innerHTML;
  if(m.match(new RegExp("("+mono+"|"+italic+"|"+strike+")"))){
    let ind = Math.min(io(m,mono),io(m,italic),io(m,strike));
    let ms = m.slice(ind);
    let mc = mo.match(/Xc[0-9][0-9]*/)?textColor[parseInt(mo.match(/Xc[0-9][0-9]*/)[0].replace(/Xb*c/,""))]:"";
    let mb = mo.match(/Xbc[0-9][0-9]*/)?textColor[parseInt(mo.match(/Xbc[0-9][0-9]*/)[0].replace(/Xb*c/,""))]:"";
    m = m.slice(0,ind)+getFormatted(ms,mo.match(/Xu/),mo.match(/Xb$/),mc,mb);
  }else{
    let mc = mo.match(/Xc[0-9][0-9]*/)?textColor[parseInt(mo.match(/Xc[0-9][0-9]*/)[0].replace(/Xb*c/,""))]:"";
    let mb = mo.match(/Xbc[0-9][0-9]*/)?textColor[parseInt(mo.match(/Xbc[0-9][0-9]*/)[0].replace(/Xb*c/,""))]:"";
    let mtd = ""+(mo.match(/Xu/)?" text-decoration: underline;":"");
    let mf = ""+mtd+(mo.match(/Xb$/)?" font-weight: bold;":"");
    m = "<span style='color:"+mc+"; background-color:"+mb+";"+mf+"'>"+m+"</span>";
  }
  return m;
}

function io(m,f){
  return Math.sign(m.indexOf(f))>-1?m.indexOf(f):100000;
}

function getFormatted(m,u,b,cf,cb){
  let strike = String.fromCharCode(0x1E);
  let italic = String.fromCharCode(0x1D);
  let mono = String.fromCharCode(0x11);
  if(!m)
    return "";
  let c = m.charAt(0);
  let sp = "<span style='text-decoration:"+((c==strike?"line-through ":"")+(u?"underline":"")+";")+(c==italic?"font-style: italic; ":"")+(c==mono?"font-family: monospace;":"")+(cf?" color: "+cf+";":"")+(cb?" background-color: "+cb+";":"")+"'>";
  m = m.substring(1);
  if(m.match(new RegExp("("+strike+"|"+italic+"|"+mono+")"))){
    let ind = Math.min(io(m,mono),io(m,italic),io(m,strike));
    let ms = m.slice(ind);
    m = m.slice(0,ind)+getFormatted(ms,false,false,false,false);
  }
  return sp+m+"</span>";
}

async function upload(e){
  e.preventDefault();
  if(!e.dataTransfer.files[0])
    return;
  let r = new FileReader();
  r.readAsDataURL(e.dataTransfer.files[0]);
  r.onload = ()=>{
    let l = request("https://tinyurl.com/api-create.php?url="+r.result);
    let t = document.getElementsByTagName("textarea")[0];
    let tstart = t.value.slice(0,t.selectionStart);
    let tend = t.value.slice(t.selectionStart);
    t.value = tstart+(tstart.match(/ $/)&&tstart!=""?"":" ")+l+(tend.match(/^ /)?"":" ")+tend;
  }
}