ui.js

const UNIX_BASE_TICKS = 62135596800000; //divided by 10000

const UI = {
	lastActivity: Date.now(),
	lastUpdateFilter: "",
	regionalFormat: "sys",
	onMobile: (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)),

	Initialize: ()=> {
		for (let i = 0; i < 12; i++) { //clock dots
			const newDot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
			newDot.setAttribute("r", i % 3 == 0 ? 2.5 : 1.5);
			newDot.setAttribute("cx", 48 + Math.sin(i * 30 / 57.29577951) * 36);
			newDot.setAttribute("cy", 48 - Math.cos(i * 30 / 57.29577951) * 36);
			newDot.setAttribute("fill", "var(--clr-contrast)");
			analog_clock.appendChild(newDot);
		}

		//automatically disable animations if prefers-reduced-motion
		if (window.matchMedia('(prefers-reduced-motion)').matches && localStorage.getItem("animations") === null) {
			localStorage.setItem("animations", "false");
		}

		WIN.always_maxed = localStorage.getItem("w_always_maxed") === "true";
		taskbar.className = localStorage.getItem("w_tasktooltip") === "false" ? "no-tooltip" : "";
		document.body.className = localStorage.getItem("animations") !== "false" ? "" : "disable-animations";

		analog_clock.style.visibility = date_calendar.style.visibility = localStorage.getItem("desk_datetime") !== "false" ? "visible" : "hidden";
		analog_clock.style.opacity    = date_calendar.style.opacity    = localStorage.getItem("desk_datetime") !== "false" ? "1" : "0";

		container.className = "";
		if (localStorage.getItem("w_popout") !== "true") container.classList.add("no-popout");
		if (localStorage.getItem("w_dropshadow") === "false") container.classList.add("disable-window-dropshadows");
		if (localStorage.getItem("glass") !== "false") container.classList.add("glass");
		UI.AttachGlass(menubox);
		UI.AttachGlass(contextmenu);

		let accentColor;
		try {
			accentColor = localStorage.getItem("accent_color") ?
				JSON.parse(localStorage.getItem("accent_color")) : [255, 102, 0];
		}
		catch {
			localStorage.removeItem("accent_color");
			accentColor = [];
		}

		let accentSaturation = localStorage.getItem("accent_saturation") ?
			localStorage.getItem("accent_saturation") : 100;

		if (accentSaturation !== 100) {
			UI.SetAccentColor(accentColor, accentSaturation / 100);
		}

		let scrollBarStyle = localStorage.getItem("scrollbar_style") ?
		localStorage.getItem("scrollbar_style") : "thin";
		container.classList.add(`scrollbar-${scrollBarStyle}`);

		document.documentElement.style.colorScheme = localStorage.getItem("color_mode") ?? "light dark";

		UI.regionalFormat = localStorage.getItem("regional_format") ?
			localStorage.getItem("regional_format") : "sys";

		const pos = JSON.parse(localStorage.getItem("menu_button_pos")) ?? {
			borderRadius: "8px 48px 8px 4px",
			left: "0px",
			top: "calc(100% - 48px)",
			width: "48px",
			height: "48px",
			l_left: "8px",
			l_top: "48px",
			l_width: "26px",
			l_height: "26px"
		};
		if (pos) {
			menubutton.style.borderRadius = pos.borderRadius;
			menubutton.style.left = pos.left;
			menubutton.style.top = pos.top;
			menubutton.style.width = pos.width;
			menubutton.style.height = pos.height;

			const logo = menubutton.children[0];
			logo.style.left = pos.l_left;
			logo.style.top = pos.l_top;
			logo.style.width = pos.l_width;
			logo.style.height = pos.l_height;

			if (pos.l_top === "48px") {
				MENU.isDetached = false;
				attachedmenubutton.style.transform = "none";
				attachedmenubutton.style.boxShadow = "#202020 0 0 0 3px inset";
				menubutton.style.transform = "scaleY(0)";
				menubutton.children[0].style.top = "48px";
			}
			else {
				MENU.isDetached = true;
			}
		}
	},

	glassTemplate: null,

	//Template of the glass effect: an SVG displacement filter (refraction) and a slot for any content.
	GetGlassTemplate: ()=> {
		if (UI.glassTemplate) return UI.glassTemplate;

		const size = 256;
		const radius    = .5;  //corner radius, relative to the size
		const edge      = .25; //width of the refracting rim, relative to the size
		const amplitude = .6;  //displacement on the middle of the edges, the corners saturate
		const inner     = .5 - radius;

		const canvas = document.createElement("canvas");
		canvas.width = canvas.height = size;
		const ctx = canvas.getContext("2d");
		const pixels = ctx.createImageData(size, size);
		for (let y = 0; y < size; y++) {
			for (let x = 0; x < size; x++) {
				const px = (x + .5) / size - .5;
				const py = (y + .5) / size - .5;
				const qx = Math.abs(px) - inner;
				const qy = Math.abs(py) - inner;

				let distance, nx, ny;
				if (qx > 0 && qy > 0) {
					const length = Math.hypot(qx, qy);
					distance = radius - length;
					nx = qx / length;
					ny = qy / length;
				}
				else if (qx > qy) {
					distance = radius - qx;
					nx = 1; ny = 0;
				}
				else {
					distance = radius - qy;
					nx = 0; ny = 1;
				}
				nx *= Math.sign(px);
				ny *= Math.sign(py);

				const strength = amplitude * Math.pow(Math.max(0, 1 - distance / edge), 2);

				const i = (y * size + x) * 4;
				pixels.data[i]     = 128 + 127 * nx * strength;
				pixels.data[i + 1] = 128 + 127 * ny * strength;
				pixels.data[i + 2] = 128 * (1 - .7 * Math.min(1, strength)); //unused by the filter, only for looks
				pixels.data[i + 3] = 255;
			}
		}
		ctx.putImageData(pixels, 0, 0);
		const map = canvas.toDataURL("image/png");

		//noise, added on top of the map inside the filter, so the grain has the same pixel size on any element
		const noiseFrequency = .03; //grain size: higher is finer
		const noiseAmount    = .3;  //how much the noise moves the backdrop, 0 disables it

		const template = document.createElement("template");
		template.innerHTML =
			`<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" aria-hidden="true" style="position:absolute;pointer-events:none">` +
				`<filter id="displacementFilter" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">` +
					`<feImage href="${map}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="shape"/>` +
					`<feTurbulence type="fractalNoise" baseFrequency="${noiseFrequency}" numOctaves="2" seed="7" result="grain"/>` +
					`<feColorMatrix in="grain" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0 1" result="noise"/>` + //opaque noise
					`<feComposite in="shape" in2="noise" operator="arithmetic" k1="0" k2="1" k3="${noiseAmount}" k4="${-noiseAmount / 2}" result="map"/>` + //shape + (noise - .5) * amount
					`<feDisplacementMap in="SourceGraphic" in2="map" scale="24" xChannelSelector="R" yChannelSelector="G"/>` +
				`</filter>` +
			`</svg>` +
			`<slot></slot>`;

		UI.glassTemplate = template;
		return template;
	},

	//Adds the glass filter to the document (once). #displacementFilter is the prototype that UI.AttachGlass clones.
	InstallGlassFilter: ()=> {
		if (document.getElementById("displacementFilter")) return;

		//firefox and safari accept url() in backdrop-filter but render nothing, so keep the plain blur there.
		//navigator.userAgentData only exists in chromium browsers.
		if ("userAgentData" in navigator) document.documentElement.classList.add("refraction");

		const svg = UI.GetGlassTemplate().content.querySelector("svg").cloneNode(true);
		svg.id = "glassFilters";
		document.body.appendChild(svg);
	},

	glassCount: 0,

	//map: optional displacement map (data url) to use instead of the rounded rectangle, see UI.SetGlassMap
	AttachGlass: (element, map = null)=> {
		UI.InstallGlassFilter();
		if (element.glassFilter || !document.documentElement.classList.contains("refraction")) return;

		const filter = document.getElementById("displacementFilter").cloneNode(true);
		filter.id = `glass-${++UI.glassCount}`;
		filter.setAttribute("filterUnits", "userSpaceOnUse");
		const image = filter.querySelector("feImage");
		if (map) image.setAttribute("href", map);
		document.getElementById("glassFilters").appendChild(filter);

		element.glassFilter = filter;
		element.style.setProperty("--glass-filter", `url(#${filter.id})`);

		const observer = new ResizeObserver(()=> {
			if (!element.isConnected) { //removed from the page
				observer.disconnect();
				filter.remove();
				element.glassFilter = null;
				return;
			}

			const width = element.offsetWidth, height = element.offsetHeight;
			if (width === 0 || height === 0) return; //hidden

			for (const node of [filter, image]) {
				node.setAttribute("width", width);
				node.setAttribute("height", height);
			}
		});
		observer.observe(element);
	},

	//Changes the displacement map and/or the strength (in pixels) of an element's glass filter.
	SetGlassMap: (element, map = null, scale = null)=> {
		if (!element.glassFilter) return;
		if (map)   element.glassFilter.querySelector("feImage").setAttribute("href", map);
		if (scale) element.glassFilter.querySelector("feDisplacementMap").setAttribute("scale", scale);
	},


	SetAccentColor: (accent, saturation)=> {
		let hsl = UI.RgbToHsl(accent);

		let step1 = `hsl(${hsl[0] - 4},${hsl[1] * saturation}%,${hsl[2] * .78}%)`;
		let step2 = `hsl(${hsl[0] + 7},${hsl[1] * saturation}%,${hsl[2] * .9}%)`; //--clr-select
		let step3 = `hsl(${hsl[0] - 4},${hsl[1] * saturation}%,${hsl[2] * .8}%)`;
		let gradient = `linear-gradient(to bottom, ${step1}0%, ${step2}92%, ${step3}100%)`;

		let root = document.documentElement;
		root.style.setProperty("--clr-accent", `hsl(${hsl[0]},${hsl[1] * saturation}%,${hsl[2]}%)`);
		root.style.setProperty("--clr-select", step2);
		root.style.setProperty("--clr-transparent", `hsla(${hsl[0]},${hsl[1] * saturation}%,${hsl[2]}%,.6)`);
		root.style.setProperty("--grd-taskbar", gradient);
		root.style.setProperty("--grd-taskbar-rev", `linear-gradient(to bottom, ${step3}0%, ${step2}2%, ${step1}100%)`);

		let ico = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" viewBox=\"0 0 32 32\">" +
			"<path fill=\"#101010\" d=\"M30.345,10.59l0.453,0.333c0.291,0.214 0.463,0.553 0.466,0.913l0.152,18.538c0.002,0.308 -0.119,0.604 -0.337,0.821l-0.472,0.471c-0.217,0.216 -0.512,0.337 -0.819,0.334l-26.177,-0.23c-0.287,-0.002 -0.562,-0.112 -0.772,-0.308l-0.708,-0.661c-0.21,-0.196 -0.338,-0.463 -0.36,-0.75l-1.183,-15.531c-0.022,-0.278 0.059,-0.554 0.227,-0.777l0.573,-0.759c0.168,-0.223 0.411,-0.377 0.685,-0.433l1.058,-0.217l-0.171,-0.135c-0.269,-0.212 -0.428,-0.532 -0.436,-0.874l-0.215,-9.687c-0.006,-0.308 0.111,-0.606 0.327,-0.826l0.456,-0.467c0.216,-0.221 0.511,-0.345 0.819,-0.345l4.604,-0c0.297,-0 0.583,0.116 0.796,0.322l0.471,0.456c0.052,0.05 0.099,0.105 0.141,0.164c0,-0 0.598,-0.603 0.598,-0.603c0.215,-0.217 0.508,-0.339 0.813,-0.339l3.456,-0c0.29,-0 0.569,0.11 0.781,0.307l0.671,0.625c0.212,0.198 0.342,0.468 0.362,0.757l0.097,1.372l0.012,-1.612c0.002,-0.302 0.124,-0.591 0.338,-0.804l0.314,-0.312c0.215,-0.213 0.505,-0.333 0.807,-0.333l3.922,-0c0.296,-0 0.58,0.114 0.793,0.319l0.595,0.571c0.064,0.061 0.119,0.128 0.167,0.201c0.053,-0.183 0.151,-0.352 0.287,-0.489l0.261,-0.263c0.216,-0.217 0.508,-0.339 0.813,-0.339l3.753,-0c0.285,-0 0.56,0.106 0.77,0.298l0.779,0.708c0.21,0.191 0.342,0.454 0.369,0.737l0.685,7.125c0.027,0.276 -0.048,0.553 -0.209,0.778l-0.439,0.611c-0.099,0.138 -0.227,0.251 -0.373,0.333Z\"/>"+
			"<g fill=\"" + step2 + "\">"+
			"<path d=\"M25.339,12.758l4.27,-1.288l0.51,0.376l0.151,18.538l-0.472,0.47l-26.177,-0.229l-0.708,-0.661l-1.183,-15.531l0.573,-0.759l13.773,-2.823l0.456,0.372l0,6.121l-0.375,0.445l-7.615,1.305l-0.621,0.727l-0.063,4.235l0.507,0.344l13.813,-5.706l0.584,-0.572l2.193,-5.024l0.384,-0.34Z\"/>"+
			"<path d=\"M24.749,1.409l0.261,-0.263l3.753,-0l0.778,0.707l0.685,7.125l-0.439,0.611l-4.478,1.055l-0.485,-0.381l-0.075,-8.854Z\"/>"+
			"<path d=\"M17.859,1.457l0.313,-0.311l3.922,-0l0.595,0.57l0.367,8.813l-0.212,0.278l-4.582,1.041l-0.478,-0.384l0.075,-10.007Z\"/>"+
			"<path d=\"M10.737,1.748l0.597,-0.602l3.456,-0l0.671,0.624l0.484,6.84l-0.425,0.551l-4.136,0.769l-0.577,-0.475l-0.07,-7.707Z\"/>"+
			"<path d=\"M3.911,1.146l-0.456,0.467l0.215,9.687l0.658,0.52l4.436,-0.951l0.509,-0.651l-0.287,-8.617l-0.471,-0.455l-4.604,-0Z\"/>"+
			"</g></svg>";

		favicon.href = "data:image/svg+xml;base64," + btoa(ico);
	},

	RgbToHsl: color=> {
		let r = color[0] / 255;
		let g = color[1] / 255;
		let b = color[2] / 255;

		let min = Math.min(r, g, b);
		let max = Math.max(r, g, b);
		let delta = max - min;

		let h, s, l;

		if (delta == 0) h = 0;
		else if (max == r) h = ((g - b) / delta) % 6;
		else if (max == g) h = (b - r) / delta + 2;
		else h = (r - g) / delta + 4;

		h = Math.round(h * 60);

		if (h < 0) h += 360;

		l = (max + min) / 2;
		s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
		s = +(s * 100).toFixed(1);
		l = +(l * 100).toFixed(1);

		return [h, s, l];
	}

};

