gosora/public/global.js

'use strict';
var formVars={};
var alertMapping={};
var alertList=[];
var alertCount=0;
var moreTopicCount=0;
var conn=false;
var selectedTopics=[];
var attachItemCallback=()=>{}
var quoteItemCallback=()=>{}
var baseTitle=document.title;
var wsBackoff=0;
var noAlerts=false;

// Topic move
var forumToMoveTo=0;

function pushNotice(msg) {
	let aBox = document.getElementsByClassName("alertbox")[0];
	let n = document.createElement('div');
	n.innerHTML = Tmpl_notice(msg).trim();
	aBox.appendChild(n);
	runInitHook("after_notice");
}

// TODO: Write a friendlier error handler which uses a .notice or something, we could have a specialised one for alerts
function ajaxError(xhr,status,e) {
	log("The AJAX request failed");
	log("xhr",xhr);
	log("status",status);
	log("e",e);
	if(status=="parsererror") log("The server didn't respond with a valid JSON response");
	console.trace();
}

function postLink(ev) {
	ev.preventDefault();
	let formAction = $(ev.target).closest('a').attr("href");
	$.ajax({ url:formAction, type:"POST", dataType:"json", error: ajaxError, data: {js: 1} });
}

function bindToAlerts() {
	log("bindToAlerts");
	$(".alertItem.withAvatar a").unbind("click");
	$(".alertItem.withAvatar a").click(function(ev) {
		ev.stopPropagation();
		ev.preventDefault();
		$.ajax({
			url: "/api/?a=set&m=dismiss-alert",
			type: "POST",
			dataType: "json",
			data: { id: $(this).attr("data-asid") },
			//error: ajaxError,
			success: () => {
				window.location.href = this.getAttribute("href");
			}
		});
	});
}

function addAlert(msg,notice=false) {
	var mmsg = msg.msg;
	if(mmsg[0]==".") mmsg = phraseBox["alerts"]["alerts"+mmsg];
	if("sub" in msg) {
		for(var i=0; i<msg.sub.length; i++) mmsg = mmsg.replace("\{"+i+"\}",msg.sub[i]);
	}

	let aItem = Tmpl_alert({
		ASID: msg.id,
		Path: msg.path,
		Avatar: msg.img || "",
		Message: mmsg
	})
	//alertMapping[msg.id] = aItem;
	let div = document.createElement('div');
	div.innerHTML = aItem.trim();
	alertMapping[msg.id] = div.firstChild;
	alertList.push(msg.id);

	if(notice) {
		// TODO: Add some sort of notification queue to avoid flooding the end-user with notices?
		// TODO: Use the site name instead of "Something Happened"
		if(Notification.permission==="granted") {
			var n = new Notification("Something Happened",{
				body: mmsg,
				icon: msg.img,
			});
			setTimeout(n.close.bind(n),8000);
		}
	}

	runInitHook("after_add_alert");
}

function updateAlertList(menuAlerts) {
	log("enter updateAlertList");
	log("alertList:",alertList);
	log("alertMapping:",alertMapping);
	log("alertCount:",alertCount);
	let alertListNode = menuAlerts.getElementsByClassName("alertList")[0];
	let alertCounterNode = menuAlerts.getElementsByClassName("alert_counter")[0];
	alertCounterNode.textContent = "0";
	
	alertListNode.innerHTML = "";
	let any = false;
	let j = 0;
	for(var i=0; i<alertList.length && j<8; i++) {
		any = true;
		alertListNode.appendChild(alertMapping[alertList[i]]);
		//outList += alertMapping[alertList[i]];
		j++;
	}
	if(!any) alertListNode.innerHTML = "<div class='alertItem'>"+phraseBox["alerts"]["alerts.no_alerts"]+"</div>";

	if(alertCount!=0) {
		alertCounterNode.textContent = alertCount;
		menuAlerts.classList.add("has_alerts");
		let nTitle = "("+alertCount+") "+baseTitle;
		if(document.title!=nTitle) document.title = nTitle;
	} else {
		menuAlerts.classList.remove("has_alerts");
		if(document.title!=baseTitle) document.title = baseTitle;
	}

	bindToAlerts();
	log("alertCount",alertCount)
	runInitHook("after_update_alert_list",alertCount);
}

function setAlertError(menuAlerts,msg) {
	let n = menuAlerts.getElementsByClassName("alertList")[0];
	n.innerHTML = "<div class='alertItem'>"+msg+"</div>";
}

