//#region -----------------   Initializations   ----------------- 

let loadedURL = new URL(window.location.href);
let absoluteBasePath = undefined;
let relativeBasePath = undefined;
let relativePathname = undefined;

let webpageContainer;
let documentContainer;
let viewContent;

let leftSidebar;
let rightSidebar;
let sidebarCollapseIcons;
let sidebarGutters;
let sidebars;
let sidebarDefaultWidth;
let sidebarTargetWidth;
let contentTargetWidth;

let themeToggle;
let searchInput;

let fileTree;
let outlineTree;
let fileTreeItems;
let outlineTreeItems;

let canvasWrapper;
let canvas;
let canvasNodes;
let canvasBackground;
let canvasBackgroundPattern;
let focusedCanvasNode;

let loadingIcon;
let isOffline = false;

let collapseIconUp = ["m7 15 5 5 5-5", "m7 9 5-5 5 5"]; // path 1, path 2 - svg paths
let collapseIconDown = ["m7 20 5-5 5 5", "m7 4 5 5 5-5"]; // path 1, path 2 - svg paths

let isTouchDevice = isTouchCapable();

let documentType; // "markdown" | "canvas" | "embed" | "custom" | "none"
let embedType; // "img" | "video" | "audio" | "embed" | "none" 
let customType; // "kanban" | "excalidraw" | "none"
let deviceSize; // "large-screen" | "small screen" | "tablet" | "phone"

let fullyInitialized = false;

async function initGlobalObjects()
{
	if(window.location.protocol != "file:") 
	{
		await loadIncludes();
	}



	loadingIcon = document.createElement("div");
	loadingIcon.classList.add("loading-icon");
	document.body.appendChild(loadingIcon);
	loadingIcon.innerHTML = `<div></div><div></div><div></div><div></div>`;

	webpageContainer = document.querySelector(".webpage-container");
	documentContainer = document.querySelector(".document-container");
	leftSidebar = document.querySelector(".sidebar-left");
	rightSidebar = document.querySelector(".sidebar-right");

	fileTree = document.querySelector(".file-tree");
	outlineTree = document.querySelector(".outline-tree");
	fileTreeItems = Array.from(document.querySelectorAll(".tree-container.file-tree .tree-item"));

	sidebars = []
	sidebarGutters = []
	sidebarCollapseIcons = []
	if (leftSidebar && rightSidebar)
	{
		sidebarCollapseIcons = Array.from(document.querySelectorAll(".sidebar-collapse-icon"));
		sidebarGutters = [sidebarCollapseIcons[0].parentElement, sidebarCollapseIcons[1].parentElement];
		sidebars = [sidebarGutters[0].parentElement, sidebarGutters[1].parentElement];
	}

	themeToggle = document.querySelector(".theme-toggle-input");
}

async function initializePage()
{
	focusedCanvasNode = null;
	canvasWrapper = document.querySelector(".canvas-wrapper") ?? canvasWrapper;
	canvas = document.querySelector(".canvas") ?? canvas;

	let canvasNodesTemp = document.querySelectorAll(".canvas-node");
	canvasNodes = canvasNodesTemp.length > 0 ? canvasNodesTemp : canvasNodes;

	canvasBackground = document.querySelector(".canvas-background") ?? canvasBackground;
	canvasBackgroundPattern = document.querySelector(".canvas-background pattern") ?? canvasBackgroundPattern;
	viewContent = document.querySelector(".document-container > .view-content") ?? document.querySelector(".document-container > .markdown-preview-view") ?? viewContent;
	outlineTreeItems = Array.from(document.querySelectorAll(".tree-container.outline-tree .tree-item"));

	if(!fullyInitialized)
	{	
		if (window.location.protocol == "file:") initializeForFileProtocol();
		await initGlobalObjects();
		initializeDocumentTypes(document);
		setupSidebars();
		setupThemeToggle();
		await setupSearch();
		setupRootPath(document);

		sidebarDefaultWidth = await getComputedPixelValue("--sidebar-width");
		contentTargetWidth = await getComputedPixelValue("--line-width") * 0.9;

		window.addEventListener('resize', () => onResize());
		onResize();
	}

	setTimeout(() => documentContainer.classList.remove("hide"));

	// hide the right sidebar when viewing specific file types
	if (rightSidebar && (embedType == "video" || embedType == "embed" || customType == "excalidraw" || customType == "kanban" || documentType == "canvas")) 
	{
		if(!rightSidebar.collapsed)
		{
			rightSidebar.temporaryCollapse();
		}
	}
	else
	{
		// if the right sidebar was temporarily collapsed and it is still collapsed, uncollapse it
		if (rightSidebar && rightSidebar.temporarilyCollapsed && rightSidebar.collapsed) 
		{
			rightSidebar.collapse(false);
			rightSidebar.temporarilyCollapsed = false;
		}
	}

	parseURLParams();
	relativePathname = getVaultRelativePath(loadedURL.href);
}

function initializePageEvents(setupOnNode)
{
	if (!setupOnNode) return;
    setupHeaders(setupOnNode);
    setupTrees(setupOnNode);
	setupLists(setupOnNode);
	setupCallouts(setupOnNode);
	setupCheckboxes(setupOnNode);
	setupCanvas(setupOnNode);
	setupCodeblocks(setupOnNode);
	setupLinks(setupOnNode);
	setupScroll(setupOnNode);
}

function initializeDocumentTypes(fromDocument)
{
	if (fromDocument.querySelector(".document-container > .markdown-preview-view")) documentType = "markdown";
	else if (fromDocument.querySelector(".canvas-wrapper")) documentType = "canvas";
	else 
	{
		documentType = "custom";
		if (fromDocument.querySelector(".kanban-plugin")) customType = "kanban";
		else if (fromDocument.querySelector(".excalidraw-plugin")) customType = "excalidraw";
	}
}

function initializeForFileProtocol()
{
	let graphEl = document.querySelector(".graph-view-placeholder");
	if(graphEl)
	{
		console.log("Running locally, skipping graph view initialization and hiding graph.");
		graphEl.style.display = "none";
		graphEl.previousElementSibling.style.display = "none"; // hide the graph's header
	}
}

window.onload = async function()
{
	await initializePage();
	initializePageEvents(document);
	setActiveDocument(loadedURL, true, false, false);
	fullyInitialized = true;
};

window.onpopstate = function(event)
{
	event.preventDefault();
	event.stopPropagation();

	if (document.body.classList.contains("floating-sidebars") && (!leftSidebar.collapsed || !rightSidebar.collapsed))
	{
		leftSidebar.collapse(true);
		rightSidebar.collapse(true);
		return;
	}

	loadDocument(getURLPath(), false, true);
	console.log("Popped state: " + getURLPath());
}

//#endregion

//#region -----------------       Resize        -----------------

function onEndResize()
{
	document.body.classList.toggle("resizing", false);
}

function onStartResize()
{
	document.body.classList.toggle("resizing", true);
}

let lastScreenWidth = undefined;
let isResizing = false;
let checkStillResizingTimeout = undefined;
function onResize(isInitial = false)
{
	if (!isResizing)
	{
		onStartResize();
		isResizing = true;
	}

	function widthNowInRange(low, high)
	{
		let w = window.innerWidth;
		return (w > low && w < high && lastScreenWidth == undefined) || ((w > low && w < high) && (lastScreenWidth <= low || lastScreenWidth >= high));
	}

	function widthNowGreaterThan(value)
	{
		let w = window.innerWidth;
		return (w > value && lastScreenWidth == undefined) || (w > value && lastScreenWidth < value);
	}

	function widthNowLessThan(value)
	{
		let w = window.innerWidth;
		return (w < value && lastScreenWidth == undefined) || (w < value && lastScreenWidth > value);
	}

	if (widthNowGreaterThan(contentTargetWidth + sidebarDefaultWidth * 2) || widthNowGreaterThan(1025))
	{
		deviceSize = "large-screen";
		document.body.classList.toggle("floating-sidebars", false);
		document.body.classList.toggle("is-large-screen", true);
		document.body.classList.toggle("is-small-screen", false);
		document.body.classList.toggle("is-tablet", false);
		document.body.classList.toggle("is-phone", false);
		sidebars.forEach(function (sidebar) { sidebar.collapse(false) });
		sidebarGutters.forEach(function (gutter) { gutter.collapse(false) });
	}
	else if (widthNowInRange((contentTargetWidth + sidebarDefaultWidth) * 1, contentTargetWidth + sidebarDefaultWidth * 2) || widthNowInRange(769, 1024))
	{
		deviceSize = "small screen";
		document.body.classList.toggle("floating-sidebars", false);
		document.body.classList.toggle("is-large-screen", false);
		document.body.classList.toggle("is-small-screen", true);
		document.body.classList.toggle("is-tablet", false);
		document.body.classList.toggle("is-phone", false);
		sidebarGutters.forEach(function (gutter) { gutter.collapse(false) });

		if (leftSidebar && rightSidebar && !leftSidebar.collapsed) 
		{
			rightSidebar.collapse(true);
		}
	}
	else if (widthNowInRange(sidebarDefaultWidth * 2, (contentTargetWidth + sidebarDefaultWidth) * 1) || widthNowInRange(481, 768))
	{
		deviceSize = "tablet";
		document.body.classList.toggle("floating-sidebars", true);
		document.body.classList.toggle("is-large-screen", false);
		document.body.classList.toggle("is-small-screen", false);
		document.body.classList.toggle("is-tablet", true);
		document.body.classList.toggle("is-phone", false);
		sidebarGutters.forEach(function (gutter) { gutter.collapse(false) });
		
		if (leftSidebar && rightSidebar && !leftSidebar.collapsed) 
		{
			rightSidebar.collapse(true);
		}

		if(leftSidebar && !fullyInitialized) leftSidebar.collapse(true);
	}
	else if (widthNowLessThan(sidebarDefaultWidth * 2) || widthNowLessThan(480))
	{
		deviceSize = "phone";
		document.body.classList.toggle("floating-sidebars", true);
		document.body.classList.toggle("is-large-screen", false);
		document.body.classList.toggle("is-small-screen", false);
		document.body.classList.toggle("is-tablet", false);
		document.body.classList.toggle("is-phone", true);
		sidebars.forEach(function (sidebar) { sidebar.collapse(true) });
		sidebarGutters.forEach(function (gutter) { gutter.collapse(false) });
	}

	lastScreenWidth = window.innerWidth;

	if (checkStillResizingTimeout != undefined) clearTimeout(checkStillResizingTimeout);

	// wait a little bit of time and if the width is still the same then we are done resizing
	let screenWidthSnapshot = window.innerWidth;
	checkStillResizingTimeout = setTimeout(function ()
	{
		if (window.innerWidth == screenWidthSnapshot)
		{
			checkStillResizingTimeout = undefined;
			isResizing = false;
			onEndResize();
		}
	}, 200);

}