const MENU = {
	items: [
		{ t:"Locate IP",          i:"mono/locate-light.svg",        g:"utilities", h:false,  f:params=> new LocateIp(params),     k:"location" },
		{ t:"MAC lookup",         i:"mono/maclookup-light.svg",     g:"utilities", h:false,  f:params=> new MacLookup(params),    k:"vendor resolver" },
		{ t:"DNS lookup",         i:"mono/dns-light.svg",           g:"utilities", h:false,  f:params=> new DnsLookup(params),    k:"resolver doh domain record nslookup dig" },
		{ t:"Network calculator", i:"mono/netcalc-light.svg",       g:"utilities", h:false,  f:params=> new NetCalc(params),   k:"subnet" },
		{ t:"QR generator",       i:"mono/qrcode-light.svg",        g:"utilities", h:false,  f:args=> new QrGenerator(args), k:"qr code barcode generator" },
		{ t:"Password generator", i:"mono/passgen-light.svg",       g:"utilities", h:false,  f:params=> new PassGen(params),  k:"code" },
		{ t:"Screen capture",     i:"mono/screenrecord-light.svg",  g:"utilities", h:false,  f:params=> new ScreenCapture(),  k:"recorder shot" },
		{ t:"Camera tester",      i:"mono/webcam-light.svg",        g:"utilities", h:false,  f:params=> new CameraTester(),   k:"webcam" },
		{ t:"Microphone tester",  i:"mono/mic-light.svg",           g:"utilities", h:false,  f:params=> new MicTester(),      k:"audio input" },
		{ t:"Keyboard tester",    i:"mono/keyboard-light.svg",      g:"utilities", h:false,  f:params=> new KeyboardTester(), k:"keys" },
		{ t:"Gamepad tester",     i:"mono/gamepad-light.svg",       g:"utilities", h:false,  f:params=> new KeyboardTester("gamepad"), k:"joystick" },
		{ t:"Serial console",     i:"mono/serialconsole-light.svg", g:"utilities", h:false,  f:params=> new Rs232(),  k:"recorder shot" },
		{ t:"Encoder",            i:"mono/encoder-light.svg",       g:"utilities", h:true,   f:params=> new Encoder(params),   k:"binary hex base64 url html decode" },
		{ t:"Chess",              i:"chess/king-light.svg",         g:"game",      h:false,  f:params=> new Chess()},
		{ t:"Chess w/ reader",    i:"chess/king-light.svg",         g:"game",      h:true,   f:params=> new Chess({reader:true})},

		{ t:"Personalize",    i:"mono/personalize-light.svg", g:"manage", h:true, f:params=> new Personalize() },
		{ t:"Appearance",     i:"mono/tv-light.svg",          g:"manage", h:true,  f:params=> new Personalize("appearance") },
		{ t:"Reginal format", i:"mono/earth-light.svg",       g:"manage", h:true,  f:params=> new Personalize("region") },
		{ t:"Session",        i:"mono/hourglass-light.svg",   g:"manage", h:true,  f:params=> new Personalize("session") },

		{ t:"About",          i:"mono/logo-light.svg",        g:"manage", h:false, f:params=> new About("about") },
		{ t:"Get Pro-test",   i:"mono/download-light.svg",    g:"manage", h:false, f:params=> window.open("https://github.com/openprotest/protest/releases/latest", "_blank", "noopener"), k:"download full project github install server" },
		{ t:"Legal",          i:"mono/law-light.svg",         g:"manage", h:true,  f:params=> new About("legal") },
	],

	isOpen: false,
	isDragging: false,
	isMoved: false,
	isDetached: true,
	position: [0, 0],
	index: -1,
	list: [],
	history: [],
	lastAltPress: 0,
	lastSearchValue: "",

	Clear: ()=> {
		if (searchinput.value.length > 0) {
			searchinput.value = "";
			MENU.Update();
		}
		else {
			MENU.Close();
		}
	},

	Open: ()=> {
		MENU.Update();

		MENU.isOpen = true;
		MENU.UpdatePosition();
		
		setTimeout(()=> searchinput.focus(), 150);
	},

	Close: ()=> {
		MENU.isOpen = false;
		MENU.UpdatePosition();

		searchinput.value = "";
		MENU.Update();
	},

	Toggle: ()=> {
		MENU.Update("");

		MENU.isOpen = !MENU.isOpen;
		MENU.UpdatePosition();

		if (MENU.isOpen) {
			setTimeout(()=> searchinput.focus(), 150);
		}
	},

	Update: filter=> {
		menulist.textContent = "";
		MENU.list = [];
		MENU.index = -1;

		const normalizedFilter = filter ? filter.trim() : "";
		const keywords = normalizedFilter.toLowerCase().split(" ").filter(o=> o.length > 0);

		const isGrid = normalizedFilter.length === 0;
		const showHidden = keywords.length > 0;

		for (let i = 0; i < MENU.items.length; i++) { //menu items
			if (MENU.items[i].h && !showHidden) continue;

			const match = keywords.every(
				keyword=> MENU.items[i].t.toLowerCase().includes(keyword) || MENU.items[i].g.includes(keyword) || (MENU.items[i].k && MENU.items[i].k.includes(keyword))
			);
			if (!match) continue;

			const newItem = document.createElement("div");
			newItem.className = isGrid ? "menu-grid-item" : "menu-list-item";
			newItem.textContent = MENU.items[i].t;
			newItem.style.backgroundImage = `url(${MENU.items[i].i})`;
			menulist.appendChild(newItem);

			MENU.list.push(newItem);
			MENU.ItemEvent(newItem, MENU.items[i].f);
		}
	},

	ItemEvent: (element, func)=> {
		element.onclick = event=> {
			if (event.ctrlKey) return;
			event.stopPropagation();
			MENU.Close();
			func();
		};

		element.onmousedown = event=> {
			if (event.button !== 1 && (event.button !== 0 || !event.ctrlKey)) return;
			if (event.preventDefault) event.preventDefault();
			func();
			WIN.GridWindows();
		};
	},

	Filter: index=> {
		menufilterdot.style.transform = "scale(1)";
		menufilterdot.style.width = "32px";
		menufilterdot.style.height = "4px";
		menufilterdot.style.left = `${menufilter.offsetLeft + index * 40 + 1}px`;

		MENU.Update(searchinput.value);
	},

	UpdatePosition: ()=> {
		menubox.style.visibility = MENU.isOpen ? "visible" : "hidden";
		cap.style.visibility = MENU.isOpen ? "visible" : "hidden";

		let left = menubutton.style.left ? parseInt(menubutton.style.left) : 0;

		if (left < 10) {
			menubox.style.left = "20px";
			menubox.style.top = "20px";
			menubox.style.bottom = "20px";
			menubox.style.transform = MENU.isOpen ? "none" : "translateX(calc(-100% - 24px))";
		}
		else if (menubutton.style.left == "calc(100% - 48px)" || left > 90) {
			menubox.style.left = "calc(100% - var(--sidemenu-width) - 20px)";
			menubox.style.top = "20px";
			menubox.style.bottom = "20px";
			menubox.style.transform = MENU.isOpen ? "none" : "translateX(100%)";

		}
		else {
			menubox.style.left = `max(20px, min(calc(${left}% - var(--sidemenu-width) / 2) + 32px, calc(100% - var(--sidemenu-width) - 20px)))`;

			if (menubutton.style.top == "0px") {
				menubox.style.top = "20px";
				menubox.style.bottom = window.innerHeight > 640 ? "25%" : "20px";
				menubox.style.transform = MENU.isOpen ? "none" : "translateY(-100%)";
			}
			else {
				menubox.style.top = window.innerHeight > 640 ? "25%" : "20px";
				menubox.style.bottom = "20px";
				menubox.style.transform = MENU.isOpen ? "none" : "translateY(100%)";
			}
		}
	},

	StorePosition: ()=> {
		const logo = menubutton.children[0];
		localStorage.setItem("menu_button_pos", JSON.stringify({
			borderRadius: menubutton.style.borderRadius,
			left: menubutton.style.left,
			top: menubutton.style.top,
			width: menubutton.style.width,
			height: menubutton.style.height,
			l_left: logo.style.left,
			l_top: logo.style.top,
			l_width: logo.style.width,
			l_height: logo.style.height
		}));
	}
};