var alertsInitted = false;
var lastTc = 0;
function loadAlerts(menuAlerts,eTc=false) {
	if(!alertsInitted) return;
	let tc = "";
	if(eTc && lastTc!=0) tc = "&t="+lastTc+"&c="+alertCount;
	$.ajax({
		type:'get',
		dataType:'json',
		url:'/api/?m=alerts'+tc,
		success: data => {
			if("errmsg" in data) {
				setAlertError(menuAlerts,data.errmsg)
				return;
			}
			if(!eTc) {
				alertList=[];
				alertMapping={};
			}
			if(!data.hasOwnProperty("msgs")) data = {"msgs":[],"count":alertCount,"tc":lastTc};
			/*else if(data.count != (alertCount + data.msgs.length)) tc = false;
			if(eTc && lastTc!=0) {
				for(var i in data.msgs) wsAlertEvent(data.msgs[i]);
			} else {*/
			log("data",data);
			for(var i in data.msgs) addAlert(data.msgs[i]);
			alertCount = data.count;
			updateAlertList(menuAlerts);
			try {
				localStorage.setItem("alertList",JSON.stringify(alertList));
				localStorage.setItem("alertMapping",JSON.stringify(alertMapping));
				localStorage.setItem("alertCount",alertCount);
			} catch(e) {
				localStorage.clear();
			}
			//}
			lastTc = data.tc;
		},
		error: (magic,status,er) => {
			let errtxt = "Unable to get the alerts";
			try {
				let dat = JSON.parse(magic.responseText);
				if("errmsg" in dat) errtxt = dat.errmsg;
			} catch(e) {
				log(magic.responseText);
				log(e);
			}
			log("er",er);
			setAlertError(menuAlerts,errtxt);
		}
	});
}

function SplitN(data,ch,n) {
	var o = [];
	if(data.length===0) return o;

	var lastI = 0;
	var j = 0;
	var lastN = 1;
	for(let i=0; i<data.length; i++) {
		if(data[i]===ch) {
			o[j++] = data.substring(lastI,i);
			lastI = i;
			if(lastN===n) break;
			lastN++;
		}
	}
	if(data.length > lastI) o[o.length-1] += data.substring(lastI);
	return o;
}

function wsAlertEvent(dat) {
	log("wsAlertEvent",dat)
	addAlert(dat,true);
	alertCount++;

	let aTmp = alertList;
	alertList = [alertList[alertList.length-1]];
	aTmp = aTmp.slice(0,-1);
	for(let i=0; i<aTmp.length; i++) alertList.push(aTmp[i]);
	// TODO: Add support for other alert feeds like PM Alerts
	let n = document.getElementById("general_alerts");
	// TODO: Make sure we update alertCount here
	lastTc = 0;
	updateAlertList(n/*,alist*/);
}

function runWebSockets(resume=false) {
	let s = "";
	if(window.location.protocol == "https:") s = "s";
	conn = new WebSocket("ws"+s+"://" + document.location.host + "/ws/");

	conn.onerror = e => {
		log(e);
	}

	// TODO: Sync alerts, topic list, etc.
	conn.onopen = () => {
		log("The WebSockets connection was opened");
		if(resume) conn.send("resume " + document.location.pathname + " " + Math.round((new Date()).getTime() / 1000) + '\r');
		else conn.send("page " + document.location.pathname + '\r');
		// TODO: Don't ask again, if it's denied. We could have a setting in the UCP which automatically requests this when someone flips desktop notifications on
		if(me.User.ID > 0) Notification.requestPermission();
	}

	conn.onclose = () => {
		conn = false;
		log("The WebSockets connection was closed");
		let backoff = 0.8;
		if(wsBackoff < 0) wsBackoff = 0;
		else if(wsBackoff > 12) backoff = 11;
		else if(wsBackoff > 5) backoff = 5;
		wsBackoff++;

		setTimeout(() => {
			if(!noAlerts) {
				let nl = document.getElementsByClassName("menu_alerts");
				for(var i=0; i < nl.length; i++) loadAlerts(nl[i],true);
			}
			runWebSockets(true);
		}, backoff * 60 * 1000);

		if(wsBackoff > 0) {
			if(wsBackoff <= 5) setTimeout(() => wsBackoff--, 5.5 * 60 * 1000);
			else if(wsBackoff <= 12) setTimeout(() => wsBackoff--, 11.5 * 60 * 1000);
			else setTimeout(() => wsBackoff--, 20 * 60 * 1000);
		}
	}

	conn.onmessage = (event) => {
		if(!noAlerts && event.data[0] == "{") {
			log("json message");
			let data = "";
			try {
				data = JSON.parse(event.data);
			} catch(e) {
				log(e);
				return;
			}

			if("msg" in data) wsAlertEvent(data);
			else if("event" in data) {
				if(data.event=="dismiss-alert"){
					Object.keys(alertMapping).forEach((key) => {
						if(key!=data.id) return;
						alertCount--;
						let index = -1;
						for(var i=0; i < alertList.length; i++) {
							if(alertList[i]==key) {
								alertList[i] = 0;
								index = i;
							}
						}
						if(index==-1) return;

						for(var i = index; (i+1) < alertList.length; i++) alertList[i] = alertList[i+1];
						alertList.splice(alertList.length-1,1);
						delete alertMapping[key];

						// TODO: Add support for other alert feeds like PM Alerts
						let generalAlerts = document.getElementById("general_alerts");
						if(alertList.length < 8) loadAlerts(generalAlerts,true);
						else updateAlertList(generalAlerts);
					});
				}
			} else if("Topics" in data) {
				log("topic in data");
				log("data",data);
				// TODO: Handle desyncs more gracefully?
				// TODO: Send less unneccessary data?
				let topic = data.Topics[0];
				if(topic===undefined){
					log("empty topic list");
					return;
				}
				if("mod" in data) {
					topic.CanMod = data.mod==1 || data.mod[0]==1;
					if(data.lock==1) {
						$(".val_lock").each(function(){
							this.classList.remove("auto_hide");
						});
					}
					if(data.move==1) {
						$(".val_move").each(function(){
							this.classList.remove("auto_hide");
						});
					}
				}
				// TODO: Fix the data race where the function hasn't been loaded yet
				let renTopic = Tmpl_topics_topic(topic);
				$(".topic_row[data-tid='"+topic.ID+"']").addClass("ajax_topic_dupe");

				let node = $(renTopic);
				node.addClass("new_item hide_ajax_topic");
				log("Prepending to topic list");
				$(".topic_list").prepend(node);
				moreTopicCount++;

				let blocks = document.getElementsByClassName("more_topic_block_initial");
				for(let i=0; i<blocks.length; i++) {
					let block = blocks[i];
					block.classList.remove("more_topic_block_initial");
					block.classList.add("more_topic_block_active");

					log("phraseBox",phraseBox);
					let msgBox = block.getElementsByClassName("more_topics")[0];
					msgBox.innerText = phraseBox["topic_list"]["topic_list.changed_topics"].replace("%d",moreTopicCount);
				}
			} else log("unknown message",data);
		}

		let messages = event.data.split('\r');
		for(var i=0; i<messages.length; i++) {
			let message = messages[i];
			//log("message",message);
			let msgblocks = SplitN(message," ",3);
			if(msgblocks.length < 3) continue;
			if(message.startsWith("set ")) {
				let oldInnerHTML = document.querySelector(msgblocks[1]).innerHTML;
				if(msgblocks[2]==oldInnerHTML) continue;
				document.querySelector(msgblocks[1]).innerHTML = msgblocks[2];
			} else if(message.startsWith("set-class ")) {
				// Fix to stop the inspector from getting all jittery
				let oldClassName = document.querySelector(msgblocks[1]).className;
				if(msgblocks[2]==oldClassName) continue;
				document.querySelector(msgblocks[1]).className = msgblocks[2];
			}
		}
	}
}

