/*!
 * The 2022 r/place Atlas
 * Copyright (c) 2017 Roland Rytz <roland@draemm.li>
 * Copyright (c) 2022 Place Atlas Initiative and contributors
 * Licensed under AGPL-3.0 (https://2022.place-atlas.stefanocoding.me/license.txt)
 */

const linesCanvas = document.getElementById("linesCanvas")
const linesContext = linesCanvas.getContext("2d")
let hovered = []

let previousScaleZoomOrigin
let previousZoom

const backgroundCanvas = document.createElement("canvas")
backgroundCanvas.width = canvasSize.x
backgroundCanvas.height = canvasSize.y
const backgroundContext = backgroundCanvas.getContext("2d")

const wrapper = document.getElementById("wrapper")
const bottomBar = document.getElementById("bottomBar")

const showListButton = document.getElementById("showListButton")
const offcanvasList = document.getElementById("offcanvasList")
const bsOffcanvasList = new bootstrap.Offcanvas(offcanvasList)

const offcanvasDraw = document.getElementById("offcanvasDraw")
const bsOffcanvasDraw = new bootstrap.Offcanvas(offcanvasDraw)

const objectsContainer = document.getElementById("objectsList")
const closeObjectsListButton = document.getElementById("closeObjectsListButton")
const objectsListOverflowNotice = document.getElementById("objectsListOverflowNotice")

const searchInput = document.getElementById("searchList")
const sortInput = document.getElementById("sort")

const entriesList = document.getElementById("entriesList")
let entriesListShown = false

const drawButton = document.getElementById("drawLink")
const objectEditNav = document.createElement("a")
objectEditNav.className = "btn btn-outline-primary"
objectEditNav.id = "objectEditNav"
objectEditNav.textContent = "Edit"

let atlas = null
window.atlas = atlas

let atlasOrder = []
window.atlasOrder = atlasOrder

const entriesLimit = 50
let entriesOffset = 0

const moreEntriesButton = document.createElement("button")
moreEntriesButton.innerHTML = "Show " + entriesLimit + " more"
moreEntriesButton.type = "button"
moreEntriesButton.className = "btn btn-primary d-block mb-2 mx-auto"
moreEntriesButton.id = "moreEntriesButton"
let showMoreEntries = () => {}

const moreEntriesObserver = new IntersectionObserver(entries => {
	for (const entry of entries) {
		if (!entry.isIntersecting) continue
		showMoreEntries()
		break
	}
})

moreEntriesObserver.observe(moreEntriesButton)

let defaultSort = sortInput.value

let lastPos = [0, 0]

let fixed = false; // Fix hovered items in place, so that clicking on links is possible

searchInput.addEventListener("input", function () {
	updateAtlas()
})

sortInput.addEventListener("input", function () {
	updateAtlas()
})

offcanvasDraw.addEventListener('show.bs.offcanvas', () => {
	wrapper.classList.remove('listHidden')
	wrapper.classList.add('listTransitioning')
	applyView()
})

offcanvasDraw.addEventListener('shown.bs.offcanvas', () => {
	wrapper.classList.remove('listTransitioning')
	applyView()
})

offcanvasDraw.addEventListener('hide.bs.offcanvas', () => {
	wrapper.classList.add('listHidden')
	wrapper.classList.add('listTransitioning')
	applyView()
})

offcanvasDraw.addEventListener('hidden.bs.offcanvas', () => {
	wrapper.classList.remove('listTransitioning')
	applyView()
})

offcanvasList.addEventListener('show.bs.offcanvas', () => {
	wrapper.classList.remove('listHidden')
	wrapper.classList.add('listTransitioning')
	applyView()
})

offcanvasList.addEventListener('shown.bs.offcanvas', e => {
	entriesListShown = true
	wrapper.classList.remove('listTransitioning')
	updateHovering(e)
	applyView()
	renderHighlight()
	renderLines()
})