//<glass-panel>anything you want</glass-panel>
customElements.define("glass-panel", class extends HTMLElement {
	constructor() {
		super();
		this.attachShadow({ mode: "open" }).appendChild(UI.GetGlassTemplate().content.cloneNode(true));
	}

	connectedCallback() {
		UI.AttachGlass(this);
		this.style.backdropFilter = document.documentElement.classList.contains("refraction") ?
			"brightness(1.2) blur(2px) var(--glass-filter)" :
			"brightness(1.2) blur(12px)";
	}
});

window.addEventListener("mousedown", ()=> {
	UI.lastActivity = Date.now();
});

window.addEventListener("keydown", ()=> {
	UI.lastActivity = Date.now();
});

window.addEventListener("resize", ()=> {
	if (UI.onMobile) return;
	MENU.UpdatePosition();
});

document.body.addEventListener("mousemove", event=> {
	if (event.buttons != 1) {
		if (MENU.isDragging) MENU.StorePosition();
		MENU.isDragging = false;
	}

	if (!MENU.isDragging) return;

	//ignore if move is less than 2px
	if (Math.abs(MENU.position[0] - event.clientX) > 2 || Math.abs(MENU.position[1] - event.clientY) > 2) {
		MENU.isMoved = true;
	}

	const logo = menubutton.children[0];

	let px = event.x / container.clientWidth;
	let py = event.y / container.clientHeight;

	if (event.x < 56 && event.y < 56) {
		menubutton.style.borderRadius = "4px 8px 48px 8px";
		menubutton.style.left = "0px";
		menubutton.style.top = "0px";
		menubutton.style.width = "48px";
		menubutton.style.height = "48px";

		logo.style.left = "8px";
		logo.style.top = "6px";
		logo.style.width = "26px";
		logo.style.height = "26px";
	}
	else if (event.x < 56 && event.y > container.clientHeight - 48) {
		menubutton.style.borderRadius = "8px 48px 8px 4px";
		menubutton.style.left = "0px";
		menubutton.style.top = "calc(100% - 48px)";
		menubutton.style.width = "48px";
		menubutton.style.height = "48px";

		logo.style.left = "8px";
		logo.style.top = "16px";
		logo.style.width = "26px";
		logo.style.height = "26px";
	}
	else if (event.x > container.clientWidth - 48 && event.y < 56) {
		menubutton.style.borderRadius = "8px 4px 8px 64px";
		menubutton.style.left = "calc(100% - 48px)";
		menubutton.style.top = "0px";
		menubutton.style.width = "48px";
		menubutton.style.height = "48px";

		logo.style.left = "16px";
		logo.style.top = "6px";
		logo.style.width = "26px";
		logo.style.height = "26px";
	}
	else if (event.x > container.clientWidth - 48 && event.y > container.clientHeight - 48) {
		menubutton.style.borderRadius = "64px 8px 4px 8px";
		menubutton.style.left = "calc(100% - 48px)";
		menubutton.style.top = "calc(100% - 48px)";
		menubutton.style.width = "48px";
		menubutton.style.height = "48px";

		logo.style.left = "16px";
		logo.style.top = "16px";
		logo.style.width = "26px";
		logo.style.height = "26px";
	}
	else if (px < py && 1 - px > py) { //left
		let y = 100 * (event.y - 32) / container.clientHeight;

		menubutton.style.borderRadius = "14px 40px 40px 14px";
		menubutton.style.left = "0px";
		menubutton.style.top = `${y}%`;
		menubutton.style.width = "48px";
		menubutton.style.height = "64px";

		logo.style.left = "8px";
		logo.style.top = "18px";
		logo.style.width = "28px";
		logo.style.height = "28px";
	}
	else if (px > py && 1 - px > py) { //top
		let x = 100 * (event.x - 32) / container.clientWidth;

		menubutton.style.borderRadius = "14px 14px 40px 40px";
		menubutton.style.left = `${x}%`;
		menubutton.style.top = "0px";
		menubutton.style.width = "64px";
		menubutton.style.height = "48px";

		logo.style.left = "19px";
		logo.style.top = "6px";
		logo.style.width = "28px";
		logo.style.height = "28px";
	}
	else if (px < py && 1 - px < py) { //bottom
		let x = 100 * (event.x - 32) / container.clientWidth;

		menubutton.style.borderRadius = "40px 40px 14px 14px";
		menubutton.style.left = `${x}%`;
		menubutton.style.top = "calc(100% - 48px)";
		menubutton.style.width = "64px";
		menubutton.style.height = "48px";

		logo.style.left = "19px";
		logo.style.top = "16px";
		logo.style.width = "28px";
		logo.style.height = "28px";
	}
	else if (px > py && 1 - px < py) { //right
		let y = 100 * (event.y - 32) / container.clientHeight;

		menubutton.style.borderRadius = "40px 14px 14px 40px";
		menubutton.style.left = "calc(100% - 48px)";
		menubutton.style.top = `${y}%`;
		menubutton.style.width = "48px";
		menubutton.style.height = "64px";

		logo.style.left = "14px";
		logo.style.top = "18px";
		logo.style.width = "28px";
		logo.style.height = "28px";
	}

	if (event.x < 56 && event.y > container.clientHeight - 48 && container.clientHeight - event.y < 0) {
		attachedmenubutton.style.transform = "none";
		attachedmenubutton.style.boxShadow = "#202020 0 0 0 3px inset";
		menubutton.style.transform = "scaleY(0)";
		logo.style.top = "48px";

		if (MENU.isDetached) {
			MENU.isDetached = false;
			WIN.AlignIcon();
		}
	}
	else {
		attachedmenubutton.style.transform = "scaleY(0)";
		attachedmenubutton.style.boxShadow = "none";
		menubutton.style.transform = "none";

		if (!MENU.isDetached) {
			MENU.isDetached = true;
			WIN.AlignIcon();
		}
	}

	MENU.UpdatePosition();
});