// TODO: Surely, there's a prettier and more elegant way of doing this?
function getExt(name) {
	if(!(name.indexOf('.') > -1)) throw("This file doesn't have an extension");
	return name.split('.').pop();
}

(() => {
	addInitHook("pre_init", () => {
		runInitHook("pre_global");
		log("before notify on alert")
		// We can only get away with this because template_alert has no phrases, otherwise it too would have to be part of the "dance", I miss Go concurrency :(
		log("noAlerts:",noAlerts);
		if(!noAlerts) {
		notifyOnScriptW("tmpl_alert", e => {
			if(e!=undefined) log("failed alert? why?",e)
		}, () => {
			if(!Tmpl_alert) throw("tmpl func not found");
			addInitHook("after_phrases", () => {
				// TODO: The load part of loadAlerts could be done asynchronously while the update of the DOM could be deferred
				$(document).ready(() => {
					log("checking local storage cache");
					alertsInitted = true;
					let al = document.getElementsByClassName("menu_alerts");
					let sAlertList = localStorage.getItem("alertList");
					let sAlertMapping = localStorage.getItem("alertMapping");
					let sAlertCount = localStorage.getItem("alertCount");
					if(sAlertList!=null && sAlertList!="" &&
						sAlertMapping!=null && sAlertMapping!="" &&sAlertCount!=null && sAlertCount!="" && sAlertCount!="0"
					) {
						log("sAlertList",sAlertList)
						log("sAlertMapping",sAlertMapping)
						log("sAlertCount",sAlertCount)
						alertList = JSON.parse(sAlertList)
						alertMapping = JSON.parse(sAlertMapping)
						alertCount =  parseInt(sAlertCount)
						log("alertList",alertList)
						log("alertMapping",alertMapping)
						log("alertCount",alertCount)
						for(var i=0; i<al.length; i++) loadAlerts(al[i],true);
					} else for(var i=0; i<al.length; i++) loadAlerts(al[i]);
					if(window["WebSocket"]) runWebSockets();
				});
			});
		});
		} else {
			addInitHook("after_phrases", () => {
				$(document).ready(() => {
					if(window["WebSocket"]) runWebSockets();
				});
			});
		}

		$(document).ready(mainInit);
	});
})();