offcanvasList.addEventListener('hide.bs.offcanvas', () => {
	wrapper.classList.add('listHidden')
	wrapper.classList.add('listTransitioning')
	applyView()
})

offcanvasList.addEventListener('hidden.bs.offcanvas', e => {
	entriesListShown = false
	wrapper.classList.remove('listTransitioning')
	updateHovering(e)
	applyView()
	renderHighlight()
	renderLines()
})

closeObjectsListButton.addEventListener("click", clearObjectsList)

function clearObjectsList() {
	hovered = []
	fixed = false
	renderLines()
	renderHighlight()
	document.title = pageTitle
	closeObjectsListButton.classList.add("d-none")
	objectsListOverflowNotice.classList.add("d-none")
	entriesList.classList.remove("disableHover")
	objectsContainer.replaceChildren()
	objectEditNav.remove()
	updateHash(false)
}

function toggleFixed(e, tapped) {
	if (!fixed && hovered.length === 0) {
		entriesList.classList.remove("disableHover")
		return
	}
	fixed = !fixed
	if (!fixed) {
		updateHovering(e, tapped)
		renderHighlight()
	}
	entriesList.classList.add("disableHover")
	objectsListOverflowNotice.classList.add("d-none")
}

window.addEventListener("dblClick", renderLines)
window.addEventListener("wheel", renderLines)

objectsContainer.addEventListener("scroll", () => {
	renderLines()
})

window.addEventListener("resize", () => {
	applyView()
	renderHighlight()
	renderLines()

})

async function renderLines() {
	if (hovered.length === 0) {
		linesContext.clearRect(0, 0, linesCanvas.width, linesCanvas.height)
		return
	}
	// Line border
	linesCanvas.width = linesCanvas.clientWidth
	linesCanvas.height = linesCanvas.clientHeight
	linesContext.lineCap = "round"
	linesContext.lineWidth = Math.max(Math.min(zoom * 1.5, 16 * 1.5), 6)
	linesContext.strokeStyle = "#222"

	for (let i = 0; i < hovered.length; i++) {
		const element = hovered[i].element

		if (element.getBoundingClientRect().left !== 0) {

			linesContext.beginPath()
			// Align line based on which side the card is on
			if ((element.getBoundingClientRect().left + element.clientWidth / 2) < (document.documentElement.clientWidth / 2)) {
				linesContext.moveTo(
					element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth - 5,
					element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
				)
			} else {
				linesContext.moveTo(
					element.getBoundingClientRect().left + document.documentElement.scrollLeft + 5,
					element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
				)
			}
			linesContext.lineTo(
				~~((hovered[i].center[0] - canvasOffset.x) * zoom) + innerContainer.offsetLeft,
				~~((hovered[i].center[1] - canvasOffset.y) * zoom) + innerContainer.offsetTop
			)
			linesContext.stroke()
		}
	}

	// Line body
	linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4)
	linesContext.strokeStyle = "#FFFFFF"

	for (let i = 0; i < hovered.length; i++) {
		const element = hovered[i].element

		if (element.getBoundingClientRect().left !== 0) {

			linesContext.beginPath()
			// Align line based on which side the card is on
			if ((element.getBoundingClientRect().left + element.clientWidth / 2) < (document.documentElement.clientWidth / 2)) {
				linesContext.moveTo(
					element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth - 5,
					element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
				)
			} else {
				linesContext.moveTo(
					element.getBoundingClientRect().left + document.documentElement.scrollLeft + 5,
					element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
				)
			}
			linesContext.lineTo(
				~~((hovered[i].center[0] - canvasOffset.x) * zoom) + innerContainer.offsetLeft,
				~~((hovered[i].center[1] - canvasOffset.y) * zoom) + innerContainer.offsetTop
			)
			linesContext.stroke()
		}
	}
}