document.body.addEventListener("mouseup", event=> {
	if (MENU.isMoved) {
		MENU.StorePosition();
	}

	MENU.isDragging = false;
	setTimeout(()=> {
		MENU.isMoved = false;
	}, 0);
});

document.body.addEventListener("keyup", event=> {
	if (event.code == "AltLeft") {
		event.preventDefault();

		if (Date.now() - MENU.lastAltPress < 250) {
			MENU.lastAltPress = 0;
			MENU.Toggle();
		}
		else {
			MENU.lastAltPress = Date.now();
		}
	}
	else {
		MENU.lastAltPress = 0;
	}
});

menubutton.onclick = event=> {
	if (MENU.isMoved) return;
	if (event.button == 0) MENU.Toggle();
};

attachedmenubutton.onclick = event=> {
	if (MENU.isMoved) return;
	if (event.button == 0) MENU.Toggle();
};

menubutton.onmousedown = event=> {
	MENU.position = [event.clientX, event.clientY];
	MENU.isDragging = true;
	event.stopPropagation();
};

attachedmenubutton.onmousedown = event=> {
	MENU.position = [event.clientX, event.clientY];
	MENU.isDragging = true;
	event.stopPropagation();
};

menubox.onclick = ()=> searchinput.focus();

searchinput.onchange = searchinput.oninput = event=> {
	if (MENU.lastSearchValue === searchinput.value.trim()) return;
	let current = searchinput.value;
	MENU.lastSearchValue = current.trim();

	setTimeout(()=> {
		if (current !== searchinput.value) return;
		MENU.Update(current);
	}, 100);
};

