function createtag(name, tc, tagid) {
	var newtag = document.createElement("div")
	newtag.classList.toggle("tag")
	newtag.classList.toggle("tc" + (tc || "New"))
	if(tagid) {
		newtag.setAttribute("data-tagid", tagid)
	}
	newtag.innerText = name
	return newtag
}

var acTimer;

function tagbox_updateformdata() {
	document.getElementById(document.querySelector("div.tagbox").getAttribute("data-formparaminputid")).value = Array.from(document.querySelectorAll("div.tagbox div.tag")).map(function(a) {return a.getAttribute("data-tagid")}).join(",")
}

document.getElementById(document.querySelector("div.tagbox").getAttribute("data-formid")).addEventListener("submit", tagbox_updateformdata)

document.querySelector("div.tagbox").onclick = function(ev) {
	this.querySelector('span').focus()
}

var UnknownTagsMode = document.querySelector("div.tagbox").getAttribute("data-unknowntags") !== null

document.querySelector("div.tagbox span").onkeydown = function(ev) {
	if(ev.keyCode == 13) {
		ev.preventDefault()
		
		if(document.querySelector("div.tagbox span").innerText.length) {
			var from = document.querySelector("div.autocomplete > div.tag.selected") || document.querySelectorAll("div.autocomplete > div.tag")[0]
			
			if(from) {
				if(!document.querySelector("div.tagbox div.tag[data-tagid='"+from.getAttribute("data-tagid")+"']")) {
					from.classList.remove("selected")
					
					document.querySelector("div.tagbox").insertBefore(from, document.querySelector("div.tagbox span"))
					document.querySelector("div.tagbox").insertBefore(document.createTextNode("\n"), document.querySelector("div.tagbox span"))
				}
			}
			
			document.querySelector("div.tagbox span").innerText = ""
			var ac = document.querySelector(".autocomplete")
			ac.style.visibility = "hidden"
		} else {
			document.getElementById(document.querySelector("div.tagbox").getAttribute("data-formid")).querySelector("input[type='submit']").click()
		}
	} else if(ev.keyCode == 40) {
		ev.preventDefault()
		var sel = document.querySelector("div.autocomplete > div.tag.selected")
		if(sel) {
			sel.classList.toggle("selected")
			sel = sel.nextElementSibling
		} else {
			sel = document.querySelectorAll("div.autocomplete > div.tag")[0]
		}
		if(sel) sel.classList.toggle("selected")
	} else if(ev.keyCode == 38) {
		ev.preventDefault()
		var sel = document.querySelector("div.autocomplete > div.tag.selected")
		if(sel) {
			sel.classList.toggle("selected")
			sel = sel.previousElementSibling
		} else {
			var asdf = document.querySelectorAll("div.autocomplete > div.tag")
			sel = asdf[asdf.length - 1]
		}
		if(sel) sel.classList.toggle("selected")
	} else if(ev.keyCode == 8 && !document.querySelector("div.tagbox span").innerText.length) {
		ev.preventDefault()
		
		var asdf = document.querySelectorAll("div.tagbox div.tag")
		if(asdf.length > 0) {
			asdf = asdf[asdf.length - 1]
			if(asdf) asdf.parentNode.removeChild(asdf)
		}
	}
}

document.querySelector("div.tagbox span").oninput = function(ev) {
	if(document.querySelector("div.tagbox span").innerText.length) {
		document.querySelector("div.tagbox > p").style.visibility = "hidden"
		
		if(acTimer) {
			clearTimeout(acTimer)
		}
		acTimer = setTimeout(function() {
			var ajax = new XMLHttpRequest()
			ajax.open("GET", "/autocomp?q=" + encodeURIComponent(document.querySelector("div.tagbox span").innerText) + (document.querySelector("div.tagbox").getAttribute("data-over18") == "true" ? "&a=" : ""), true)
			ajax.onreadystatechange = function() {
				if(ajax.readyState == 4 && ajax.status == 200) {
					var ac = document.querySelector(".autocomplete")
					ac.style.visibility = ""
					while(ac.firstChild) ac.removeChild(ac.firstChild)
					if(!UnknownTagsMode && ajax.responseText == "") {
						ac.innerText = "No such tags found"
					} else {
						ajax.responseText.split("\n").slice(0, -1).forEach(function(line) {
							ac.insertBefore(createtag(line.split(",")[1], line.split(",")[2], line.split(",")[0]), null)
						})
						
						if(UnknownTagsMode) {
							ac.insertBefore(createtag(document.querySelector("div.tagbox span").innerText, null, null), null);
						}
					}
				}
			}
			ajax.send()
		}, 250)
	} else {
		if(!document.querySelectorAll(".tagbox > div.tag").length) document.querySelector("div.tagbox > p").style.color = ""
		
		document.querySelector(".autocomplete").style.visibility = "hidden"
		
		clearTimeout(acTimer)
		acTimer = undefined
	}
}