function renderBackground(atlas) {

	backgroundContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)

	//backgroundCanvas.width = 1000 * zoom
	//backgroundCanvas.height = 1000 * zoom

	//backgroundContext.lineWidth = zoom

	backgroundContext.fillStyle = "rgba(0, 0, 0, 0.6)"
	backgroundContext.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height)

	for (const entry of Object.values(atlas)) {

		const path = entry.path

		backgroundContext.beginPath()

		if (path[0]) {
			//backgroundContext.moveTo(path[0][0]*zoom, path[0][1]*zoom)
			backgroundContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
		}

		for (let p = 1; p < path.length; p++) {
			//backgroundContext.lineTo(path[p][0]*zoom, path[p][1]*zoom)
			backgroundContext.lineTo(path[p][0] - canvasOffset.x, path[p][1] - canvasOffset.y)
		}

		backgroundContext.closePath()

		let bgStrokeStyle
		switch (entry.diff) {
			case "add":
				bgStrokeStyle = "rgba(0, 255, 0, 1)"
				backgroundContext.lineWidth = 2
				break
			case "edit":
				bgStrokeStyle = "rgba(255, 255, 0, 1)"
				backgroundContext.lineWidth = 2
				break
			case "delete":
				bgStrokeStyle = "rgba(255, 0, 0, 1)"
				backgroundContext.lineWidth = 2
				break
			default:
				bgStrokeStyle = "rgba(255, 255, 255, 0.8)"
				break
		}
		backgroundContext.strokeStyle = bgStrokeStyle
		backgroundContext.stroke()
		backgroundContext.lineWidth = 1


	}

}

function filterAtlas(prevAtlas) {

	const sort = sortInput.value || defaultSort
	const search = searchInput?.value.toLowerCase()
	let newAtlas = Object.assign({}, prevAtlas)
	let newAtlasOrder = []

	document.getElementById("atlasSize").innerHTML = ""

	if (search) {
		for (const [id, entry] of Object.entries(prevAtlas)) {
			if (!(
				entry.name.toLowerCase().includes(search.toLowerCase()) ||
				entry.description?.toLowerCase().includes(search.toLowerCase()) ||
				Object.values(entry.links).flat().some(str => str.toLowerCase().includes(search)) ||
				id.toString() === search
			)) delete newAtlas[id]
		}
	}

	// document.getElementById("sort").value = sort

	let sortFunction

	switch (sort) {
		case "shuffle":
			sortFunction = () => Math.random() - 0.5
			break
		case "alphaAsc":
			sortFunction = (a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())
			break
		case "alphaDesc":
			sortFunction = (a, b) => b.name.toLowerCase().localeCompare(a.name.toLowerCase())
			break
		case "newest":
			sortFunction = (a, b) => b._index - a._index
			break
		case "oldest":
			sortFunction = (a, b) => a._index - b._index
			break
		case "area":
			sortFunction = (a, b) => calcPolygonArea(b.path) - calcPolygonArea(a.path)
			break
		case "relevant":
			sortFunction = (a, b) => {
				if (a.name.toLowerCase().includes(filter) && b.name.toLowerCase().includes(filter)) {
					return a.name.toLowerCase().indexOf(filter) - b.name.toLowerCase().indexOf(filter) || a.name.toLowerCase().localeCompare(b.name.toLowerCase())
				} else if (a.name.toLowerCase().includes(filter)) {
					return -1
				} else if (b.name.toLowerCase().includes(filter)) {
					return 1
				} else {
					return a.description.toLowerCase().indexOf(filter) - b.description.toLowerCase().indexOf(filter) || a.name.toLowerCase().localeCompare(b.name.toLowerCase())
				}
			}
			break
	}

	newAtlasOrder = Object.keys(newAtlas)
	if (sortFunction) {
		newAtlasOrder = newAtlasOrder.sort((a, b) => sortFunction(prevAtlas[a], prevAtlas[b]))
	}

	// console.log(newAtlas, newAtlasOrder)

	return [newAtlas, newAtlasOrder]

}