// TODO: Use these in .filter_item and pass back an item count from the backend to work with here
// Ported from common/parser.go
function PageOffset(count,page,perPage) {
	let offset = 0;
	let lastPage = LastPage(count, perPage)
	if(page > 1) offset = (perPage * page) - perPage;
	else if (page == -1) {
		page = lastPage;
		offset = (perPage * page) - perPage;
	} else page = 1;

	// We don't want the offset to overflow the slices, if everything's in memory
	//if(offset >= (count - 1)) offset = 0;
	return {Offset:offset,Page:page,LastPage:lastPage};
}
function LastPage(count,perPage) {
	return (count / perPage) + 1
}
function Paginate(currentPage,lastPage,maxPages) {
	let diff = lastPage - currentPage;
	let pre = 3;
	if(diff < 3) pre = maxPages - diff;
	
	let page = currentPage - pre;
	if(page < 0) page = 0;
	let o = [];
	while(o.length < maxPages && page < lastPage){
		page++;
		o.push(page);
	}
	return o;
}

function mainInit(){
	log("enter mainInit");
	runInitHook("start_init");

	$(".more_topics").click(ev => {
		ev.preventDefault();
		let blocks = document.getElementsByClassName("more_topic_block_active");
		for(let i=0; i<blocks.length; i++) {
			let bl = blocks[i];
			bl.classList.remove("more_topic_block_active");
			bl.classList.add("more_topic_block_initial");
		}
		$(".ajax_topic_dupe").fadeOut("slow", function(){
			$(this).remove();
		});
		$(".hide_ajax_topic").removeClass("hide_ajax_topic"); // TODO: Do Fade
		moreTopicCount = 0;
	})

	$(".add_like,.remove_like").click(function(ev) {
		ev.preventDefault();
		//$(this).unbind("click");
		let target = this.closest("a").getAttribute("href");
		log("target",target);

		let controls = this.closest(".controls");
		let hadLikes = controls.classList.contains("has_likes");
		let likeCountNode = controls.getElementsByClassName("like_count")[0];
		log("likeCountNode",likeCountNode);
		if(this.classList.contains("add_like")) {
			this.classList.remove("add_like");
			this.classList.add("remove_like");
			if(!hadLikes) controls.classList.add("has_likes");
			this.closest("a").setAttribute("href",target.replace("like","unlike"));
			likeCountNode.innerHTML = parseInt(likeCountNode.innerHTML) + 1;
		} else {
			this.classList.remove("remove_like");
			this.classList.add("add_like");
			let likeCount = parseInt(likeCountNode.innerHTML);
			if(likeCount==1) controls.classList.remove("has_likes");
			this.closest("a").setAttribute("href",target.replace("unlike","like"));
			likeCountNode.innerHTML = parseInt(likeCountNode.innerHTML) - 1;
		}

		//let likeButton = this;
		$.ajax({
			url:target,
			type:"POST",
			dataType:"json",
			data: { js: 1 },
			error: ajaxError,
			success: function (dat,status,xhr) {
				if("success" in dat && dat["success"] == "1") return;
				// addNotice("Failed to add a like: {err}")
				//likeCountNode.innerHTML = parseInt(likeCountNode.innerHTML)-1;
				log("data",dat);
				log("status",status);
				log("xhr",xhr);
			}
		});
	});

	$(".link_label").click(function(ev) {
		ev.preventDefault();
		let linkSel = $('#'+$(this).attr("data-for"));
		if(!linkSel.hasClass("link_opened")) {
			ev.stopPropagation();
			linkSel.addClass("link_opened");
		}
	});

	function rebuildPaginator(lastPage) {
		let urlParams = new URLSearchParams(window.location.search);
		let page = urlParams.get('page');
		if(page=="") page = 1;

		let pageList = Paginate(page,lastPage,5)
		//$(".pageset").html(Tmpl_paginator({PageList:pageList,Page:page,LastPage:lastPage}));
		let ok = false;
		$(".pageset").each(function(){
			this.outerHTML = Tmpl_paginator({PageList:pageList,Page:page,LastPage:lastPage});
			ok = true;
		});
		if(!ok) $(Tmpl_paginator({PageList:pageList,Page:page,LastPage:lastPage})).insertAfter("#topic_list");
	}

	function rebindPaginator() {
		// TODO: Take mostviewed into account
		// TODO: Get this to work with topics too
		$(".pageitem a").unbind("click");
		$(".pageitem a").click(function(ev) {
			ev.preventDefault();
			let url = "//"+window.location.host+window.location.pathname;
			let urlParams = new URLSearchParams(window.location.search);
			urlParams.set("page",new URLSearchParams(this.getAttribute("href")).get("page"));
			let q = "?";
			for(let item of urlParams.entries()) q += item[0]+"="+item[1]+"&";
			if(q.length>1) q = q.slice(0,-1);

			// TODO: Try to de-duplicate some of these fetch calls
			fetch(url+q+"&js=1",{credentials:"same-origin"})
				.then(r => {
					if(!r.ok) throw(url+q+"&js=1 failed to load");
					return r.json();
				}).then(d => {
					if(!"Topics" in d) throw("no Topics in data");
					let topics = d["Topics"];
					log("ajax navigated to different page");

					// TODO: Fix the data race where the function hasn't been loaded yet
					let out = "";
					for(let i=0;i<topics.length;i++) out += Tmpl_topics_topic(topics[i]);
					$(".topic_list").html(out);

					let obj = {Title:document.title,Url:url+q};
					history.pushState(obj,obj.Title,obj.Url);
					rebuildPaginator(d.LastPage);
					rebindPaginator();
				}).catch(e => {
					log("Unable to get script "+url+q+"&js=1",e);
					console.trace();
				});
		});
	}

	// TODO: Render a headless topics.html instead of the individual topic rows and a bit of JS glue
	$(".filter_item").click(function(ev) {
		if(!window.location.pathname.startsWith("/topics/")) return
		ev.preventDefault();
		let that = this;
		let fid = this.getAttribute("data-fid");
		// TODO: Take mostviewed into account
		let url = "//"+window.location.host+"/topics/?fids="+fid;

		fetch(url+"&js=1",{credentials:"same-origin"})
		.then(r => {
			if(!r.ok) throw(url+"&js=1 failed to load");
			return r.json();
		}).then(d => {
			log("data",d);
			if(!"Topics" in d) throw("no Topics in data");
			let topics = d["Topics"];
			log("ajax navigated to "+that.innerText);
			
			// TODO: Fix the data race where the function hasn't been loaded yet
			let out = "";
			for(let i=0;i<topics.length;i++) out += Tmpl_topics_topic(topics[i]);
			$(".topic_list").html(out);
			//$(".topic_list").addClass("single_forum");

			baseTitle = that.innerText;
			if(alertCount > 0) document.title = "("+alertCount+") "+baseTitle;
			else document.title = baseTitle;
			let obj = {Title:document.title,Url:url};
			history.pushState(obj,obj.Title,obj.Url);
			rebuildPaginator(d.LastPage)
			rebindPaginator();

			$(".filter_item").each(function(){
				this.classList.remove("filter_selected");
			});
			that.classList.add("filter_selected");
			$(".topic_list_title h1").text(that.innerText);
			$(".link_select .link_option .link_recent").attr("href","//"+window.location.host+"/topics/?fids="+fid);
			$(".link_select .link_option .link_most_viewed").attr("href","//"+window.location.host+"/topics/most-viewed/?fids="+fid);
			unbindPage();
			bindPage();
		}).catch(e => {
			log("Unable to get script "+url+"&js=1",e);
			console.trace();
		});
	});

	if(document.getElementById("topicsItemList")!==null) rebindPaginator();
	if(document.getElementById("forumItemList")!==null) rebindPaginator();

	// TODO: Show a search button when JS is disabled?
	$(".widget_search_input").keypress(function(e) {
		if(e.keyCode!='13') return;
		// TODO: Only fire on /topics/
		event.preventDefault();
		// TODO: Take mostviewed into account
		let url = "//"+window.location.host+window.location.pathname;
		let urlParams = new URLSearchParams(window.location.search);
		urlParams.set("q",this.value);
		let q = "?";
		for(let item of urlParams.entries()) q += item[0]+"="+item[1]+"&";
		if(q.length>1) q = q.slice(0,-1);

		// TODO: Try to de-duplicate some of these fetch calls
		fetch(url+q+"&js=1",{credentials:"same-origin"})
			.then(r => {
				if(!r.ok) throw(url+q+"&js=1 failed to load");
				return r.json();
			}).then(d => {
				if(!"Topics" in d) throw("no Topics in data");
				let topics = d["Topics"];
				log("ajax navigated to search page");

				// TODO: Fix the data race where the function hasn't been loaded yet
				let out = "";
				for(let i=0;i<topics.length;i++) out += Tmpl_topics_topic(topics[i]);
				$(".topic_list").html(out);

				baseTitle = phraseBox["topic_list"]["topic_list.search_head"];
				$(".topic_list_title h1").text(phraseBox["topic_list"]["topic_list.search_head"]);
				if(alertCount > 0) document.title = "("+alertCount+") "+baseTitle;
				else document.title = baseTitle;
				let obj = {Title: document.title, Url: url+q};
				history.pushState(obj,obj.Title,obj.Url);
				rebuildPaginator(d.LastPage);
				rebindPaginator();
		}).catch(e => {
			log("Unable to get script "+url+q+"&js=1",e);
			console.trace();
		});
	});

	runInitHook("before_init_bind_page");
	bindPage();
	runInitHook("after_init_bind_page");

	$(".edit_field").click(function(ev) {
		ev.preventDefault();
		let bp = $(this).closest('.editable_parent');
		let block = bp.find('.editable_block').eq(0);
		block.html("<input name='edit_field'value='"+block.text()+"'type='text'><a href='"+$(this).closest('a').attr("href")+"'><button class='submit_edit'type='submit'>Update</button></a>");

		$(".submit_edit").click(function(ev) {
			ev.preventDefault();
			let bp = $(this).closest('.editable_parent');
			let bl = bp.find('.editable_block').eq(0);
			let content = bl.find('input').eq(0).val();
			bl.html(content);

			let formAction = $(this).closest('a').attr("href");
			$.ajax({
				url: formAction+"?s="+me.User.S,
				type:"POST",
				dataType:"json",
				error: ajaxError,
				data: { js: 1, edit_item: content }
			});
		});
	});

	$(".edit_fields").click(function(ev) {
		ev.preventDefault();
		if($(this).find("input").length!==0) return;
		//log("clicked .edit_fields");
		var bp = $(this).closest('.editable_parent');
		bp.find('.hide_on_edit').addClass("edit_opened");
		bp.find('.show_on_edit').addClass("edit_opened");
		bp.find('.editable_block').show();
		bp.find('.editable_block').each(function(){
			var fieldName = this.getAttribute("data-field");
			var fieldType = this.getAttribute("data-type");
			if(fieldType=="list") {
				var fieldValue = this.getAttribute("data-value");
				if(fieldName in formVars) var it = formVars[fieldName];
				else var it = ['No','Yes'];
				var itLen = it.length;
				var out = "";
				for (var i=0; i<itLen; i++) {
					var sel = "";
					if(fieldValue == i || fieldValue == it[i]) {
						sel = "selected ";
						this.classList.remove(fieldName+'_'+it[i]);
						this.innerHTML = "";
					}
					out += "<option "+sel+"value='"+i+"'>"+it[i]+"</option>";
				}
				this.innerHTML = "<select data-field='"+fieldName+"'name='"+fieldName+"'>"+out+"</select>";
			}
			else if(fieldType=="hidden") {}
			else this.innerHTML = "<input name='"+fieldName+"'value='"+this.textContent+"'type='text'>";
		});

		// Remove any handlers already attached to the submitter
		$(".submit_edit").unbind("click");

		$(".submit_edit").click(function(ev) {
			ev.preventDefault();
			var outData = {js: 1}
			var bp = $(this).closest('.editable_parent');
			bp.find('.editable_block').each(function() {
				var fieldName = this.getAttribute("data-field");
				var fieldType = this.getAttribute("data-type");
				if(fieldType=="list") {
					var newContent = $(this).find('select :selected').text();
					this.classList.add(fieldName+'_'+newContent);
					this.innerHTML = "";
				} else if(fieldType=="hidden") {
					var newContent = $(this).val();
				} else {
					var newContent = $(this).find('input').eq(0).val();
					this.innerHTML = newContent;
				}
				this.setAttribute("data-value",newContent);
				outData[fieldName] = newContent;
			});

			let href = $(this).closest('a').attr("href");
			//log("href",href);
			//log(outData);
			$.ajax({ url: href+"?s="+me.User.S, type:"POST", dataType:"json", data: outData, error: ajaxError });
			bp.find('.hide_on_edit').removeClass("edit_opened");
			bp.find('.show_on_edit').removeClass("edit_opened");
		});
	});

	$(this).click(() => {
		$(".selectedAlert").removeClass("selectedAlert");
		$("#back").removeClass("alertActive");
		$(".link_select").removeClass("link_opened");
	});

	$(".alert_bell").click(function(){
		let menuAlerts = $(this).parent();
		if(menuAlerts.hasClass("selectedAlert")) {
			event.stopPropagation();
			menuAlerts.removeClass("selectedAlert");
			$("#back").removeClass("alertActive");
		}
	});
	$(".menu_alerts").click(function(ev) {
		ev.stopPropagation();
		if($(this).hasClass("selectedAlert")) return;
		if(!conn) loadAlerts(this,true);
		this.className += " selectedAlert";
		document.getElementById("back").className += " alertActive"
	});
	$(".link_select").click(ev => ev.stopPropagation());

	$("input,textarea,select,option").keyup(ev => ev.stopPropagation())

	$("#themeSelectorSelect").change(function(){
		log("Changing the theme to "+this.options[this.selectedIndex].getAttribute("value"));
		$.ajax({
			url: this.form.getAttribute("action")+"?s="+me.User.S,
			type:"POST",
			dataType:"json",
			data: { "theme": this.options[this.selectedIndex].getAttribute("value"), js: 1 },
			error: ajaxError,
			success: function (dat,status,xhr) {
				log("Theme successfully switched");
				log("dat",dat);
				log("status",status);
				log("xhr",xhr);
				window.location.reload();
			}
		});
	});

	// The time range selector for the time graphs in the Control Panel
	$(".autoSubmitRedirect").change(function(){
		let els = this.form.elements;
		let s = "";
		for(let i=0; i<els.length; i++) {
			let el = els[i];
			if(el.nodeName=="SELECT") {
				s += el.name+"="+el.options[el.selectedIndex].getAttribute("value")+"&";
			}
			// TODO: Implement other element types...
		}
		if(s.length > 0) s = "?"+s.substr(0, s.length-1);

		window.location = this.form.getAttribute("action")+s; // Do a redirect as a form submission refuses to work properly
	});

	$(".unix_to_24_hour_time").each(function(){
		let unixTime = this.innerText;
		let date = new Date(unixTime*1000);
		log("date",date);
		let mins = "0"+date.getMinutes();
		let formattedTime = date.getHours()+":"+mins.substr(-2);
		log("formattedTime",formattedTime);
		this.innerText = formattedTime;
	});

	$(".unix_to_date").each(function(){
		// TODO: Localise this
		let monthList = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
		let date = new Date(this.innerText * 1000);
		log("date",date);
		let day = "0"+date.getDate();
		let formattedTime = monthList[date.getMonth()]+" "+day.substr(-2)+" "+date.getFullYear();
		log("formattedTime",formattedTime);
		this.innerText = formattedTime;
	});

	$("spoiler").addClass("hide_spoil");
	$(".hide_spoil").click(function(ev) {
		ev.stopPropagation();
		ev.preventDefault();
		$(this).removeClass("hide_spoil");
		$(this).unbind("click");
	});

	this.onkeyup = function(ev) {
		if(ev.which==37) this.querySelectorAll("#prevFloat a")[0].click();
		if(ev.which==39) this.querySelectorAll("#nextFloat a")[0].click();
	};

	function asyncGetSheet(src) {
		return new Promise((resolve,reject) => {
			let res = document.createElement('link');
			res.async = true;
	
			const onloadHandler = (e,isAbort) => {
				if (isAbort || !res.readyState || /loaded|complete/.test(res.readyState)) {
					res.onload = null;
					res.onreadystatechange = null;
					res = undefined;
	
					isAbort ? reject(e) : resolve();
				}
			}
	
			res.onerror = (e) => {
				reject(e);
			};
			res.onload = onloadHandler;
			res.onreadystatechange = onloadHandler;
			res.href = src;
			res.rel = "stylesheet";
			res.type = "text/css";
	
			const prior = document.getElementsByTagName('link')[0];
			prior.parentNode.insertBefore(res,prior);
		});
	}

	function stripQ(name) {
		return name.split('?')[0];
	}

	function loadArb(base,href,h=null) {
		fetch(href,{credentials:"same-origin"})
			.then(resp => {
				if(!resp.ok) throw(href+" failed to load");
				let xr = resp.headers.get("x-res")
				if(xr!=null) {
					for(let res of xr.split(",")) {
						let pro;
						if(stripQ(getExt(res))=="css") pro = asyncGetSheet(pre+res)
						else pro = asyncGetScript(pre+res)
							pro.then(() => log("Loaded "+res))
							.catch(e => {
								log("Unable to get "+res,e);
								console.trace();
							});
					}
				}
				return resp.text();
			}).then(d => {
				document.querySelector("#back").outerHTML = d;
				if(h!==null) h(d);
				$(".elapsed").remove();
				let obj = {Title:document.title,Url:base};
				history.pushState(obj,obj.Title,obj.Url);
			}).catch(e => {
				log("Unable to get script "+href,e);
				console.trace();
			});
	}

	/*$(".rowtopic a,a.rowtopic,a.forum_poster").click(function(ev) {
		let base = this.getAttribute("href");
		loadArb(base,base+"?i=1", () => {
			unbindTopic();
			bindTopic();
		});
		ev.stopPropagation();
		ev.preventDefault();
	})*/
	$("a").click(function(ev) {
		let base = this.getAttribute("href");
		if(base!="/topics/") return;
		loadArb(base,base+"?i=1", () => {
			unbindPage();
			bindPage();
		});
		ev.stopPropagation();
		ev.preventDefault();
	})

	runInitHook("almost_end_init");
	runInitHook("end_init");
}