searchinput.onclick = event=> event.stopPropagation();

searchinput.onkeydown = event=> {
	switch (event.key) {
	case "Escape":
		event.stopPropagation();
		MENU.Clear();
		break;

	case "Enter":
		if (event.ctrlKey) {
			MENU.list[MENU.index].onmousedown({ button: 1 });
			searchinput.focus();
			setTimeout(searchinput.focus(), 10);
		}
		else {
			if (MENU.index > -1)
				MENU.list[MENU.index].onclick(event);
		}
		break;

	case "ArrowUp":
		event.preventDefault();
		if (MENU.list.length > 0) {
			if (MENU.index > -1) MENU.list[MENU.index].style.backgroundColor = "";
			MENU.index--;
			if (MENU.index < 0) MENU.index = MENU.list.length - 1;
			if (MENU.index > -1) MENU.list[MENU.index].style.backgroundColor = "var(--clr-transparent)";
			}
		break;

	case "ArrowDown":
		event.preventDefault();
		if (MENU.list.length > 0) {
			if (MENU.index > -1) MENU.list[MENU.index].style.backgroundColor = "";
			MENU.index++;
			if (MENU.index >= MENU.list.length) MENU.index = 0;
			MENU.list[MENU.index].style.backgroundColor = "var(--clr-transparent)";
		}
		break;
	}

	if (MENU.list.length > 0 && (event.key === "ArrowUp" || event.key === "ArrowDown")) { //scroll into view
		MENU.list[MENU.index].scrollIntoView({ behavior: "smooth", block: "center" });
	}
};