function updateAtlas() {
	;[atlas, atlasOrder] = filterAtlas(atlasAll)
	;[atlasDisplay, atlasOrder] = generateAtlasDisplay(atlas, atlasOrder, currentPeriod, currentVariation)
	const atlasSizeEl = document.getElementById("atlasSize")
	if (Object.keys(atlas).length === Object.keys(atlasAll).length) {
		atlasSizeEl.innerHTML = Object.keys(atlasAll).length + " entries in total."
	} else {
		atlasSizeEl.innerHTML = "Found " + Object.keys(atlas).length + " entries."
	}
	atlasSizeEl.innerHTML += " Displaying " + Object.keys(atlasDisplay).length + " entries."
	resetEntriesList()
	renderBackground(atlasDisplay)
	renderHighlight(atlasDisplay)
}

async function resetEntriesList() {
	entriesOffset = 0
	entriesList.replaceChildren()
	entriesList.appendChild(moreEntriesButton)

	moreEntriesButton.removeEventListener('click', showMoreEntries)
	showMoreEntries = () => {

		if (entriesList.contains(moreEntriesButton)) {
			entriesList.removeChild(moreEntriesButton)
		}

		let entriesLeft = entriesLimit
		let element

		while (entriesLeft > 0 && atlasOrder.length > entriesOffset) {

			if (atlasDisplay[atlasOrder[entriesOffset]]) {
				// console.log(i, entriesLeft)

				let entry = atlasDisplay[atlasOrder[entriesOffset]]
				element = createInfoBlock(entry)

				element.addEventListener("mouseenter", function () {
					if (fixed || dragging) return
					objectsContainer.replaceChildren()

					previousScaleZoomOrigin ??= [...scaleZoomOrigin]
					previousZoom ??= zoom
					setView(entry.center[0], entry.center[1], calculateZoomFromPath(entry.path))

					hovered = [entry]
					renderHighlight()
					hovered[0].element = this
					renderLines()

				})

				element.addEventListener("click", e => {
					fixed = true
					previousScaleZoomOrigin ??= [...scaleZoomOrigin]
					previousZoom ??= zoom
					applyView()
				})

				element.addEventListener("mouseleave", () => {
					if (fixed || dragging) return

					scaleZoomOrigin = [...previousScaleZoomOrigin]
					zoom = previousZoom
					previousScaleZoomOrigin = undefined
					previousZoom = undefined
					applyView()

					hovered = []
					renderLines()
					renderHighlight()
				})
			} else {
				let entry = atlas[atlasOrder[entriesOffset]]
				element = createInfoBlock(entry, 1)

				element.addEventListener("click", async e => {
					e.preventDefault()
					const [nearestPeriod, nearestVariation] = getNearestPeriod(entry, currentPeriod, currentVariation)

					await updateTime(nearestPeriod, nearestVariation, true)

					entry = atlasDisplay[entry.id]
					element = createInfoBlock(entry)
					hovered = [{ ...entry, element }]
					fixed = true
					previousScaleZoomOrigin = undefined
					previousZoom = undefined

					const hash = formatHash(entry.id, nearestPeriod, nearestVariation, entry.center[0], entry.center[1], calculateZoomFromPath(entry.path))
					location.hash = hash
				})
			}

			entriesOffset += 1
			entriesLeft -= 1

			entriesList.appendChild(element)

		}

		if (atlasOrder.length > entriesOffset) {
			moreEntriesButton.innerHTML = "Show " + Math.min(entriesLimit, atlasOrder.length - entriesOffset) + " more"
			entriesList.appendChild(moreEntriesButton)
		}

	}
	moreEntriesButton.addEventListener('click', showMoreEntries)
	showMoreEntries()
}