function bindPage() {
	log("enter bindPage");
	$(".create_topic_link").click(ev => {
		ev.preventDefault();
		$(".topic_create_form").removeClass("auto_hide");
	});
	$(".topic_create_form .close_form").click(ev => {
		ev.preventDefault();
		$(".topic_create_form").addClass("auto_hide");
	});
	
	bindTopic();
	runInitHook("end_bind_page")
}

function unbindPage() {
	log("enter unbindPage");
	$(".create_topic_link").unbind("click");
	$(".topic_create_form .close_form").unbind("click");
	unbindTopic();
	runHook("end_unbind_page")
}

function bindTopic() {
	log("enter bindTopic");
	$(".open_edit").click(ev => {
		ev.preventDefault();
		$('.hide_on_edit').addClass("edit_opened");
		$('.show_on_edit').addClass("edit_opened");
		runHook("open_edit");
	});
	
	$(".topic_item .submit_edit").click(function(ev){
		ev.preventDefault();
		let nameInput = $(".topic_name_input").val();
		$(".topic_name").html(nameInput);
		$(".topic_name").attr(nameInput);
		let contentInput = $('.topic_content_input').val();
		$(".topic_content").html(quickParse(contentInput));
		let statusInput = $('.topic_status_input').val();
		$(".topic_status_e:not(.open_edit)").html(statusInput);

		$('.hide_on_edit').removeClass("edit_opened");
		$('.show_on_edit').removeClass("edit_opened");
		runHook("close_edit");

		$.ajax({
			url: this.form.getAttribute("action"),
			type:"POST",
			dataType:"json",
			data: {
				name: nameInput,
				status: statusInput,
				content: contentInput,
				js: 1
			},
			error: ajaxError,
			success: (dat,status,xhr) => {
				if("Content" in dat) $(".topic_content").html(dat["Content"]);
			}
		});
	});
	
	$(".delete_item").click(function(ev) {
		postLink(ev);
		$(this).closest('.deletable_block').remove();
	});

	// Miniature implementation of the parser to avoid sending as much data back and forth
	function quickParse(m) {
		const r = (o,n) => {
			m = m.replace(o,n)
		}
		r(":)", "😀")
		r(":(", "😞")
		r(":D", "😃")
		r(":P", "😛")
		r(":O", "😲")
		r(":p", "😛")
		r(":o", "😲")
		r(";)", "😉")
		r("\n","<br>")
		return m
	}

	$(".edit_item").click(function(ev){
		ev.preventDefault();

		let bp = this.closest('.editable_parent');
		$(bp).find('.hide_on_edit').addClass("edit_opened");
		$(bp).find('.show_on_edit').addClass("edit_opened");
		$(bp).find('.hide_on_block_edit').addClass("edit_opened");
		$(bp).find('.show_on_block_edit').addClass("edit_opened");
		let srcNode = bp.querySelector(".edit_source");
		let block = bp.querySelector('.editable_block');
		block.classList.add("in_edit");

		let src = "";
		if(srcNode!=null) src = srcNode.innerText;
		else src = block.innerHTML;
		block.innerHTML = Tmpl_topic_c_edit_post({
			ID: bp.getAttribute("id").slice("post-".length),
			Source: src,
			Ref: this.closest('a').getAttribute("href")
		})
		runHook("edit_item_pre_bind");

		$(".submit_edit").click(function(ev){
			ev.preventDefault();
			$(bp).find('.hide_on_edit').removeClass("edit_opened");
			$(bp).find('.show_on_edit').removeClass("edit_opened");
			$(bp).find('.hide_on_block_edit').removeClass("edit_opened");
			$(bp).find('.show_on_block_edit').removeClass("edit_opened");
			block.classList.remove("in_edit");
			let con = block.querySelector('textarea').value;
			block.innerHTML = quickParse(con);
			if(srcNode!=null) srcNode.innerText = con;

			let formAction = this.closest('a').getAttribute("href");
			// TODO: Bounce the parsed post back and set innerHTML to it?
			$.ajax({
				url: formAction,
				type:"POST",
				dataType:"json",
				data: { js: 1, edit_item: con },
				error: ajaxError,
				success: (dat,status,xhr) => {
					if("Content" in dat) block.innerHTML = dat["Content"];
				}
			});
		});
	});

	$(".quote_item").click(function(ev){
		ev.preventDefault();
		ev.stopPropagation();
		let src = this.closest(".post_item").getElementsByClassName("edit_source")[0];
		let con = document.getElementById("input_content")
		log("con.value",con.value);

		let item;
		if(con.value=="") item = "<blockquote>"+src.innerHTML+"</blockquote>"
		else item = "\r\n<blockquote>"+src.innerHTML+"</blockquote>";
		con.value = con.value+item;
		log("con.value",con.value);

		// For custom / third party text editors
		quoteItemCallback(src.innerHTML,item);
	});

	//id="poll_results_{pollid}" class="poll_results auto_hide"
	$(".poll_results_button").click(function(){
		let pollID = $(this).attr("data-poll-id");
		$("#poll_results_"+pollID).removeClass("auto_hide");
		fetch("/poll/results/"+pollID, {
			credentials: 'same-origin'
		}).then(resp => resp.text()).catch(e => console.error("e",e)).then(rawData => {
			// TODO: Make sure the received data is actually a list of integers
			let data = JSON.parse(rawData);
			let allZero = true;
			for(let i=0; i<data.length; i++) {
				if(data[i]!="0") allZero = false;
			}
			if(allZero) {
				$("#poll_results_"+pollID+" .poll_no_results").removeClass("auto_hide");
				log("all zero")
				return;
			}

			$("#poll_results_"+pollID+" .user_content").html("<div id='poll_results_chart_"+pollID+"'></div>");
			log("rawData",rawData);
			log("series",data);
			Chartist.Pie('#poll_results_chart_'+pollID, {
 				series: data,
			}, {
				height: '120px',
			});
		})
	});

	runInitHook("end_bind_topic");
}

function unbindTopic() {
	log("enter unbindTopic");
	$(".open_edit").unbind("click");
	$(".topic_item .submit_edit").unbind("click");
	$(".delete_item").unbind("click");
	$(".edit_item").unbind("click");
	$(".submit_edit").unbind("click");
	$(".quote_item").unbind("click");
	$(".poll_results_button").unbind("click");
	runHook("end_unbind_topic");
}