clearmenusearch.onclick = event=> {
	event.stopPropagation();
	MENU.Clear();
};

cap.onclick = ()=> MENU.Close();

btnPersonalize.onclick = ()=> {
	MENU.Close();
	new Personalize();
};

taskbar.onmouseup = event=> {
	if (WIN.array.length === 0) return;

	if (event.button !== 2) return;
	contextmenu.style.display = "block";
	contextmenu.style.left = `${event.x}px`;
	contextmenu.focus();

	contextmenu.textContent = "";

	const grid = WIN.CreateContextMenuItem("Grid", "controls/grid.svg");
	grid.onclick = ()=> WIN.GridWindows();

	const minimizeAll = WIN.CreateContextMenuItem("Minimize all", "controls/minimize.svg");
	minimizeAll.onclick = ()=> {
		for (let i = 0; i < WIN.array.length; i++) {
			if (WIN.array[i].isMinimized) continue;
			WIN.array[i].Minimize(true);
		}
	};

	const closeAll = WIN.CreateContextMenuItem("Close all", "controls/close.svg");
	closeAll.onclick = ()=> {
		let copy = WIN.array.filter(()=> true);
		for (let i = 0; i < copy.length; i++) {
			copy[i].Close();
		}
	};

	if (contextmenu.offsetLeft + contextmenu.offsetWidth > container.offsetWidth) {
		contextmenu.style.left = `${container.offsetWidth - contextmenu.offsetWidth - 8}px`;
	}
};