async function renderHighlight() {

	highlightContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)

	//canvas.width = 1000*zoom
	//canvas.height = 1000*zoom

	highlightContext.globalCompositeOperation = "source-over"
	highlightContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)

	if (hovered.length > 0) {
		container.style.cursor = "pointer"
	} else {
		container.style.cursor = "default"
	}

	for (let i = 0; i < hovered.length; i++) {

		const path = hovered[i].path

		highlightContext.beginPath()

		if (path[0]) {
			//context.moveTo(path[0][0]*zoom, path[0][1]*zoom)
			highlightContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
		}

		for (let p = 1; p < path.length; p++) {
			//context.lineTo(path[p][0]*zoom, path[p][1]*zoom)
			highlightContext.lineTo(path[p][0] - canvasOffset.x, path[p][1] - canvasOffset.y)
		}

		highlightContext.closePath()

		highlightContext.globalCompositeOperation = "source-over"

		highlightContext.fillStyle = "rgba(0, 0, 0, 1)"
		highlightContext.fill()
	}

	highlightContext.globalCompositeOperation = "source-out"
	highlightContext.drawImage(backgroundCanvas, 0, 0)

	for (let i = 0; i < hovered.length; i++) {

		const path = hovered[i].path

		highlightContext.beginPath()

		if (path[0]) {
			//context.moveTo(path[0][0]*zoom, path[0][1]*zoom)
			highlightContext.moveTo(path[0][0] - canvasOffset.x, path[0][1] - canvasOffset.y)
		}

		for (let p = 1; p < path.length; p++) {
			//context.lineTo(path[p][0]*zoom, path[p][1]*zoom)
			highlightContext.lineTo(path[p][0] - canvasOffset.x, path[p][1] - canvasOffset.y)
		}

		highlightContext.closePath()

		highlightContext.globalCompositeOperation = "source-over"

		let hoverStrokeStyle
		switch (hovered[i].diff) {
			case "add":
				hoverStrokeStyle = "rgba(0, 155, 0, 1)"
				break
			case "edit":
				hoverStrokeStyle = "rgba(155, 155, 0, 1)"
				break
			default:
				hoverStrokeStyle = "rgba(0, 0, 0, 1)"
				break
		}
		highlightContext.strokeStyle = hoverStrokeStyle
		//context.lineWidth = zoom
		highlightContext.stroke()
	}

}