// #endregion

//#region -----------------   Helper Functions  ----------------- 

function clamp(value, min, max)
{
	return Math.min(Math.max(value, min), max);
}

async function delay(ms)
{
	return new Promise(resolve => setTimeout(resolve, ms));
}

async function waitUntil(condition, interval = 100, timeout = 2000)
{
	return new Promise(resolve =>
	{
		let intervalId = 0;

		let timeoutId = setTimeout(() =>
		{
			clearInterval(intervalId);
			resolve();
		}, timeout);

		intervalId = setInterval(() =>
		{
			if (condition())
			{
				clearInterval(intervalId);
				clearTimeout(timeoutId);
				resolve();
			}
		}, interval);
	});
}

/**Gets the bounding rect of a given element*/
function getElBounds(El)
{
	let elRect = El.getBoundingClientRect();

	let x = elRect.x;
	let y = elRect.y;
	let width = elRect.width;
	let height = elRect.height;
	let centerX = elRect.x + elRect.width / 2;
	let centerY = elRect.y + elRect.height / 2;

	return { x: x, y: y, width: width, height: height, minX: x, minY: y, maxX: x + width, maxY: y + height, centerX: centerX, centerY: centerY };
}

async function getComputedPixelValue(variableName)
{
	const tempElement = document.createElement('div');
	document.body.appendChild(tempElement);
	tempElement.style.position = 'absolute';
	tempElement.style.width = `var(${variableName})`;

	await new Promise(resolve => setTimeout(resolve, 10));

	const computedWidth = window.getComputedStyle(tempElement).width;
	tempElement.remove();

	return parseFloat(computedWidth);
}

function getPointerPosition(event)
{
	let touches = event.touches ? Array.from(event.touches) : [];
	let x = touches.length > 0 ? (touches.reduce((acc, cur) => acc + cur.clientX, 0) / event.touches.length) : event.clientX;
	let y = touches.length > 0 ? (touches.reduce((acc, cur) => acc + cur.clientY, 0) / event.touches.length) : event.clientY;
	return {x: x, y: y};
}

function getTouchPosition(touch)
{
	return {x: touch.clientX, y: touch.clientY};
}

function getAllChildrenRecursive(element) 
{
	let children = [];

	for (let i = 0; i < element.children.length; i++) {
		const child = element.children[i];
		children.push(child);
		children = children.concat(getAllChildrenRecursive(child));
	}

	return children;
}