contextmenu.onclick = ()=> {
	contextmenu.style.display = "none";
};

contextmenu.onblur = ()=> {
	contextmenu.style.display = "none";
};

(function minuteLoop() {
	//check session
	const timeMapping = { 1: 15, 2: 30, 3: 60, 4: 2 * 60, 5: 4 * 60, 6: 8 * 60, 7: 24 * 60, 8: Infinity };
	const index = localStorage.getItem("session_timeout") == null ? 1 : parseInt(localStorage.getItem("session_timeout"));

	/*if ((Date.now() - UI.lastActivity) > 60 * 1000 * timeMapping[index]) {
		fetch("/logout").then(response=> { if (response.status === 200) location.reload(); });
	}*/

	//update clock
	const now = new Date();
	const m = now.getMinutes();
	const h = (now.getHours() % 12) + m / 60;

	analog_clock_m.style.transform = "rotate(" + m * 6 + "deg)";
	analog_clock_h.style.transform = "rotate(" + h * 30 + "deg)";

	regionalFormat = localStorage.getItem("regional_format") ? localStorage.getItem("regional_format") : "sys";

	date_month.textContent = now.toLocaleDateString(regionalFormat, { month: "short" }).toUpperCase();
	date_date.textContent = now.getDate();
	date_day.textContent = now.toLocaleDateString(regionalFormat, { weekday: "long" });

	setTimeout(()=> minuteLoop(), 60000);
})();