function updateCoordsDisplay(e) {
	const pos = [
		(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom + canvasOffset.x,
		(e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom + canvasOffset.y
	]
	const coordsEl = document.getElementById("coords_p")

	// Displays coordinates as zero instead of NaN
	if (isNaN(pos[0])) {
		coordsEl.textContent = "0, 0"
	} else {
		coordsEl.textContent = Math.floor(pos[0]) + ", " + Math.floor(pos[1])
	}

	return pos
}

function updateHovering(e, tapped) {

	if (dragging || (fixed && !tapped)) return
	const pos = updateCoordsDisplay(e)

	if (!(pos[0] <= canvasSize.x + canvasOffset.x + 200 && pos[0] >= canvasOffset.x - 200 && pos[1] <= canvasSize.y + canvasOffset.y + 200 && pos[1] >= canvasOffset.x - 200)) return

	let newHovered = []
	for (const entry of Object.values(atlasDisplay)) {
		if (pointIsInPolygon(pos, entry.path)) newHovered.push(entry)
	}

	newHovered = newHovered.sort(function (a, b) {
		return calcPolygonArea(a.path) - calcPolygonArea(b.path)
	})

	let changed = false

	if (hovered.length === newHovered.length) {
		for (let i = 0; i < hovered.length; i++) {
			if (hovered[i].id !== newHovered[i].id) {
				changed = true
				break
			}
		}
	} else {
		changed = true
	}

	if (!changed) return

	hovered = newHovered

	objectsContainer.replaceChildren()

	for (const entry of hovered) {
		const element = createInfoBlock(entry)

		objectsContainer.appendChild(element)

		entry.element = element
	}

	if (hovered.length) {
		document.getElementById("timeControlsSlider").blur()
		closeObjectsListButton.classList.remove("d-none")
		if ((objectsContainer.scrollHeight > objectsContainer.clientHeight) && !tapped) {
			objectsListOverflowNotice.classList.remove("d-none")
		} else {
			objectsListOverflowNotice.classList.add("d-none")
		}
	} else {
		closeObjectsListButton.classList.add("d-none")
		objectsListOverflowNotice.classList.add("d-none")
		entriesList.classList.remove("disableHover")
	}
	renderLines()
	renderHighlight()
}

window.addEventListener("hashchange", updateViewFromHash)

async function updateViewFromHash() {

	const hash = window.location.hash.substring(1); //Remove hash prefix
	let [hashEntryId, hashPeriod, hashX, hashY, hashZoom] = hash.split('/')

	// Handle zzz and 0.. prefix
	let newId = hashEntryId.replace(/^zzz([a-z0-9]{8,})$/g, "$1").replace(/^0+/, '')
	if (hashEntryId !== newId) {
		hashEntryId = newId
		const newLocation = new URL(window.location)
		newLocation.hash = '#' + [newId, hashPeriod, hashX, hashY, hashZoom].join('/')
		history.replaceState({}, "", newLocation)
	}

	let targetPeriod, targetVariation

	if (hashPeriod) {
		[targetPeriod, , targetVariation] = parsePeriod(hashPeriod)
	} else {
		targetPeriod = defaultPeriod
		targetVariation = defaultVariation
	}
	await updateTime(targetPeriod, targetVariation)

	setView(
		(isNaN(hashX) || hashX === '') ? undefined : Number(hashX),
		(isNaN(hashY) || hashY === '') ? undefined : Number(hashY),
		(isNaN(hashZoom) || hashZoom === '') ? undefined : Number(hashZoom)
	)

	if (!hashEntryId) return

	// Highlight entry from hash

	const entry = atlasDisplay[hashEntryId]
	if (!entry) return

	document.title = entry.name + " on " + pageTitle

	if ((!entry.diff || entry.diff !== "delete")) {
		objectEditNav.href = "./?mode=draw&id=" + hashEntryId
		objectEditNav.title = "Edit " + entry.name
		if (!objectEditNav.isConnected) {
			showListButton.parentElement.appendChild(objectEditNav)
		}
	} else if (entry.diff === "delete" && document.getElementById("objectEditNav")) {
		objectEditNav.remove()
	}

	const infoElement = createInfoBlock(entry)
	objectsContainer.replaceChildren()
	objectsContainer.appendChild(infoElement)

	setView(
		(isNaN(hashX) || hashX === '') ? entry.center[0] : Number(hashX),
		(isNaN(hashY) || hashY === '') ? entry.center[1] : Number(hashY),
		(isNaN(hashZoom) || hashZoom === '') ? calculateZoomFromPath(entry.path) : Number(hashZoom)
	)

	closeObjectsListButton.classList.remove("d-none")
	entriesList.classList.add("disableHover")

	hovered = [{...entry, element: infoElement}]
	renderBackground(atlasDisplay)
	renderHighlight(atlasDisplay)
	renderLines()
}

function calculateZoomFromPath(path) {

	let zoom
	let boundingBox = [canvasSize.x + canvasOffset.x, canvasOffset.x, canvasSize.y + canvasOffset.y, canvasOffset.y]
	path?.forEach(([x, y]) => {
		boundingBox[0] = Math.min(boundingBox[0], x)
		boundingBox[1] = Math.max(boundingBox[1], x)
		boundingBox[2] = Math.min(boundingBox[2], y)
		boundingBox[3] = Math.max(boundingBox[3], y)
	})
	const boundingBoxSize = [boundingBox[1] - boundingBox[0], boundingBox[3] - boundingBox[2]]
	const clientSize = [
		Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
		Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
	]
	zoom = Math.min(clientSize[0] / boundingBoxSize[0], clientSize[1] / boundingBoxSize[1])
	zoom = Math.min(4, zoom/2)

	return zoom

}

function initView() {

	updateAtlas()

	document.addEventListener('timeupdate', () => {
		updateAtlas()
	})

	// parse linked atlas entry id from link hash
	/*if (window.location.hash.substring(3)){
		zoom = 4
		applyView()
		updateViewFromHash()
	}*/

	applyView()
	renderLines()

}

function initExplore() {
	window.updateHovering = updateHovering
	window.renderHighlight = () => { }

	function updateHovering(e, tapped) {
		if (dragging || (fixed && !tapped)) return
		updateCoordsDisplay(e)
	}

	renderBackground({})

	applyView()

}

function initGlobal() {
	container.addEventListener("mousemove", e => {
		if (e.sourceCapabilities) {
			if (!e.sourceCapabilities.firesTouchEvents) {
				updateHovering(e)
			}
		} else {
			updateHovering(e)
		}
	})

	document.addEventListener('timeupdate', () => {
		updateHash()
	})
}

function initViewGlobal() {
	container.addEventListener("mousedown", e => {
		lastPos = [
			e.clientX,
			e.clientY
		]
	})

	container.addEventListener("touchstart", e => {
		if (e.touches.length === 1) {
			lastPos = [
				e.touches[0].clientX,
				e.touches[0].clientY
			]
		}
	}, { passive: true })

	container.addEventListener("mouseup", e => {
		if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4) {
			toggleFixed(e)
		}
	})

	container.addEventListener("touchend", e => {
		e.preventDefault()

		if (e.changedTouches.length !== 1) return

		e = e.changedTouches[0]

		if (Math.sqrt(Math.pow(lastPos[0] - e.clientX, 2) + Math.pow(lastPos[1] - e.clientY, 2)) < 10)
			setTimeout(() => updateHovering(e, true), 0)

		dragging = false
		fixed = false
	})

	if (window.location.hash) { // both "/" and just "/#" will be an empty hash string
		updateViewFromHash()
	}

	document.addEventListener('timeupdate', event => {
		drawButton.href = "./?mode=draw" + formatHash(null, event.detail.period, event.detail.variation)
	})

	document.addEventListener("mouseleave", () => {
		if (!fixed) clearObjectsList()
	})
}


async function loadTemplateData(initUrl, datas, blacklistUrls, level = 0) {
	datas ??= {}
	blacklistUrls ??= new Set()

	if (datas[initUrl] || blacklistUrls.has(initUrl)) return [ datas, blacklistUrls ]

	datas[initUrl] = {}

	try {
		const data = await (await fetch(initUrl)).json()
		datas[initUrl] = data
		for (const blacklisted of data?.blacklist) {
			blacklistUrls.add(blacklisted.url)
		}
		await Promise.all(data?.whitelist.map(async wl => {
			const [ wlDatas, wlBlacklistUrls ] = await loadTemplateData(wl.url, datas, blacklistUrls, level + 1)
			Object.assign(datas, wlDatas)
			blacklistUrls.add(...wlBlacklistUrls)
		}))
	} catch (e) {}

	return [ datas, [...blacklistUrls] ]
}

async function loadTemplateImages(datas) {

	const templates = []

	for (const data of Object.values(datas)) {
		if (!data?.templates) continue
		for (const template of data?.templates) {
			templates.push(template)
		}
	}

	await Promise.all(templates.map(async (template, i) => {

		if (!template.sources) return

		for (const source of template.sources) {
			try {
				const sourceResponse = await (await fetch(source)).blob()
				template.blob = URL.createObjectURL(sourceResponse)
				break
			} catch (e) {}
		}
		delete template.sources

		if (!template.blob) return

		const imageLayer = new Image()
		await new Promise(resolve => {
			imageLayer.onload = () => {
				template.imageLayer = imageLayer
				delete template.blob
				resolve()
			}
			imageLayer.onerror = () => {
				delete template
				resolve()
			}
			imageLayer.src = template.blob
		})
	}))

	for (const layer of templates) {
		if (!layer.imageLayer) delete layer
	}

	return templates

}