function isMobile() 
{
	let check = false;
	(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
	return check;
}

function isTouchCapable() 
{
	return (('ontouchstart' in window) ||
	(navigator.maxTouchPoints > 0) ||
	(navigator.msMaxTouchPoints > 0));
}

function downloadBlob(blob, name = 'file.txt') {
    if (
      window.navigator && 
      window.navigator.msSaveOrOpenBlob
    ) return window.navigator.msSaveOrOpenBlob(blob);

    // For other browsers:
    // Create a link pointing to the ObjectURL containing the blob.
    const data = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = data;
    link.download = name;

    // this is necessary as link.click() does not work on the latest firefox
    link.dispatchEvent(
      new MouseEvent('click', { 
        bubbles: true, 
        cancelable: true, 
        view: window 
      })
    );

    setTimeout(() => {
      // For Firefox it is necessary to delay revoking the ObjectURL
      window.URL.revokeObjectURL(data);
      link.remove();
    }, 100);
}

function extentionToTag(extention)
{
	if (["png", "jpg", "jpeg", "svg", "gif", "bmp", "ico"].includes(extention)) return "img";
	if (["mp4", "mov", "avi", "webm", "mpeg"].includes(extention)) return "video";
	if (["mp3", "wav", "ogg", "aac"].includes(extention)) return "audio";
	if (["pdf"].includes(extention)) return "embed";
	return;
}

let slideUp = (target, duration=500) => {

	target.style.transitionProperty = 'height, margin, padding';
	target.style.transitionDuration = duration + 'ms';
	target.style.boxSizing = 'border-box';
	target.style.height = target.offsetHeight + 'px';
	target.offsetHeight;
	target.style.overflow = 'hidden';
	target.style.height = 0;
	target.style.paddingTop = 0;
	target.style.paddingBottom = 0;
	target.style.marginTop = 0;
	target.style.marginBottom = 0;
	window.setTimeout(async () => {
			target.style.display = 'none';
			target.style.removeProperty('height');
			target.style.removeProperty('padding-top');
			target.style.removeProperty('padding-bottom');
			target.style.removeProperty('margin-top');
			target.style.removeProperty('margin-bottom');
			target.style.removeProperty('overflow');
			target.style.removeProperty('transition-duration');
			target.style.removeProperty('transition-property');
	}, duration);
}

let slideUpAll = (targets, duration=500) => {

	targets.forEach(async target => {
		if (!target) return;
		target.style.transitionProperty = 'height, margin, padding';
		target.style.transitionDuration = duration + 'ms';
		target.style.boxSizing = 'border-box';
		target.style.height = target.offsetHeight + 'px';
		target.offsetHeight;
		target.style.overflow = 'hidden';
		target.style.height = 0;
		target.style.paddingTop = 0;
		target.style.paddingBottom = 0;
		target.style.marginTop = 0;
		target.style.marginBottom = 0;
	});

	window.setTimeout(async () => {
		targets.forEach(async target => {
			if (!target) return;
			target.style.display = 'none';
			target.style.removeProperty('height');
			target.style.removeProperty('padding-top');
			target.style.removeProperty('padding-bottom');
			target.style.removeProperty('margin-top');
			target.style.removeProperty('margin-bottom');
			target.style.removeProperty('overflow');
			target.style.removeProperty('transition-duration');
			target.style.removeProperty('transition-property');
		});
	}, duration);
}

let slideDown = (target, duration=500) => {
	target.style.removeProperty('display');
	let display = window.getComputedStyle(target).display;
	if (display === 'none') display = 'block';
	target.style.display = display;
	let height = target.offsetHeight;
	target.style.overflow = 'hidden';
	target.style.height = 0;
	target.style.paddingTop = 0;
	target.style.paddingBottom = 0;
	target.style.marginTop = 0;
	target.style.marginBottom = 0;
	target.offsetHeight;
	target.style.boxSizing = 'border-box';
	target.style.transitionProperty = "height, margin, padding";
	target.style.transitionDuration = duration + 'ms';
	target.style.height = height + 'px';
	target.style.removeProperty('padding-top');
	target.style.removeProperty('padding-bottom');
	target.style.removeProperty('margin-top');
	target.style.removeProperty('margin-bottom');
	window.setTimeout(async () => {
		target.style.removeProperty('height');
		target.style.removeProperty('overflow');
		target.style.removeProperty('transition-duration');
		target.style.removeProperty('transition-property');
	}, duration);
}

let slideDownAll = (targets, duration=500) => {

	targets.forEach(async target => {
		if (!target) return;
		target.style.removeProperty('display');
		let display = window.getComputedStyle(target).display;
		if (display === 'none') display = 'block';
		target.style.display = display;
		let height = target.offsetHeight;
		target.style.overflow = 'hidden';
		target.style.height = 0;
		target.style.paddingTop = 0;
		target.style.paddingBottom = 0;
		target.style.marginTop = 0;
		target.style.marginBottom = 0;
		target.offsetHeight;
		target.style.boxSizing = 'border-box';
		target.style.transitionProperty = "height, margin, padding";
		target.style.transitionDuration = duration + 'ms';
		target.style.height = height + 'px';
		target.style.removeProperty('padding-top');
		target.style.removeProperty('padding-bottom');
		target.style.removeProperty('margin-top');
		target.style.removeProperty('margin-bottom');
	});

	window.setTimeout( async () => {
		targets.forEach(async target => {
			if (!target) return;
			target.style.removeProperty('height');
			target.style.removeProperty('overflow');
			target.style.removeProperty('transition-duration');
			target.style.removeProperty('transition-property');
		});
	}, duration);
}

var slideToggle = (target, duration = 500) => {
	if (window.getComputedStyle(target).display === 'none') {
		return slideDown(target, duration);
	} else {
		return slideUp(target, duration);
	}
}

var slideToggleAll = (targets, duration = 500) => {
	if (window.getComputedStyle(targets[0]).display === 'none') {
		return slideDownAll(targets, duration);
	} else {
		return slideUpAll(targets, duration);
	}
}

function getURLExtention(url)
{
	return url.split(".").pop().split("?")[0].split("#")[0].toLowerCase().trim();
}

//#endregion

//#region -----------------   Loading & Paths   ----------------- 

let transferDocument = document.implementation.createHTMLDocument();
let loading = false;
async function loadDocument(url, changeURL, showInTree)
{
	url = decodeURI(url);
	if (loading)
	{
		console.log("Already loading document.");
		return;
	}

	loading = true;
	let newLoadedURL = new URL(url, absoluteBasePath);
	relativePathname = getVaultRelativePath(newLoadedURL.href);
	console.log("Loading document: ", newLoadedURL.pathname);

	if (newLoadedURL.pathname == loadedURL?.pathname ?? "")
	{
		console.log("Document already loaded.");
		loadedURL = newLoadedURL;
		setActiveDocument(loadedURL, false, false);
		await initializePage();
		loading = false;
		return;
	}

	loadedURL = newLoadedURL;
	let pathname = loadedURL.pathname;

	await showLoading(true);

	let response;
	try { response = await fetch(pathname); }
	catch (error)
	{
		window.location.assign(pathname);
		loading = false;
		return;
	}

	if (response.ok)
	{
		setActiveDocument(loadedURL, showInTree, changeURL);
		let extention = getURLExtention(url);
		if (extention == "/") extention = "html"; // if no extention assume it is html

		documentType = "none";
		embedType = "none";
		customType = "none";

		if(extention == "html")
		{
			let html = (await response.text()).replaceAll("<!DOCTYPE html>", "").replaceAll("<html>", "").replaceAll("</html>", "");
			transferDocument.write(html);

			setupRootPath(transferDocument);
			initializeDocumentTypes(transferDocument);

			// copy document content into DOM
			let newDocumentEl = transferDocument.querySelector(".document-container");
			documentContainer.innerHTML = newDocumentEl.innerHTML;
			
			// copy the outline tree into the DOM
			let newOutline = transferDocument.querySelector(".outline-tree");
			if (outlineTree && newOutline) outlineTree.innerHTML = newOutline.innerHTML;
		
			document.title = transferDocument.title;
			transferDocument.close();
		}
		else
		{
			documentType = "embed";

			embedType = extentionToTag(extention);

			if(embedType != undefined)
			{
				let media = document.createElement(embedType);
				media.controls = true;
				media.src = url;
				
				media.style.maxWidth = "100%";
				if(embedType == "embed")
				{
					media.style.width = "100%";
					media.style.height = "100%";
				}
				
				media.style.objectFit = "contain";

				viewContent.innerHTML = "";
				viewContent.setAttribute("class", "view-content embed");
				viewContent.appendChild(media);

				if (document.querySelector(".outline-tree")) 
					document.querySelector(".outline-tree").innerHTML = "";

				document.title = url.split("/").pop();
			}
			else // just download the file
			{
				let blob = await response.blob();
				downloadBlob(blob, url.split("/").pop());
			}
		}

		await initializePage();
		initializePageEvents(documentContainer);
		initializePageEvents(outlineTree);
	}
	else
	{
		pageNotFound(viewContent);
	}

	await showLoading(false);
	loading = false;

	return;
}

function setActiveDocument(url, showInTree, changeURL, animate = true)
{
	let relativePath = getVaultRelativePath(url.href);
	let decodedRelativePath = decodeURI(relativePath);
	let searchlessHeaderlessPath = decodedRelativePath.split("#")[0].split("?")[0].replace("\"", "\\\"").replace("\'", "\\\'");
	
	if (searchlessHeaderlessPath == "/" || searchlessHeaderlessPath == "") searchlessHeaderlessPath = "index.html";

	// switch active file in file tree
	let oldActiveTreeItem = document.querySelector(".file-tree .tree-item.mod-active");
	let newActiveTreeItem = document.querySelector(`.file-tree .tree-item:has(>.tree-link[href^="${searchlessHeaderlessPath}"])`);
	if(newActiveTreeItem && !newActiveTreeItem.isEqualNode(oldActiveTreeItem)) 
	{
		oldActiveTreeItem?.classList.remove("mod-active");
		newActiveTreeItem.classList.add("mod-active");
		if(showInTree) scrollIntoView(newActiveTreeItem, {block: "center", inline: "nearest"}, animate);
	}

	// set the active file in the graph view
	if(typeof graphData != 'undefined' && window.graphRenderer)
	{
		let activeNode = graphData?.paths.findIndex(function(item) { return item.endsWith(searchlessHeaderlessPath); }) ?? -1;
		
		if(activeNode >= 0) 
		{
			window.graphRenderer.activeNode = activeNode;
		}
	}

	console.log("Active document: " + changeURL);

	if(changeURL && window.location.protocol != "file:") 
	{
		window.history.pushState({ path: relativePath }, '', relativePath);
		console.log("Pushed state: " + relativePath);
	}
}

function parseURLParams()
{
	const highlightParam = loadedURL.searchParams.get('mark');
	const searchParam = loadedURL.searchParams.get('query');
	const hashParam = decodeURI(loadedURL.hash);
	
	if (highlightParam) 
	{
		searchCurrentDocument(highlightParam);
	}

	if (searchParam) 
	{
		search(searchParam);
	}

	if (hashParam)
	{
		const headingTarget = document.getElementById(hashParam.substring(1));
		if (headingTarget)
		{
			scrollIntoView(headingTarget, { behavior: "smooth", block: "start"});
		}
		else
		{
			console.log("Heading not found: " + hashParam);
		}
	}
}

async function showLoading(loading)
{
	documentContainer.style.transitionDuration = "";
	loadingIcon.classList.toggle("show", loading);
	documentContainer.classList.toggle("hide", loading);
	if(loading)
	{
		// position loading icon in the center of the screen
		let viewBounds = getViewBounds();
		loadingIcon.style.left = (viewBounds.centerX - loadingIcon.offsetWidth / 2) + "px";
		loadingIcon.style.top = (viewBounds.centerY - loadingIcon.offsetHeight / 2) + "px";

		// hide the left sidebar if on phone
		if (deviceSize == "phone") leftSidebar.collapse(true);
	}

	await delay(200);
}

function pageNotFound(viewContent)
{
	viewContent.innerHTML = 
	`
	<div>
		<center style='position: relative; transform: translateY(20vh); width: 100%; text-align: center;'>
			<h1 style>Page Not Found</h1>
		</center>
	</div>
	`;

	if (document.querySelector(".outline-tree"))
		document.querySelector(".outline-tree").innerHTML = "";

	console.log("Page not found: " + absoluteBasePath + loadedURL.pathname);
	let newRootPath = getURLRootPath(absoluteBasePath + loadedURL.pathname);
	relativeBasePath = newRootPath;
	document.querySelector("base").href = newRootPath;

	document.title = "Page Not Found";
}

function setupRootPath(fromDocument)
{
	let rootEl = fromDocument.getElementById("root-path");
	if (!rootEl) return;
	let basePath = rootEl.getAttribute("root-path");
	let newBase = document.createElement("base");
	newBase.href = basePath;
	console.log("Setting root path: " + basePath);
	document.querySelector("base").replaceWith(newBase);
	document.querySelector("#root-path").setAttribute("root-path", basePath);
	relativeBasePath = basePath;
	absoluteBasePath = new URL(basePath, window.location.href).href;
}

function getURLPath(url = window.location.pathname)
{
	if (absoluteBasePath == undefined) setupRootPath(document);
	let pathname = url.replace(absoluteBasePath, "");
	return pathname;
}

function getURLRootPath(url = window.location.pathname)
{
	let path = getURLPath(url);
	let splitPath = path.split("/");
	let rootPath = "";
	for (let i = 0; i < splitPath.length - 1; i++)
	{
		rootPath += "../";
	}
	return rootPath;
}

function getVaultRelativePath(absolutePath)
{
	return absolutePath.replace(absoluteBasePath, "")
}

//#endregion

//#region -----------------       Headers       ----------------- 

function setupHeaders(setupOnNode)
{
	setupOnNode.querySelectorAll(".heading-collapse-indicator").forEach(function (element) 
	{
		element.addEventListener("click", function () 
		{
			toggleTreeHeaderOpen(element.parentElement.parentElement, true);
		});
	});

	setupOnNode.querySelectorAll(".heading-wrapper").forEach(function (element)
	{
		element.collapsed = false;
		element.childrenContainer = element.querySelector(".heading-children");
		element.parentHeader = element.parentElement.parentElement;
		element.headerElement = element.querySelector(".heading");

		element.markdownPreviewSizer = getHeaderSizerEl(element);
		element.collapse = function (collapse, openParents = true, instant = false) { collapseHeader(element, collapse, openParents, instant) };
		element.toggleCollapse = function (openParents = true) { toggleTreeHeaderOpen(element, openParents) };
		element.hide = function () { hideHeader(element) };
		element.show = function (parents = false, children = false, forceStay = false) { showHeader(element, parents, children, forceStay) };
	});

	setupOnNode.querySelectorAll(".heading").forEach(function (element)
	{
		element.headingWrapper = element.parentElement;
	});
}

function isHeadingWrapper(headingWrapper)
{
	if (!headingWrapper) return false;
	return headingWrapper.classList.contains("heading-wrapper");
}

function getHeaderSizerEl(headingWrapper)
{
	// go up the tree until we find a markdown-preview-sizer
	let parent = headingWrapper;
	while (parent && !parent.classList.contains("markdown-preview-sizer")) parent = parent.parentElement;

	if (parent) return parent;
	else return;
}

async function collapseHeader(headingWrapper, collapse, openParents = true, instant = false)
{
	let collapseContainer = headingWrapper.childrenContainer;

	if (openParents && !collapse)
	{
		let parent = headingWrapper.parentHeader;
		if (isHeadingWrapper(parent)) parent.collapse(false, true, instant);
	}

	let needsChange = headingWrapper.classList.contains("is-collapsed") != collapse;
	if (!needsChange)
	{
		// if opening show the header
		if (!collapse && documentType == "canvas") headingWrapper.show(true);
		return;
	}


	if (headingWrapper.timeout) 
	{
		clearTimeout(headingWrapper.timeout);
		collapseContainer.style.transitionDuration = "";
		collapseContainer.style.height = "";
		headingWrapper.classList.toggle("is-animating", false);
	}


	if (collapse) 
	{
		headingWrapper.collapseHeight = collapseContainer.offsetHeight + parseFloat(collapseContainer.lastChild?.marginBottom || 0);

		// show all sibling headers after this one
		// this is so that when the header slides down you aren't left with a blank space
		let next = headingWrapper.nextElementSibling;
		while (next && documentType == "canvas")
		{
			let localNext = next;

			// force show the sibling header for 500ms while this one is collapsing
			if (isHeadingWrapper(localNext)) localNext.show(false, true, true);
			setTimeout(function()
			{
				localNext.forceShown = false;
			}, 500);

			next = next.nextElementSibling;
		}
	}

	let height = headingWrapper.collapseHeight;
	collapseContainer.style.height = height + "px";

	// if opening show the header
	if (!collapse && documentType == "canvas") headingWrapper.show(true);

	headingWrapper.collapsed = collapse;

	function adjustSizerHeight(customHeight = undefined)
	{
		if (customHeight != undefined) headingWrapper.markdownPreviewSizer.style.minHeight = customHeight + "px";
		else
		{
			let newTotalHeight = Array.from(headingWrapper.markdownPreviewSizer.children).reduce((acc, cur) => acc + cur.offsetHeight, 0);
			headingWrapper.markdownPreviewSizer.style.minHeight = newTotalHeight + "px";
		}
	}

	if (instant)
	{
		collapseContainer.style.transitionDuration = "0s";
		headingWrapper.classList.toggle("is-collapsed", collapse);
		collapseContainer.style.height = "";
		collapseContainer.style.transitionDuration = "";
		adjustSizerHeight()
		return;
	}

	// get the length of the height transition on heading container and wait for that time before not displaying the contents
	let transitionDuration = getComputedStyle(collapseContainer).transitionDuration;
	if (transitionDuration.endsWith("s")) transitionDuration = parseFloat(transitionDuration);
	else if (transitionDuration.endsWith("ms")) transitionDuration = parseFloat(transitionDuration) / 1000;
	else transitionDuration = 0;
	
	// multiply the duration by the height so that the transition is the same speed regardless of the height of the header
	let transitionDurationMod = Math.min(transitionDuration * Math.sqrt(height) / 16, 0.5); // longest transition is 0.5s
	collapseContainer.style.transitionDuration = `${transitionDurationMod}s`;


	if (collapse) collapseContainer.style.height = "0px";
	else collapseContainer.style.height = height + "px";
	headingWrapper.classList.toggle("is-animating", true);
	headingWrapper.classList.toggle("is-collapsed", collapse);

	if (headingWrapper.markdownPreviewSizer.closest(".markdown-embed")) // dont change the size of transcluded docments
	{
		adjustSizerHeight(collapse ? 0 : undefined);
	}

	setTimeout(function()
	{
		collapseContainer.style.transitionDuration = "";
		if(!collapse) collapseContainer.style.height = "";
		headingWrapper.classList.toggle("is-animating", false);

		adjustSizerHeight()

	}, transitionDurationMod * 1000);
}

function toggleTreeHeaderOpen(headingWrapper, openParents = true)
{
	headingWrapper.collapse(!headingWrapper.collapsed, openParents);
}

/**Hides everything in a header and then makes the header div take up the same space as the header element */
function hideHeader(headingWrapper)
{
	if(headingWrapper.forceShown) return;
	if(headingWrapper.classList.contains("is-hidden") || headingWrapper.classList.contains("is-collapsed")) return;
	if(getComputedStyle(headingWrapper).display == "none") return;

	let height = headingWrapper.offsetHeight;
	headingWrapper.classList.toggle("is-hidden", true);
	if (height != 0) headingWrapper.style.height = height + "px";
	headingWrapper.style.visibility = "hidden";
}

/**Restores a hidden header back to it's normal function */
function showHeader(headingWrapper, showParents = true, showChildren = false, forceStayShown = false)
{
	if (forceStayShown) headingWrapper.forceShown = true;

	if (showParents)
	{
		let parent = headingWrapper.parentHeader;
		if (isHeadingWrapper(parent)) parent.show(true, false, forceStayShown);
	}

	if (showChildren)
	{
		let children = headingWrapper.querySelectorAll(".heading-wrapper");
		children.forEach(function(child) { child.show(false, true, forceStayShown); });
	}

	if(!headingWrapper.classList.contains("is-hidden") || headingWrapper.classList.contains("is-collapsed")) return;


	headingWrapper.classList.toggle("is-hidden", false);
	headingWrapper.style.height = "";
	headingWrapper.style.visibility = "";
}

//#endregion

//#region -----------------        Trees        ----------------- 

function setupTrees(setupOnNode) 
{

	setupOnNode.querySelectorAll(".collapse-tree-button").forEach(function(button)
	{
		button.treeRoot = button.closest(".tree-container");
		button.icon = button.firstChild;
		button.icon.innerHTML = "<path d></path><path d></path>";
		
		button.setIcon = function(collapse)
		{
			button.icon.children[0].setAttribute("d", collapse ? collapseIconUp[0] : collapseIconDown[0]);
			button.icon.children[1].setAttribute("d", collapse ? collapseIconUp[1] : collapseIconDown[1]);
		}
		button.collapse = function(collapse) 
		{ 
			let treeItems = button.treeRoot.classList.contains("file-tree") ? fileTreeItems : outlineTreeItems;
			setTreeCollapsedAll(treeItems, collapse);
			button.setIcon(collapse);
			button.collapsed = collapse;
		};
		button.toggleCollapse = function() { button.collapse(!button.collapsed); };
		button.toggleState = function(state) 
		{ 
			if (state === undefined) state = !button.collapsed;
			button.collapsed = state;
			button.setIcon(state); 
		};

		button.addEventListener("click", function(event)
		{
			event.preventDefault();
			event.stopPropagation();
			button.toggleCollapse();
			return false;
		});

		// if any outline items are unncollapsed, toggle collapse all button state
		let treeItems = button.treeRoot.classList.contains("file-tree") ? fileTreeItems : outlineTreeItems;
		if (treeItems.some(item => !item.classList.contains("is-collapsed") && item.classList.contains("mod-collapsible")))
		{
			button.toggleState(false);
		}
	});

	let fileTreeClick = Array.from(setupOnNode.querySelectorAll(".tree-container.file-tree .tree-item:has(.collapse-icon) > .tree-link"));
	let outlineTreeClick = Array.from(setupOnNode.querySelectorAll(".tree-container.outline-tree .tree-item:has(.collapse-icon) > .tree-link .collapse-icon"));
	let collapsable = Array.from(fileTreeClick).concat(Array.from(outlineTreeClick));
	
	for (let item of collapsable)
	{
		let closestItem = item?.closest(".tree-item");
		if (closestItem && item) item?.addEventListener("click", function(event)
		{
			event.preventDefault();
			event.stopPropagation();
			toggleTreeCollapsed(closestItem);
		});
	}
	
}

async function setTreeCollapsed(element, collapsed, animate = true, openParents = true)
{
	if (!element.classList.contains("mod-collapsible"))
		element = element.closest(".mod-collapsible");

	if (!element || !element.classList.contains("mod-collapsible"))
	{
		return;
	}

	if (element.classList.contains("is-collapsed") == collapsed)
	{
		return;
	}

	if (openParents)
	{
		let parent = element.parentElement.closest(".mod-collapsible");
		if (parent) await setTreeCollapsed(parent, false, animate, openParents);
	}

	let children = element.querySelector(".tree-item-children");

	if (collapsed)
	{
		element.classList.add("is-collapsed");
		if(animate) slideUp(children, 100);
		else children.style.display = "none";
	}
	else
	{
		element.classList.remove("is-collapsed");
		if(animate) slideDown(children, 100);
		else children.style.display = "";

		// make close all button collapse the tree instead of opening it if it's already open
		let treeContainer = element.closest(".tree-container");
		if (treeContainer)
		{
			let collapseButton = treeContainer.querySelector(".collapse-tree-button");
			if (collapseButton) collapseButton.toggleState(false);
		}
	}

}

async function setTreeCollapsedAll(elements, collapsed, animate = true)
{
	let childrenList = [];
	elements.forEach(async element => 
	{
		if (!element || !element.classList.contains("mod-collapsible")) return;

		let children = element.querySelector(".tree-item-children");

		if (collapsed)
		{
			element.classList.add("is-collapsed");
		}
		else
		{
			element.classList.remove("is-collapsed");
		}

		childrenList.push(children);
	});

	if (collapsed)
	{
		if(animate) slideUpAll(childrenList, 100);
		else childrenList.forEach(async (children) => 
		{
			if(children) children.style.display = "none";
		});
	}
	else
	{
		if(animate) slideDownAll(childrenList, 100);
		else childrenList.forEach(async (children) => 
		{
			if(children) children.style.display = "";
		});
	}
}

function toggleTreeCollapsed(element)
{
	element = element.closest(".tree-item");
	if (!element) return;
	setTreeCollapsed(element, !element.classList.contains("is-collapsed"));
}

function toggleTreeCollapsedAll(elements)
{
	if (!elements) return;
	setTreeCollapsedAll(elements, !elements[0].classList.contains("is-collapsed"));
}

function getFileTreeItemFromPath(path)
{
	return document.querySelector(`.file-tree .tree-item:has(> .tree-link[href^="${path}"])`);
}

// hide all files and folder except the ones in the list (show parents of shown files)
async function filterFileTree(showPathList, hintLabelLists, query, openFileTree = true)
{
	if (openFileTree) await setTreeCollapsedAll(fileTreeItems, false, false);
	// hide all files and folders
	let allItems = Array.from(document.querySelectorAll(".file-tree .tree-item:not(.filtered-out)"));
	for await (let item of allItems)
	{
		item.classList.add("filtered-out");
	}

	await removeTreeHintLabels();

	for (let i = 0; i < showPathList.length; i++)
	{
		let path = showPathList[i];
		let hintLabels = hintLabelLists[i];

		let treeItem = getFileTreeItemFromPath(path);
		if (treeItem)
		{
			// show the file and it's parent tree items
			treeItem.classList.remove("filtered-out");
			let itemLink = treeItem.querySelector(".tree-link");
			if(itemLink) itemLink.href = path + "?mark=" + query;
			let parent = treeItem.parentElement.closest(".tree-item");

			while (parent)
			{
				parent.classList.remove("filtered-out");
				parent = parent.parentElement.closest(".tree-item");
			}

			if (hintLabels.length > 0)
			{
				let treeLink = treeItem.querySelector(".tree-link");
				let hintContainer = treeLink.appendChild(document.createElement("div"));
				hintContainer.classList.add("tree-hint-container");

				function createHintLabel(text, link)
				{
					text = text.trim();
					if (text == "") return;

					let hintLabelEl = document.createElement("a");
					hintLabelEl.classList.add("tree-hint-label");
					hintLabelEl.classList.add("internal-link");
					hintLabelEl.textContent = text;
					hintLabelEl.href = decodeURI(link).replaceAll(" ", "_");
					hintContainer.appendChild(hintLabelEl);
				}

				// create the hint labels
				for (let label of hintLabels)
				{
					createHintLabel(label, path + "#" + label);
				}

				setupLinks(hintContainer);
			}
		}
	}
}

async function clearFileTreeFilter(closeFileTree = true)
{
	await removeTreeHintLabels();

	let filteredItems = document.querySelectorAll(".file-tree .filtered-out");
	for await (let item of filteredItems)
	{
		item.classList.remove("filtered-out");
	}

	let markItems = document.querySelectorAll(".file-tree .tree-link[href*='?mark=']");
	for await (let item of markItems)
	{
		let href = item.href.split("?")[0];
		href = getVaultRelativePath(href);
		item.href = href;
	}

	if (closeFileTree) await setTreeCollapsedAll(fileTreeItems, true, false);
}

async function removeTreeHintLabels()
{
	let hintLabels = document.querySelectorAll(".tree-hint-container");
	for await (let item of hintLabels)
	{
		item.remove();
	}
}

function sortFileTreeDocuments(sortByFunction)
{
	let treeItems = Array.from(document.querySelectorAll(".file-tree .tree-item.mod-tree-file:not(.filtered-out)"));
	treeItems.sort(sortByFunction);

	// sort the files within their parent folders
	for (let i = 1; i < treeItems.length; i++)
	{
		let item = treeItems[i];
		let lastItem = treeItems[i - 1];
		if (item.parentElement == lastItem.parentElement)
		{
			lastItem.after(item);
		}
	}

	// sort the folders using their contents
	let folders = Array.from(document.querySelectorAll(".file-tree .tree-item.mod-tree-folder:not(.filtered-out)"));
	folders.sort(function (a, b)
	{
		let aFirst = a.querySelector(".tree-item.mod-tree-file:not(.filtered-out)");
		let bFirst = b.querySelector(".tree-item.mod-tree-file:not(.filtered-out)");
		return treeItems.indexOf(aFirst) - treeItems.indexOf(bFirst);
	});

	// sort the folders within their parent folders
	for (let i = 1; i < folders.length; i++)
	{
		let item = folders[i];

		let foundPlace = false;
		// iterate backwards until we find an item with the same parent
		for (let j = i - 1; j >= 0; j--)
		{
			let lastItem = folders[j];
			if (item.parentElement == lastItem.parentElement)
			{
				lastItem.after(item);
				foundPlace = true;
				break;
			}
		}

		// if we didn't find an item with the same parent, move it to the top
		if (!foundPlace)
		{
			item.parentElement.prepend(item);
		}
	}
}

function sortFileTree(sortByFunction)
{
	let treeItems = Array.from(document.querySelectorAll(".file-tree .tree-item.mod-tree-file:not(.filtered-out)"));
	treeItems.sort(sortByFunction);

	// sort the files within their parent folders
	for (let i = 1; i < treeItems.length; i++)
	{
		let item = treeItems[i];
		let lastItem = treeItems[i - 1];
		if (item.parentElement == lastItem.parentElement)
		{
			lastItem.after(item);
		}
	}

	// sort the folders using their contents
	let folders = Array.from(document.querySelectorAll(".file-tree .tree-item.mod-tree-folder:not(.filtered-out)"));
	folders.sort(sortByFunction);

	// sort the folders within their parent folders
	for (let i = 1; i < folders.length; i++)
	{
		let item = folders[i];

		let foundPlace = false;
		// iterate backwards until we find an item with the same parent
		for (let j = i - 1; j >= 0; j--)
		{
			let lastItem = folders[j];
			if (item.parentElement == lastItem.parentElement)
			{
				lastItem.after(item);
				foundPlace = true;
				break;
			}
		}

		// if we didn't find an item with the same parent, move it to the top
		if (!foundPlace)
		{
			item.parentElement.prepend(item);
		}
	}
}

function sortFileTreeAlphabetically(reverse = false)
{
	sortFileTree(function (a, b)
	{
		const aTitle = a.querySelector(".tree-item-title");
		const bTitle = b.querySelector(".tree-item-title");
		if (!aTitle || !bTitle) return 0;
		const aName = aTitle.textContent.toLowerCase();
		const bName = bTitle.textContent.toLowerCase();
		return aName.localeCompare(bName, undefined, { numeric: true }) * (reverse ? -1 : 1);
	});
}

//#endregion

//#region ----------------- 	   Lists        -----------------

function setupLists(setupOnNode)
{
	let listCollpaseIcons = Array.from(setupOnNode.querySelectorAll(".list-collapse-indicator"));
	for (let i = 0; i < listCollpaseIcons.length; i++)
	{
		let icon = listCollpaseIcons[i];
		icon.addEventListener("click", function (event)
		{
			let listItem = icon.closest("li");
			if (listItem) 
			{
				listItem.classList.toggle("is-collapsed");
				icon.classList.toggle("is-collapsed");
			}
		});
	}
}

//#endregion

//#region -----------------        Canvas       ----------------- 


function setupCanvas(setupOnNode)
{
	if(documentType != "canvas" || !setupOnNode.querySelector(".canvas-wrapper")) return;

	// initialize canvas tranformations
	setupOnNode.querySelector(".canvas")?.setAttribute("style", "translate: 0px 1px; scale: 1;");

	let nodeBounds = getNodesBounds();
	setViewCenter(nodeBounds.centerX, nodeBounds.centerY);

	// let nodes be focused when hovered over
	setupOnNode.querySelectorAll(".canvas-node-container").forEach(function (element) 
	{
		var parent = element.parentElement;

		function onEnter(event)
		{
			parent.classList.toggle("is-focused");

			if (focusedCanvasNode != null && focusedCanvasNode != parent) 
			{
				focusedCanvasNode.classList.remove("is-focused");
				focusedCanvasNode.querySelector(".canvas-node-container").style.display = "";
			}

			focusedCanvasNode = parent;

			parent.addEventListener("mouseleave", onLeave);
			parent.addEventListener("touchend", onLeave);
		}

		function onLeave(event)
		{
			if (focusedCanvasNode)
			{
				focusedCanvasNode.classList.remove("is-focused");
				focusedCanvasNode = null;
			}

			parent.removeEventListener("mouseleave", onLeave);
			parent.removeEventListener("touchend", onLeave);
		}

		element.addEventListener("mouseenter", onEnter);
		element.addEventListener("touchstart", onEnter);
	});

	// make nodes fit to view when double clicked
	setupOnNode.querySelectorAll(".canvas-node").forEach(function (element)
	{
		element.addEventListener("dblclick", function (event)
		{
			fitViewToNode(element);
		});
	});

	// make whole canvas fit to view when double clicked on background
	setupOnNode.querySelectorAll(".canvas-background").forEach(function (element)
	{
		element.addEventListener("dblclick", function (event)
		{
			fitViewToCanvas();
		});
	});

	// make canvas draggable / panable
	canvasWrapper.addEventListener("mousedown", canvasWrapperMouseDownHandler);
	canvasWrapper.addEventListener("touchstart", canvasWrapperMouseDownHandler);
	let scrollInterferance = false;
	function canvasWrapperMouseDownHandler(mouseDownEv)
	{
		let touchesDown = mouseDownEv.touches ?? [];

		scrollInterferance = false;

		// if there is already one tough down we don't want to start another mouse down event
		// extra fingers are already being handled in the move event below
		if (touchesDown.length > 1) return;

		if (mouseDownEv.button == 1 || mouseDownEv.button == 0 || touchesDown.length > 0)
		{
			let lastPointerPos = getPointerPosition(mouseDownEv);
			let startZoom = false;
			let lastDistance = 0;
			let lastTouchCount = touchesDown.length;

			let mouseMoveHandler = function (mouseMoveEv)
			{
				let touchesMove = mouseMoveEv.touches ?? [];

				let pointer = getPointerPosition(mouseMoveEv);

				if (lastTouchCount != touchesMove.length)
				{
					lastPointerPos = pointer;
					lastTouchCount = touchesMove.length;
				}

				let deltaX = pointer.x - lastPointerPos.x;
				let deltaY = pointer.y - lastPointerPos.y;

				if ((mouseDownEv.button == 1 || touchesMove.length == 1) && focusedCanvasNode)
				{
					let mouseHoriz = Math.abs(deltaX) > Math.abs(deltaY * 1.5);
					let mouseVert = Math.abs(deltaY) > Math.abs(deltaX * 1.5);

					// only skip if the focused node can be scrolled in the direction of mouse movement
					let sizer = focusedCanvasNode.querySelector(".markdown-preview-sizer");
					if(sizer)
					{
						let scrollableVert = sizer.scrollHeight > sizer.parentElement.clientHeight + 1;
						let scrollableHoriz = sizer.scrollWidth > sizer.parentElement.clientWidth + 1;

						if (((mouseHoriz && scrollableHoriz) || (mouseVert && scrollableVert)) && (window?.navigator?.platform?.startsWith("Win") ?? true))
						{
							scrollInterferance = true;
						}
						else
						{
							scrollInterferance = false;
						}
					}
				}
				
				if (mouseDownEv.button == 0 && focusedCanvasNode)
				{
					if (focusedCanvasNode.querySelector(".canvas-node-content").textContent.trim() != "") 
					{
						scrollInterferance = true;
					}
				}

				
				if (!scrollInterferance)
				{
					translateCanvas(deltaX, deltaY);
					lastPointerPos = pointer;
				}

				if (touchesMove.length == 2)
				{
					let touchCenter = getPointerPosition(mouseMoveEv, false);
					let touch1 = getTouchPosition(mouseMoveEv.touches[0]);
					let touch2 = getTouchPosition(mouseMoveEv.touches[1]);
					let distance = Math.sqrt(Math.pow(touch1.x - touch2.x, 2) + Math.pow(touch1.y - touch2.y, 2));

					if (!startZoom)
					{
						startZoom = true;
						lastDistance = distance;
					}

					let distanceDelta = distance - lastDistance;
					let scaleDelta = distanceDelta / lastDistance;

					scaleCanvasAroundPoint(1 + scaleDelta, touchCenter.x, touchCenter.y);

					lastDistance = distance;
				}
			};

			let mouseUpHandler = function (mouseUpEv)
			{
				document.body.removeEventListener("mousemove", mouseMoveHandler);
				document.body.removeEventListener("mouseup", mouseUpHandler);
				document.body.removeEventListener("mouseenter", mouseEnterHandler);
				document.body.removeEventListener("touchmove", mouseMoveHandler);
				document.body.removeEventListener("touchend", mouseUpHandler);
				document.body.removeEventListener("touchcancel", mouseUpHandler);
				scrollInterferance = false;
			};

			let mouseEnterHandler = function (mouseEnterEv)
			{
				if (mouseEnterEv.buttons == 1 || mouseEnterEv.buttons == 4) return;

				mouseUpHandler(mouseEnterEv);
			}

			document.body.addEventListener("mousemove", mouseMoveHandler);
			document.body.addEventListener("mouseup", mouseUpHandler);
			document.body.addEventListener("mouseenter", mouseEnterHandler);
			document.body.addEventListener("touchmove", mouseMoveHandler);
			document.body.addEventListener("touchend", mouseUpHandler);
			document.body.addEventListener("touchcancel", mouseUpHandler);
		}
	}

	// get mouse position on the canvas
	let mouseX = 0;
	let mouseY = 0;
	canvasWrapper.addEventListener("mousemove", function (event)
	{
		let pointer = getPointerPosition(event);
		mouseX = pointer.x;
		mouseY = pointer.y;
	});

	let scale = 1;
	let speed = 0;
	let instant = false;
	// make canvas zoomable
	canvasWrapper.addEventListener("wheel", function (event)
	{
		if (focusedCanvasNode)
		{
			// only skip if the focused node can be scrolled
			let sizer = focusedCanvasNode.querySelector(".markdown-preview-sizer");
			if(sizer && sizer.scrollHeight > sizer.parentElement.clientHeight) return;
		}

		event.preventDefault();
		event.stopPropagation();

		if(instant)
		{
			let scale = 1;
			scale -= event.deltaY / 700 * scale;
			scale = clamp(scale, 0.1, 10);
			let viewBounds = getViewBounds();
			scaleCanvasAroundPoint(scale, viewBounds.centerX, viewBounds.centerY);
		}
		else
		{
			let isFirstFrame = speed == 0;
			speed -= (event.deltaY / 200);
			const maxSpeed = 0.14 * scale;
			speed = clamp(speed, -maxSpeed, maxSpeed);
			if (isFirstFrame) requestAnimationFrame(scrollAnimation);
		}
	});

	let dt = 0;
	let lastTime = 0;
	let averageDt = 0;
	function scrollAnimation(currentTime)
	{
		dt = currentTime - lastTime;
		if (lastTime == 0) dt = 30;
		lastTime = currentTime;

		averageDt = dt * 0.05 + averageDt * 0.95;

		if (averageDt > 50)
		{
			console.log("Scrolling too slow, turning on instant scroll");
			instant = true;
			return;
		}

		let oldScale = scale;
		scale += speed * (dt / 1000) * 30;
		scale = clamp(scale, 0.1, 10);

		let viewBounds = getViewBounds();
		scaleCanvasAroundPoint(scale / oldScale, mouseX, mouseY);

		speed *= 0.4;
		if (Math.abs(speed) < 0.01) 
		{
			speed = 0;
			lastTime = 0;
		}
		else requestAnimationFrame(scrollAnimation);
	}

	// fit all nodes to view on initialization after centering the camera
	// after any animations have possibly played
	setTimeout(fitViewToCanvas, 300);
}

/**Gets the bounding rect of the voew-content or markdown-preview-sizer*/
function getViewBounds()
{
	let viewContentRect = viewContent.getBoundingClientRect();

	let minX = viewContentRect.x;
	let minY = viewContentRect.y;
	let maxX = viewContentRect.x + viewContentRect.width;
	let maxY = viewContentRect.y + viewContentRect.height;
	let centerX = viewContentRect.x + viewContentRect.width / 2;
	let centerY = viewContentRect.y + viewContentRect.height / 2;

	return { x: minX, y: minY, width: maxX - minX, height: maxY - minY, minX: minX, minY: minY, maxX: maxX, maxY: maxY, centerX: centerX, centerY: centerY };
}

/**Gets the bounding rect of all nodes in the canvas*/
function getNodesBounds()
{
	let minX = Infinity;
	let minY = Infinity;
	let maxX = -Infinity;
	let maxY = -Infinity;

	canvasNodes.forEach(function (node)
	{
		let nodeRect = node.getBoundingClientRect();

		if (nodeRect.x < minX) minX = nodeRect.x;
		if (nodeRect.y < minY) minY = nodeRect.y;
		if (nodeRect.x + nodeRect.width > maxX) maxX = nodeRect.x + nodeRect.width;
		if (nodeRect.y + nodeRect.height > maxY) maxY = nodeRect.y + nodeRect.height;

	});

	let x = minX;
	let y = minY;
	let width = maxX - minX;
	let height = maxY - minY;
	let centerX = minX + width / 2;
	let centerY = minY + height / 2;

	return { x: x, y: y, width: width, height: height, minX: minX, minY: minY, maxX: maxX, maxY: maxY, centerX: centerX, centerY: centerY };
}

function getCanvasBounds()
{
	let canvasRect = canvas.getBoundingClientRect();

	let x = canvasRect.x;
	let y = canvasRect.y;
	let width = canvasRect.width;
	let height = canvasRect.height;
	let centerX = canvasRect.x + canvasRect.width / 2;
	let centerY = canvasRect.y + canvasRect.height / 2;

	return { x: x, y: y, width: width, height: height, minX: x, minY: y, maxX: x + width, maxY: y + height, centerX: centerX, centerY: centerY };
}

/**Sets the relative scale of the canvas around a point*/
function scaleCanvasAroundPoint(scaleBy, aroundPointX, aroundPointY)
{
	let canvasBounds = getCanvasBounds();

	let xCenterToTarget = aroundPointX - canvasBounds.x;
	let yCenterToTarget = aroundPointY - canvasBounds.y;

	let xCenterPin = canvasBounds.x + xCenterToTarget * scaleBy;
	let yCenterPin = canvasBounds.y + yCenterToTarget * scaleBy;

	let offsetX = aroundPointX - xCenterPin;
	let offsetY = aroundPointY - yCenterPin;

	scaleCanvas(scaleBy);
	translateCanvas(offsetX, offsetY);
	return { x: offsetX, y: offsetY };
}

/**Sets the relative scale of the canvas*/
function scaleCanvas(scaleBy)
{
	let newScale = Math.max(scaleBy * canvas.style.scale, 0.001);
	canvas.style.scale = newScale;
	canvasWrapper.style.setProperty("--zoom-multiplier", (1/(Math.sqrt(newScale))) );
}

/**Sets the relative translation of the canvas*/
function translateCanvas(x, y)
{
	let translate = canvas.style.translate;
	let split = translate.split(" ");
	let translateX = split.length > 0 ? parseFloat(translate.split(" ")[0].trim()) : 0;
	let translateY = split.length > 1 ? parseFloat(translate.split(" ")[1].trim()) : translateX;

	canvas.style.translate = `${translateX + x}px ${translateY + y}px`;
}

/**Sets the absolute center of the view*/
function setViewCenter(x, y)
{
	let viewContentRect = getViewBounds();
	let deltaX = viewContentRect.centerX - x;
	let deltaY = viewContentRect.centerY - y;

	translateCanvas(deltaX, deltaY);
}

function getCanvasTranslation()
{
	let translate = canvas.style.translate;
	let split = translate.split(" ");
	let translateX = split.length > 0 ? parseFloat(translate.split(" ")[0].trim()) : 0;
	let translateY = split.length > 1 ? parseFloat(translate.split(" ")[1].trim()) : translateX;

	return { x: translateX, y: translateY };
}

/**Sets the absolute scale of the canvas background pattern*/
function scaleCanvasBackground(scaleBy)
{
	let scaleX = scaleBy * canvasBackgroundPattern.getAttribute("width");
	let scaleY = scaleBy * canvasBackgroundPattern.getAttribute("height");

	canvasBackgroundPattern.setAttribute("width", scaleX);
	canvasBackgroundPattern.setAttribute("height", scaleY);
}

/**Sets the absolute translation of the canvas background pattern*/
function translateCanvasBackground(x, y)
{
	canvasBackgroundPattern.setAttribute("x", x + canvasBackgroundPattern.getAttribute("x"));
	canvasBackgroundPattern.setAttribute("y", y + canvasBackgroundPattern.getAttribute("y"));
}

/**Fits the view to contain the given node*/
function fitViewToNode(node)
{
	let nodeRect = getElBounds(node);
	let viewContentRect = getViewBounds();
	let canvasBounds = getCanvasBounds();

	let scale = 0.8 * Math.min(viewContentRect.width/nodeRect.width, viewContentRect.height/nodeRect.height);
	
	let canvasX = canvasBounds.x;
	let canvasY = canvasBounds.y;

	let canvToNodeX = (nodeRect.centerX - canvasX) * scale;
	let canvToNodeY = (nodeRect.centerY - canvasY) * scale;

	let newNodeX = canvasX + canvToNodeX;
	let newNodeY = canvasY + canvToNodeY;
	
	let deltaX = viewContentRect.centerX - newNodeX;
	let deltaY = viewContentRect.centerY - newNodeY;

	nodeRect = getElBounds(node);

	canvas.style.transition = "scale 0.5s cubic-bezier(0.5, -0.1, 0.5, 1.1), translate 0.5s cubic-bezier(0.5, -0.1, 0.5, 1.1)";
	scaleCanvas(scale);
	translateCanvas(deltaX, deltaY);

	setTimeout(function()
	{
		canvas.style.transition = "";
	}, 550);
}

/**Fits the view to contain all nodes in the graph*/
function fitViewToCanvas()
{
	let nodesRect = getNodesBounds();
	let viewContentRect = getViewBounds();
	let canvasBounds = getCanvasBounds();

	let scale = 0.8 * Math.min(viewContentRect.width/nodesRect.width, viewContentRect.height/nodesRect.height);

	let canvasX = canvasBounds.x;
	let canvasY = canvasBounds.y;

	let canvToNodeX = (nodesRect.centerX - canvasX) * scale;
	let canvToNodeY = (nodesRect.centerY - canvasY) * scale;

	let newNodeX = canvasX + canvToNodeX;
	let newNodeY = canvasY + canvToNodeY;
	
	let deltaX = viewContentRect.centerX - newNodeX;
	let deltaY = viewContentRect.centerY - newNodeY;

	canvas.style.transition = "scale 0.5s cubic-bezier(0.5, -0.1, 0.5, 1.1), translate 0.5s cubic-bezier(0.5, -0.1, 0.5, 1.1)";
	scaleCanvas(scale);
	translateCanvas(deltaX, deltaY);

	setTimeout(function()
	{
		canvas.style.transition = "";
	}, 550);
}

//#endregion

//#region -----------------       Callouts      ----------------- 

function setupCallouts(setupOnNode)
{
	// MAKE CALLOUTS COLLAPSIBLE
    // if the callout title is clicked, toggle the display of .callout-content
	setupOnNode.querySelectorAll(".callout.is-collapsible .callout-title").forEach(function (element) 
	{
		element.addEventListener("click", function () 
		{
			var parent = this.parentElement;

			parent.classList.toggle("is-collapsed");
			element.querySelector(".callout-fold").classList.toggle("is-collapsed");

			slideToggle(parent.querySelector(".callout-content"), 100);
		});
	});

}

//#endregion

//#region -----------------      Checkboxes     ----------------- 

function setupCheckboxes(setupOnNode)
{
	// Fix checkboxed toggling .is-checked
	setupOnNode.querySelectorAll(".task-list-item-checkbox").forEach(function (element) 
	{
		element.addEventListener("click", function () 
		{
			var parent = this.parentElement;
			parent.classList.toggle("is-checked");
			parent.setAttribute("data-task", parent.classList.contains("is-checked") ? "x" : " ");
		});
	});

	setupOnNode.querySelectorAll(`.plugin-tasks-list-item input[type="checkbox"]`).forEach(function(checkbox)
	{
		checkbox.checked = checkbox.parentElement.classList.contains("is-checked");
	});

	setupOnNode.querySelectorAll('.kanban-plugin__item.is-complete').forEach(function(checkbox)
	{
		checkbox.querySelector('input[type="checkbox"]').checked = true;
	});
}

//#endregion

//#region -----------------     Code Blocks     ----------------- 

function setupCodeblocks(setupOnNode)
{
	// make code snippet block copy button copy the code to the clipboard
	setupOnNode.querySelectorAll(".copy-code-button").forEach(function (element) 
	{
		element.addEventListener("click", function () 
		{
			var code = this.parentElement.querySelector("code").textContent;
			navigator.clipboard.writeText(code);
			this.textContent = "Copied!";
			// set a timeout to change the text back
			setTimeout(function () 
			{
				setupOnNode.querySelectorAll(".copy-code-button").forEach(function (button) 
				{
					button.textContent = "Copy";
				});
			}, 2000);
		});
	});
}

//#endregion

//#region -----------------        Links        ----------------- 

function setupLinks(setupOnNode)
{
	setupOnNode.querySelectorAll(".internal-link, a.tag, .tree-link, .footnote-link").forEach(function(link)
	{
		link.addEventListener("click", function(event)
		{
			let target = link.getAttribute("href");

			event.preventDefault();
			event.stopPropagation();

			if(!target)
			{
				console.log("No target found for link");
				return;
			}
			
			let relativePathnameStrip = relativePathname.split("#")[0].split("?")[0];

			if(target.startsWith("#") || target.startsWith("?")) target = relativePathnameStrip + target;

			loadDocument(target, true, !link.classList.contains("tree-link"));
		});
	});
}

//#endregion

//#region -----------------      Sidebars       ----------------- 

function setupSidebars()
{
	if (!rightSidebar || !leftSidebar) return;

	//#region sidebar object references
	sidebarCollapseIcons[0].otherIcon = sidebarCollapseIcons[1];
	sidebarCollapseIcons[1].otherIcon = sidebarCollapseIcons[0];
	sidebarCollapseIcons[0].gutter = sidebarGutters[0];
	sidebarCollapseIcons[1].gutter = sidebarGutters[1];
	sidebarCollapseIcons[0].sidebar = sidebars[0];
	sidebarCollapseIcons[1].sidebar = sidebars[1];
	sidebarGutters[0].otherGutter = sidebarGutters[1];
	sidebarGutters[1].otherGutter = sidebarGutters[0];
	sidebarGutters[0].collapseIcon = sidebarCollapseIcons[0];
	sidebarGutters[1].collapseIcon = sidebarCollapseIcons[1];
	sidebars[0].otherSidebar = sidebars[1];
	sidebars[1].otherSidebar = sidebars[0];
	sidebars[0].gutter = sidebarGutters[0];
	sidebars[1].gutter = sidebarGutters[1];
	//#endregion

	sidebars.forEach(function (sidebar)
	{
		sidebar.collapsed = sidebar.classList.contains("is-collapsed");
		sidebar.collapse = function (collapsed = true)
		{
			if (!collapsed && this.temporarilyCollapsed && deviceSize == "large-screen") this.gutter.collapse(true);
					

			if (!collapsed && document.body.classList.contains("floating-sidebars"))
			{
				function clickOutsideCollapse(event)
				{
					// don't allow bubbling into sidebar
					if (event.target.closest(".sidebar")) return;

					sidebar.collapse(true);
					document.body.removeEventListener("click", clickOutsideCollapse);
				}

				document.body.addEventListener("click", clickOutsideCollapse);
			}

			// if there isn't enough space for both sidebars then close the other one
			if (deviceSize == "phone")
			{
				if (!collapsed) sidebar.otherSidebar.fullCollapse(true, true);
				if (collapsed) sidebar.gutter.otherGutter.collapse(false, true);
			}

			if (deviceSize == "tablet")
			{
				if (!collapsed) sidebar.otherSidebar.collapse(true);
			}

			this.classList.toggle("is-collapsed", collapsed);
			this.collapsed = collapsed;
		}
		sidebar.temporaryCollapse = function (collapsed = true)
		{
			this.temporarilyCollapsed = true;
			this.collapse(true);
			this.gutter.collapse(false);
			this.collapsed = collapsed;
		}
		sidebar.fullCollapse = function (collapsed = true, force = false)
		{
			this.collapse(collapsed);
			this.gutter.collapse(true, force);
			this.collapsed = collapsed;
		}
		sidebar.toggleCollapse = function ()
		{
			this.collapse(!this.collapsed);
		}
		sidebar.toggleFullCollapse = function ()
		{
			this.fullCollapse(!this.collapsed);
		}
	});

	sidebarGutters.forEach(function (gutter)
	{
		gutter.collapsed = gutter.classList.contains("is-collapsed");
		gutter.collapse = function (collapsed, force = false)
		{
			if(!force) return;

			this.classList.toggle("is-collapsed", collapsed);
			this.collapsed = collapsed;
		}
		gutter.toggleCollapse = function ()
		{
			this.collapse(!this.collapsed);
		}
	});

	sidebarCollapseIcons.forEach(function (icon)
	{
		icon.addEventListener("click", function (event)
		{
			event.stopPropagation();
			icon.sidebar.toggleCollapse();
		});
	});
	
	if (!isMobile()) setupSidebarResize();
}

function setupSidebarResize()
{
	let leftHandle = document.querySelector('.sidebar-left .sidebar-handle');
	let rightHandle = document.querySelector('.sidebar-right .sidebar-handle');
	if (!leftHandle || !rightHandle) return;
	let resizingSidebar = null;

	let minResizeWidth = parseFloat(getComputedStyle(leftHandle.parentElement).fontSize) * 15;
	let collapseWidth = minResizeWidth / 4.0;

	let rightWidth = localStorage.getItem('sidebar-right-width');
	let leftWidth = localStorage.getItem('sidebar-left-width');
	if (rightWidth) document.querySelector('.sidebar-right').style.setProperty('--sidebar-width', rightWidth);
	if (leftWidth) document.querySelector('.sidebar-left').style.setProperty('--sidebar-width', leftWidth);

	function resizeMove(e)
	{
		if (!resizingSidebar) return;
		
		let isLeft = resizingSidebar.classList.contains("sidebar-left");
		var distance = isLeft ? e.clientX : window.innerWidth - e.clientX;
		var newWidth = `min(max(${distance}px, 15em), 40vw)`; // 15em is minResizeWidth

		if (distance < collapseWidth)
		{
			resizingSidebar.collapse(true);
			resizingSidebar.style.removeProperty('transition-duration');
		} 
		else 
		{
			resizingSidebar.collapse(false);
			resizingSidebar.style.setProperty('--sidebar-width', newWidth);
			if (distance > minResizeWidth) resizingSidebar.style.transitionDuration = "0s";
		}
	}

	function handleClick(e) 
	{
		resizingSidebar = e.target.closest('.sidebar');
		resizingSidebar.classList.add('is-resizing');
		document.addEventListener('pointermove', resizeMove);
		document.addEventListener('pointerup', function () 
		{
			document.removeEventListener('pointermove', resizeMove);
			var finalWidth = getComputedStyle(resizingSidebar).getPropertyValue('--sidebar-width');

			let isLeft = resizingSidebar.classList.contains("sidebar-left");
			localStorage.setItem(isLeft ? 'sidebar-left-width' : 'sidebar-right-width', finalWidth);
			resizingSidebar.classList.remove('is-resizing');
			resizingSidebar.style.removeProperty('transition-duration');
		});
	}

	leftHandle.addEventListener('pointerdown', handleClick);
	rightHandle.addEventListener('pointerdown', handleClick);

	// reset sidebar width on double click
	function resetSidebarEvent(e)
	{
		let sidebar = e.target.closest('.sidebar');
		if (sidebar) 
		{
			sidebar.style.removeProperty('transition-duration');
			sidebar.style.removeProperty('--sidebar-width');
			let isLeft = sidebar.classList.contains("sidebar-left");
			localStorage.removeItem(isLeft ? 'sidebar-left-width' : 'sidebar-right-width');
		}
	}

	leftHandle.addEventListener('dblclick', resetSidebarEvent);
	rightHandle.addEventListener('dblclick', resetSidebarEvent);
}

/**Get the computed target sidebar width in px*/
function getSidebarWidthProp()
{
	return getComputedPixelValue("--sidebar-width");
}

//#endregion

//#region -----------------        Theme        ----------------- 

function setupThemeToggle()
{
	if (!themeToggle) return;

	if (localStorage.getItem("theme") != null)
    {
        setThemeToggle(localStorage.getItem("theme") == "light");
    }

	// set initial toggle state based on body theme class
	if (document.body.classList.contains("theme-light"))
	{
		setThemeToggle(true);
	}
	else
	{
		setThemeToggle(false);
	}

	function setThemeToggle(state, instant = false)
	{

		themeToggle.checked = state;

		if (instant) 
		{	
			var oldTransition = document.body.style.transition;
			document.body.style.transition = "none";
		}

		if(!themeToggle.classList.contains("is-checked") && state)
		{
			themeToggle.classList.add("is-checked");
		}
		else if (themeToggle.classList.contains("is-checked") && !state)
		{
			themeToggle.classList.remove("is-checked");
		}

		if(!state)
		{
			if (document.body.classList.contains("theme-light"))
			{
				document.body.classList.remove("theme-light");
			}

			if (!document.body.classList.contains("theme-dark"))
			{
				document.body.classList.add("theme-dark");
			}
		}
		else
		{
			if (document.body.classList.contains("theme-dark"))
			{
				document.body.classList.remove("theme-dark");
			}

			if (!document.body.classList.contains("theme-light"))
			{
				document.body.classList.add("theme-light");
			}
		}

		if (instant)
		{
			setTimeout(function()
			{
				document.body.style.transition = oldTransition;
			}, 100);
		}

		localStorage.setItem("theme", state ? "light" : "dark");
	}

    document.querySelector(".theme-toggle-input")?.addEventListener("change", event =>
	{
		let newVal = !(localStorage.getItem("theme") == "light");
		console.log("Theme toggle changed to: " + newVal);
		setThemeToggle(newVal);
	});
}

//#endregion

//#region -----------------        Scroll       -----------------

let flashElement = null;
let flashAnimation = null;
function scrollIntoView(element, options, animate = true)
{
	setTreeCollapsed(element, false, animate);
    
	const flashTiming = 
	{
		duration: 1500,
		iterations: 1,
		delay: 300,
	};

	const flashAnimationData =
	[
		{ opacity: 0 },
		{ opacity: 0.8 },
		{ opacity: 0.8 },
		{ opacity: 0.8 },
		{ opacity: 0.8 },
		{ opacity: 0.8 },
		{ opacity: 0 },
	];

	if(flashElement) 
	{
		flashElement.remove();
		flashAnimation.cancel();
	}

	flashElement = document.createElement("div");
	flashElement.classList.add("scroll-highlight");
	element.appendChild(flashElement);

	if(options) flashElement.scrollIntoView({ behavior: animate ? "smooth" : "auto", ...options });
	else flashElement.scrollIntoView({ behavior: animate ? "smooth" : "auto" });

	var savePos = element.style.position;
	element.style.position = "relative";

	flashAnimation = flashElement.animate(flashAnimationData, flashTiming);
	flashAnimation.onfinish = function()
	{
		flashElement.remove();
		element.style.position = savePos;
	}
}

function setupScroll(setupOnNode)
{
	// hide elements clipped by scrollable areas in markdown-preview-view elements
	if(documentType != "canvas") return;

	let markdownViews = Array.from(setupOnNode.querySelectorAll(".markdown-preview-view"));
	let nextMarkdownViewId = 0;

	let marginMultiplier = 0.1;
	let maxMargin = 150;
	let margin = 0;

	markdownViews.forEach(async function (view)
	{
		console.log("Setting up markdown view");
		let headers = Array.from(view.querySelectorAll(".heading-wrapper"));

		view.updateVisibleWindowMarkdown = function updateVisibleWindowMarkdown(allowVirtualization = true, allowDevirtualization = true)
		{
			let scrollBounds = view.getBoundingClientRect();
			margin = Math.min(scrollBounds.height * marginMultiplier, maxMargin);
			let scrollBoundsTop = scrollBounds.top - margin;
			let scrollBoundsBottom = scrollBounds.bottom + margin;

			async function updateHeader(header)
			{
				let bounds = header?.getBoundingClientRect();

				if (!bounds) return;
				
				let isClipped = (bounds.top < scrollBoundsTop && bounds.bottom < scrollBoundsTop) || (bounds.top > scrollBoundsBottom && bounds.bottom > scrollBoundsBottom);

				if (isClipped && allowVirtualization)
				{
					header.hide();
				}
				else if (!isClipped && allowDevirtualization)
				{
					header.show();
				}
			}

			for (let i = 0; i < headers.length; i++)
			{
				let h = headers[i];
				if(h) updateHeader(h);
			}
		}

		let lastScrollTop = 0;
		view.addEventListener("scroll", function()
		{
			if (Math.abs(view.scrollTop - lastScrollTop) > margin / 3)
			{
				view.updateVisibleWindowMarkdown(false, true);
			}

			lastScrollTop = view.scrollTop;
		});
	});

	async function periodicUpdate()
	{
		if(markdownViews.length > 0)
		{
			markdownViews[nextMarkdownViewId].updateVisibleWindowMarkdown();
			nextMarkdownViewId = (nextMarkdownViewId + 1) % markdownViews.length;
		}
	}
	
	setInterval(periodicUpdate, 200);
} 

//#endregion

//#region -----------------        Plugins      -----------------

// Excalidraw
function setupExcalidraw(setupOnNode)
{
	setupOnNode.querySelectorAll(".excalidraw-svg svg").forEach(function (svg)
	{
		let isLight = svg.querySelector("rect").getAttribute("fill") > "#7F7F7F";
		svg.classList.add(isLight ? "light" : "dark");
	});
}


//#endregion

//#region -----------------        Search      -----------------

// search box
let index;
let searchResults;

async function setupSearch() 
{
	if (isFileProtocol) return;
	searchInput = document.querySelector('input[type="search"]');
	if (!searchInput) return;

	const indexResp = await fetch('lib/search-index.json');
	const indexJSON = await indexResp.text();
	index = MiniSearch.loadJSON(indexJSON, { fields: ['title', 'path', 'tags', 'headers'] });

	const inputClear = document.querySelector('.search-input-clear-button');

	inputClear.addEventListener('click', (event) => 
	{
		search("");
	});

	searchInput.addEventListener('input', (event) => 
	{
		const query = event.target.value ?? "";

		if (startsWithAny(query, ["#", "tag:", "title:", "name:", "header:", "H:"]))
		{
			searchInput.style.color = "var(--text-accent)";
		}
		else
		{
			searchInput.style.color = "";
		}
		
		search(query);
	});

	searchResults = document.createElement('div');
	searchResults.setAttribute('id', 'search-results');
}

async function search(query)
{
	searchInput.value = query;

	// parse special query filters
	let searchFields = ['title', 'content', 'tags', 'headers', 'path'];
	if (query.startsWith("#")) searchFields = ['tags', 'headers'];
	if (query.startsWith("tag:"))
	{
		query = query.substring(query.indexOf(":") + 1);
		searchFields = ['tags'];
	}
	if (startsWithAny(query, ["title:", "name:"])) 
	{
		query = query.substring(query.indexOf(":") + 1);
		searchFields = ['title'];
	}
	if (startsWithAny(query, ["header:", "H:"]))
	{
		query = query.substring(query.indexOf(":") + 1);
		searchFields = ['headers'];
	}
	if (startsWithAny(query, ["path:"]))
	{
		query = query.substring(query.indexOf(":") + 1);
		searchFields = ['path'];
	}

	if (query.length >= 1)
	{
		const results = index.search(query, { prefix: true, fuzzy: 0.3, boost: { title: 4, headers: 3, tags: 2, path: 1 }, fields: searchFields });
		// search through the file tree and hide documents that don't match the search
		let showPaths = [];
		let hintLabels = [];
		for (let result of results)
		{
			// only show the most relevant results
			if (((result.score < results[0].score * 0.33 || showPaths.length > 12) && showPaths.length > 3) || result.score < results[0].score * 0.1) break;
			showPaths.push(result.path);

			let hints = [];
			let breakEarly = false;
			for (match in result.match)
			{
				if (result.match[match].includes("headers"))
				{
					for (let header of result.headers)
					{
						if (header.toLowerCase().includes(match.toLowerCase()))
						{
							hints.push(header);
							if (query.toLowerCase() != match.toLowerCase()) 
							{
								breakEarly = true;
								break;
							}
						}
					}
				}

				if (breakEarly) break;
			}

			hintLabels.push(hints);
		}

		let fileTree = document.querySelector(".file-tree");
		if (fileTree)
		{
			// filter the file tree and sort it by the order of the search results
			filterFileTree(showPaths, hintLabels, query).then(() =>
			sortFileTreeDocuments((a, b) => 
			{
				if (!a || !b) return 0;
				let aPath = getVaultRelativePath(a.firstChild.href);
				let bPath = getVaultRelativePath(b.firstChild.href);
				return showPaths.findIndex((path) => aPath.startsWith(path)) - showPaths.findIndex((path) => bPath.startsWith(path));
			}));
		}
		else
		{
			const list = document.createElement('div');
			results.slice(0, 10).forEach(result => {

				const item = document.createElement('div');
				item.classList.add('search-result');

				const link = document.createElement('a');
				link.classList.add('tree-link');

				const searchURL = result.path + '?mark=' + encodeURIComponent(query);
				link.setAttribute('href', searchURL);
				link.appendChild(document.createTextNode(result.title));
				item.appendChild(link);
				list.append(item);
			});

			searchResults.replaceChildren(list);
			searchInput.parentElement.after(searchResults);
			initializePageEvents(searchResults);
		}

	}
	else
	{
		if (searchResults && searchResults.parentElement) searchResults.parentNode.removeChild(searchResults);
		clearCurrentDocumentSearch();
		if (fileTree) clearFileTreeFilter().then(() => sortFileTreeAlphabetically());
	}

}

function startsWithAny(string, prefixes)
{
	for (let i = 0; i < prefixes.length; i++)
	{
		if (string.startsWith(prefixes[i])) return true;
	}

	return false;
}

async function searchCurrentDocument(query)
{
	clearCurrentDocumentSearch();
	const textNodes = getTextNodes(document.querySelector(".markdown-preview-sizer") ?? documentContainer);

	textNodes.forEach(async node =>
	{
		const content = node.nodeValue;
		const newContent = content.replace(new RegExp(query, 'gi'), match => `<mark>${match}</mark>`);

		if (newContent !== content) 
		{
			const tempDiv = document.createElement('div');
			tempDiv.innerHTML = newContent;
	
			const newNodes = Array.from(tempDiv.childNodes);
	
			newNodes.forEach(newNode => 
			{
				if (newNode.nodeType != Node.TEXT_NODE)
				{
					newNode.setAttribute('class', 'search-mark');
					
				}
				node.parentNode.insertBefore(newNode, node);
			});
	
			node.parentNode.removeChild(node);
		}
	});

	let firstMark = document.querySelector(".search-mark");

	// wait for page to fade in
	setTimeout(() => 
	{
		if(firstMark) scrollIntoView(firstMark, { behavior: "smooth", block: "start" });
	}, 500);
}

function clearCurrentDocumentSearch()
{
	document.querySelectorAll(".search-mark").forEach(node => 
	{
		node.outerHTML = node.innerHTML;
	});
}
  
function getTextNodes(element) 
{
	const textNodes = [];
	const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);

	let node;
	while (node = walker.nextNode()) {
		textNodes.push(node);
	}

	return textNodes;
}

//#endregion