From f34edb0ea07bee5c1ddca7eb689d2c34d8d60452 Mon Sep 17 00:00:00 2001
From: Axel Cocat <ax.cocat@gmail.com>
Date: Sat, 14 May 2022 23:14:33 +0200
Subject: [PATCH] fix: run js scripts on window load

---
 static/character-achievements.hbs | 342 ++++++++--------
 static/character-pvp.hbs          |   8 +-
 static/character-talents.hbs      | 323 +++++++--------
 static/character.hbs              | 640 +++++++++++++++---------------
 static/guild.hbs                  |  72 ++--
 static/index.hbs                  |  82 ++--
 6 files changed, 740 insertions(+), 727 deletions(-)

diff --git a/static/character-achievements.hbs b/static/character-achievements.hbs
index 52dbd7c..f4a2ac9 100644
--- a/static/character-achievements.hbs
+++ b/static/character-achievements.hbs
@@ -69,192 +69,194 @@
 </div>
 
 <script type="application/javascript">
-	let achievementsData = {};
-	let $openCategory;
-	const $achievementTemplate = $("#achievement-template").detach().removeAttr("id");
-	const $progressTemplate = $("#progress-template").detach().removeAttr("id");
+	$(window).on("load", () => {
+		let achievementsData = {};
+		let $openCategory;
+		const $achievementTemplate = $("#achievement-template").detach().removeAttr("id");
+		const $progressTemplate = $("#progress-template").detach().removeAttr("id");
 
-	function makeCategoryLink(cat) {
-		const $a = $("<a>")
-			.attr("href", "#")
-			.text(cat.nameLang0)
-			.on("click", () => {
-				if ($openCategory !== undefined && $openCategory !== $a && !$openCategory.data("children")[0].contains($a[0])) {
-					closeCategory();
-				}
+		function makeCategoryLink(cat) {
+			const $a = $("<a>")
+				.attr("href", "#")
+				.text(cat.nameLang0)
+				.on("click", () => {
+					if ($openCategory !== undefined && $openCategory !== $a && !$openCategory.data("children")[0].contains($a[0])) {
+						closeCategory();
+					}
 
-				const $children = $a.data("children");
-				if ($children !== undefined) {
-					$openCategory = $a;
-					if (!$children.is(":visible")) {
-						// Open the clicked category
-						$children.slideDown();
+					const $children = $a.data("children");
+					if ($children !== undefined) {
+						$openCategory = $a;
+						if (!$children.is(":visible")) {
+							// Open the clicked category
+							$children.slideDown();
+						}
+					}
+					openCategory(cat);
+					return false;
+				});
+			return $a;
+		}
+
+		function makeAchievement(achievement) {
+			const isEarned = achievement.id in achievementsData.earned;
+			if (!isEarned && achievement.category === 81) {
+				// Show unlocked feats of strength only
+				return;
+			}
+
+			const $achievement = $achievementTemplate
+				.clone(false)
+				.appendTo($("#achievements"));
+			$achievement.find(".name").text(achievement.title);
+			$achievement.find(".description").text(achievement.description);
+			$achievement.find(".points .value").text(achievement.points);
+			if (achievement.points === 0) {
+				$achievement.find(".points").addClass("no-points");
+			}
+			$achievement.find(".iconlarge .icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/large/${achievement.icon}.jpg")`);
+			$achievement.find("a").attr("href", `{{aowow}}?achievement=${achievement.id}`);
+
+			if (isEarned) {
+				const date = new Date(achievementsData.earned[achievement.id] * 1000);
+				$achievement.find(".earned-date").text(date.toLocaleDateString());
+				$achievement.addClass("earned");
+			}
+
+			return $achievement;
+		}
+
+		function openCategory(cat) {
+			const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id);
+
+			$("#achievements").empty();
+			$(".summary").hide();
+
+			for (const achievement of categoryAchievements) {
+				makeAchievement(achievement);
+			}
+		}
+
+		function closeCategory() {
+			if ($openCategory === undefined || $openCategory.data("children") === undefined) {
+				return;
+			}
+
+			$openCategory
+				.data("children")
+				.slideUp();
+		}
+
+		function openSummary() {
+			closeCategory();
+			$("#achievements").empty();
+			const achievements = Object.keys(achievementsData.earned)
+				.filter(key => achievementsData.earned.hasOwnProperty(key))
+				.map(key => parseInt(key, 10))
+				.map(achievement => {
+					return {
+						achievement,
+						...achievementsData.earned[achievement],
+					};
+				});
+			const mostRecent = achievements.sort((a, b) => b.date - a.date).slice(0, 4);
+			for (const row of mostRecent) {
+				const achievement = achievementsData.achievements.find(ach => ach.id === row.achievement);
+				makeAchievement(achievement);
+			}
+
+			$(".summary").show();
+		}
+
+		function makeProgressBarRow(barsData) {
+			const $row = $("<div>").addClass("columns");
+			$("#progress-bars").append($row);
+
+			for (const bar of barsData) {
+				let $bar = $progressTemplate.clone(false);
+				$bar.find(".title").text(bar.name);
+				$bar.find(".value").text(`${bar.earned} / ${bar.total}`);
+				$bar.find(".progress").attr("value", bar.earned).attr("max", bar.total);
+				$row.append($bar);
+			}
+
+			return $row;
+		}
+
+		function makeProgressBars() {
+			let totalAchievements = 0;
+			let totalAchievementsEarned = 0;
+
+			const findProgress = (catId) => {
+				const cat = achievementsData.categories.find(cat => cat.id === catId);
+				const subCategories = achievementsData.categories.filter(cat => cat.parent === catId);
+				const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id || subCategories.some(cat => cat.id === ach.category));
+				let earned = 0;
+				for (const ach of categoryAchievements) {
+					if (ach.id in achievementsData.earned) {
+						++earned;
 					}
 				}
-				openCategory(cat);
-				return false;
-			});
-		return $a;
-	}
+				totalAchievementsEarned += earned;
+				totalAchievements += categoryAchievements.length;
 
-	function makeAchievement(achievement) {
-		const isEarned = achievement.id in achievementsData.earned;
-		if (!isEarned && achievement.category === 81) {
-			// Show unlocked feats of strength only
-			return;
-		}
-
-		const $achievement = $achievementTemplate
-			.clone(false)
-			.appendTo($("#achievements"));
-		$achievement.find(".name").text(achievement.title);
-		$achievement.find(".description").text(achievement.description);
-		$achievement.find(".points .value").text(achievement.points);
-		if (achievement.points === 0) {
-			$achievement.find(".points").addClass("no-points");
-		}
-		$achievement.find(".iconlarge .icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/large/${achievement.icon}.jpg")`);
-		$achievement.find("a").attr("href", `{{aowow}}?achievement=${achievement.id}`);
-
-		if (isEarned) {
-			const date = new Date(achievementsData.earned[achievement.id] * 1000);
-			$achievement.find(".earned-date").text(date.toLocaleDateString());
-			$achievement.addClass("earned");
-		}
-
-		return $achievement;
-	}
-
-	function openCategory(cat) {
-		const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id);
-
-		$("#achievements").empty();
-		$(".summary").hide();
-
-		for (const achievement of categoryAchievements) {
-			makeAchievement(achievement);
-		}
-	}
-
-	function closeCategory() {
-		if ($openCategory === undefined || $openCategory.data("children") === undefined) {
-			return;
-		}
-
-		$openCategory
-			.data("children")
-			.slideUp();
-	}
-
-	function openSummary() {
-		closeCategory();
-		$("#achievements").empty();
-		const achievements = Object.keys(achievementsData.earned)
-			.filter(key => achievementsData.earned.hasOwnProperty(key))
-			.map(key => parseInt(key, 10))
-			.map(achievement => {
 				return {
-					achievement,
-					...achievementsData.earned[achievement],
+					name: cat.nameLang0,
+					earned,
+					total: categoryAchievements.length,
 				};
-			});
-		const mostRecent = achievements.sort((a, b) => b.date - a.date).slice(0, 4);
-		for (const row of mostRecent) {
-			const achievement = achievementsData.achievements.find(ach => ach.id === row.achievement);
-			makeAchievement(achievement);
-		}
-
-		$(".summary").show();
-	}
-
-	function makeProgressBarRow(barsData) {
-		const $row = $("<div>").addClass("columns");
-		$("#progress-bars").append($row);
-
-		for (const bar of barsData) {
-			let $bar = $progressTemplate.clone(false);
-			$bar.find(".title").text(bar.name);
-			$bar.find(".value").text(`${bar.earned} / ${bar.total}`);
-			$bar.find(".progress").attr("value", bar.earned).attr("max", bar.total);
-			$row.append($bar);
-		}
-
-		return $row;
-	}
-
-	function makeProgressBars() {
-		let totalAchievements = 0;
-		let totalAchievementsEarned = 0;
-
-		const findProgress = (catId) => {
-			const cat = achievementsData.categories.find(cat => cat.id === catId);
-			const subCategories = achievementsData.categories.filter(cat => cat.parent === catId);
-			const categoryAchievements = achievementsData.achievements.filter(ach => ach.category === cat.id || subCategories.some(cat => cat.id === ach.category));
-			let earned = 0;
-			for (const ach of categoryAchievements) {
-				if (ach.id in achievementsData.earned) {
-					++earned;
-				}
-			}
-			totalAchievementsEarned += earned;
-			totalAchievements += categoryAchievements.length;
-
-			return {
-				name: cat.nameLang0,
-				earned,
-				total: categoryAchievements.length,
 			};
-		};
-		makeProgressBarRow([{ ...findProgress(92) }, { ...findProgress(96) }]);
-		makeProgressBarRow([{ ...findProgress(97) }, { ...findProgress(95) }]);
-		makeProgressBarRow([{ ...findProgress(168) }, { ...findProgress(169) }]);
-		makeProgressBarRow([{ ...findProgress(201) }, { ...findProgress(155) }]);
-		const $totalRow = makeProgressBarRow([{ name: "Achievements Earned", earned: totalAchievementsEarned, total: totalAchievements }]);
-		$totalRow.prependTo($("#progress-bars")); // Move the total bar to the top
-	}
+			makeProgressBarRow([{ ...findProgress(92) }, { ...findProgress(96) }]);
+			makeProgressBarRow([{ ...findProgress(97) }, { ...findProgress(95) }]);
+			makeProgressBarRow([{ ...findProgress(168) }, { ...findProgress(169) }]);
+			makeProgressBarRow([{ ...findProgress(201) }, { ...findProgress(155) }]);
+			const $totalRow = makeProgressBarRow([{ name: "Achievements Earned", earned: totalAchievementsEarned, total: totalAchievements }]);
+			$totalRow.prependTo($("#progress-bars")); // Move the total bar to the top
+		}
 
-	$.getJSON(`{{websiteRoot}}/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
-		achievementsData = data;
+		$.getJSON(`{{websiteRoot}}/character/{{realm}}/{{guid}}/achievements/data`, (data) => {
+			achievementsData = data;
 
-		const $summaryLink = $("<a>")
-			.attr("href", "#")
-			.text("Summary")
-			.on("click", openSummary)
-			.appendTo($("#categories"));
+			const $summaryLink = $("<a>")
+				.attr("href", "#")
+				.text("Summary")
+				.on("click", openSummary)
+				.appendTo($("#categories"));
 
-		for (const cat of achievementsData.categories.filter(c => c.parent < 0)) {
-			if (cat.id === 1) {
-				// Skip Statistics category
-				continue;
-			}
-			const children = achievementsData.categories.filter(c => c.parent === cat.id);
-
-			const $cat = makeCategoryLink(cat);
-			$("#categories").append($cat);
-
-			if (children.length > 0) {
-				const $children = $("<div>")
-					.hide()
-					.addClass("subcategories");
-				$cat.data("children", $children);
-				for (const child of children) {
-					const $child = makeCategoryLink(child);
-					$child.appendTo($children);
+			for (const cat of achievementsData.categories.filter(c => c.parent < 0)) {
+				if (cat.id === 1) {
+					// Skip Statistics category
+					continue;
 				}
+				const children = achievementsData.categories.filter(c => c.parent === cat.id);
 
-				$("#categories").append($children);
+				const $cat = makeCategoryLink(cat);
+				$("#categories").append($cat);
+
+				if (children.length > 0) {
+					const $children = $("<div>")
+						.hide()
+						.addClass("subcategories");
+					$cat.data("children", $children);
+					for (const child of children) {
+						const $child = makeCategoryLink(child);
+						$child.appendTo($children);
+					}
+
+					$("#categories").append($children);
+				}
 			}
-		}
 
-		let totalPoints = 0;
-		for (const ach of achievementsData.achievements) {
-			if (ach.id in achievementsData.earned) {
-				totalPoints += ach.points;
+			let totalPoints = 0;
+			for (const ach of achievementsData.achievements) {
+				if (ach.id in achievementsData.earned) {
+					totalPoints += ach.points;
+				}
 			}
-		}
-		$("#total-points").text(totalPoints);
+			$("#total-points").text(totalPoints);
 
-		makeProgressBars();
-		openSummary();
+			makeProgressBars();
+			openSummary();
+		});
 	});
 </script>
diff --git a/static/character-pvp.hbs b/static/character-pvp.hbs
index b520309..063be3e 100644
--- a/static/character-pvp.hbs
+++ b/static/character-pvp.hbs
@@ -36,7 +36,9 @@
 </div>
 
 <script type="application/javascript">
-	{{#each arenaTeams}}
-	createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
-	{{/each}}
+	$(window).on("load", () => {
+		{{#each arenaTeams}}
+		createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
+		{{/each}}
+	});
 </script>
diff --git a/static/character-talents.hbs b/static/character-talents.hbs
index 6a5ee73..85252fc 100644
--- a/static/character-talents.hbs
+++ b/static/character-talents.hbs
@@ -3,7 +3,6 @@
 <script type="application/javascript">
 	const aowow_tooltips = { "renamelinks": true, };
 </script>
-<script type="application/javascript" src="{{aowow}}/static/widgets/power.js"></script>
 
 {{> character-header }}
 
@@ -47,189 +46,193 @@
 	</div>
 </div>
 
-<div style="display: none;">
-	<!-- Hackfix for aowow's tooltip opening when the page loads -->
-	<a href="{{aowow}}/?spell=10"></a>
-</div>
-
 <script type="application/javascript">
-	const talentsData = {{{JSONstringify data}}};
+	$(window).on("load", () => {
+		const talentsData = {{{JSONstringify data}}};
 
-	for (let spec = 0; spec < 2; ++spec) {
-		const $spec = $(`#talents-spec-${spec}`);
+		function createTree(data, learnedTalents, container) {
+			const $columns = $(container).find(".col");
+			let points = 0;
 
-		let nbLearned = 0;
-		for (const tree of talentsData.trees) {
-			const learned = {};
-			for (const talent of talentsData.talents[spec]) {
-				for (const s of tree.spells) {
-					const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
-					const idx = ranks.indexOf(talent);
-					if (idx === -1) {
+			for (let i = 0; i < 4; ++i) {
+				const nbRows = Math.max(...data.spells.filter(s => s.columnIndex === i).map(s => s.tierId));
+				const $column = $columns.eq(i);
+				if (nbRows < 0) {
+					// Remove empty column
+					$column.remove();
+					continue;
+				}
+				for (let j = 0; j <= nbRows; ++j) {
+					$("<div>")
+						.addClass("iconmedium")
+						.appendTo($column);
+				}
+			}
+
+			for (const spell of data.spells) {
+				const $column = $columns.eq(spell.columnIndex);
+				const $placeholder = $column.find(".iconmedium").eq(spell.tierId);
+				const $template = $("#talent-template");
+				const $talent = $template.clone(false);
+				$talent.removeAttr("id");
+				$talent.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${spell.icon}.jpg")`);
+				const rank = spell.id in learnedTalents ? (learnedTalents[spell.id].rank - 1) : 0;
+				$talent.find("a").attr("href", `{{aowow}}/?spell=${spell["spellRank" + rank]}`);
+				$talent.data("id", spell.id);
+
+				if (spell.id in learnedTalents) {
+					points += learnedTalents[spell.id].rank;
+					const ranks = [spell.spellRank0, spell.spellRank1, spell.spellRank2, spell.spellRank3, spell.spellRank4].filter(r => r !== 0).length;
+					const maxRank = learnedTalents[spell.id].rank === ranks;
+					$talent
+						.removeClass("empty")
+						.addClass(maxRank ? "full" : "notfull");
+					$talent.attr("rank", `${learnedTalents[spell.id].rank}/${ranks}`);
+					$talent.data("rank", learnedTalents[spell.id].rank);
+				}
+
+				$placeholder.replaceWith($talent);
+			}
+
+			// Add arrows
+			for (let i = 0; i < 4; ++i) {
+				const $column = $columns.eq(i);
+				for (const icon of $column.find(".iconmedium")) {
+					const $icon = $(icon);
+					const spell = data.spells.find(s => s.id === $icon.data("id"));
+					if (spell === undefined || spell.prereqTalent0 === 0) {
 						continue;
 					}
-					learned[s.id] = {
-						spell: s,
-						rank: idx + 1,
-					};
-					++nbLearned;
-					break;
+					const req = data.spells.find(s => s.id === spell.prereqTalent0);
+					if (req === undefined) {
+						continue;
+					}
+					if (req.columnIndex === spell.columnIndex) {
+						// Down
+						const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 25;
+						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
+						createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
+					} else if (req.tierId === spell.tierId && req.columnIndex < spell.columnIndex) {
+						// Right
+						const width = (44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 23;
+						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
+						createArrow(width, 15, -(width - 8), undefined, 16, "right" + arrowFile, "right center", $icon);
+					} else if (req.tierId === spell.tierId && req.columnIndex > spell.columnIndex) {
+						// Left
+						const width = (44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 23;
+						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
+						createArrow(width, 15, undefined, -(width - 8), 16, "left" + arrowFile, "left center", $icon)
+					} else if (req.tierId < spell.tierId && req.columnIndex < spell.columnIndex) {
+						// Right Down
+						const width = 44 * (spell.columnIndex - req.columnIndex) + 2;
+						const left = -((44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 15);
+						const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
+						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
+						createArrow(width, 15, left, undefined, top, "rightdown" + arrowFile, "right center", $icon);
+
+						const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
+						createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
+					} else {
+						// Left Down
+						const width = 44 * (req.columnIndex - spell.columnIndex) - 1;
+						const right = -((44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 15);
+						const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
+						const arrowFile = $icon.data("rank") > 0 ? "2" : "";
+						createArrow(width, 15, undefined, right, top, "leftdown" + arrowFile, "left center", $icon);
+
+						const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
+						createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
+					}
 				}
 			}
 
-			const $tree = $("#talent-tree-template")
-				.clone(false)
-				.removeAttr("id")
-				.appendTo($spec);
-			$tree.find(".header .image").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
-			$tree.find(".header .name").text(tree.name);
-
-			createTree(tree, learned, $tree[0]);
+			$(container).find(".header .points").text(points);
 		}
 
-		if (nbLearned === 0 && spec !== 0) {
-			$spec.addClass("hidden");
-			$("#spec-links").hide();
-			continue;
-		}
-
-		const $glyphs = $spec.find(".glyphs");
-		for (const spell of talentsData.glyphs[spec]) {
-			const $a = $("<a>");
-			$a.attr("href", `{{aowow}}?spell=${spell}`);
-			$glyphs.append($a);
-			$glyphs.append("<br>");
-		}
-		$glyphs.parent().appendTo($spec);
-	}
-
-	function createTree(data, learnedTalents, container) {
-		const $columns = $(container).find(".col");
-		let points = 0;
-
-		for (let i = 0; i < 4; ++i) {
-			const nbRows = Math.max(...data.spells.filter(s => s.columnIndex === i).map(s => s.tierId));
-			const $column = $columns.eq(i);
-			if (nbRows < 0) {
-				// Remove empty column
-				$column.remove();
-				continue;
+		function createArrow(width, height, left, right, top, file, bgPos, container) {
+			const $arrow = $("<div>");
+			$arrow.css("position", "absolute");
+			if (left !== undefined) {
+				$arrow.css("left", `${left}px`);
 			}
-			for (let j = 0; j <= nbRows; ++j) {
-				$("<div>")
-					.addClass("iconmedium")
-					.appendTo($column);
+			if (right !== undefined) {
+				$arrow.css("right", `${right}px`);
 			}
+			$arrow.css("top", `${top}px`);
+			$arrow.css("width", `${width}px`);
+			$arrow.css("height", `${height}px`);
+			$arrow.css("background-image", `url("{{aowow}}/static/images/TalentCalc/arrows/${file}.png")`);
+			$arrow.css("background-position", bgPos);
+			$(container).append($arrow);
 		}
 
-		for (const spell of data.spells) {
-			const $column = $columns.eq(spell.columnIndex);
-			const $placeholder = $column.find(".iconmedium").eq(spell.tierId);
-			const $template = $("#talent-template");
-			const $talent = $template.clone(false);
-			$talent.removeAttr("id");
-			$talent.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${spell.icon}.jpg")`);
-			const rank = spell.id in learnedTalents ? (learnedTalents[spell.id].rank - 1) : 0;
-			$talent.find("a").attr("href", `{{aowow}}/?spell=${spell["spellRank" + rank]}`);
-			$talent.data("id", spell.id);
+		function main() {
+			for (let spec = 0; spec < 2; ++spec) {
+				const $spec = $(`#talents-spec-${spec}`);
 
-			if (spell.id in learnedTalents) {
-				points += learnedTalents[spell.id].rank;
-				const ranks = [spell.spellRank0, spell.spellRank1, spell.spellRank2, spell.spellRank3, spell.spellRank4].filter(r => r !== 0).length;
-				const maxRank = learnedTalents[spell.id].rank === ranks;
-				$talent
-					.removeClass("empty")
-					.addClass(maxRank ? "full" : "notfull");
-				$talent.attr("rank", `${learnedTalents[spell.id].rank}/${ranks}`);
-				$talent.data("rank", learnedTalents[spell.id].rank);
-			}
+				let nbLearned = 0;
+				for (const tree of talentsData.trees) {
+					const learned = {};
+					for (const talent of talentsData.talents[spec]) {
+						for (const s of tree.spells) {
+							const ranks = [s.spellRank0, s.spellRank1, s.spellRank2, s.spellRank3, s.spellRank4];
+							const idx = ranks.indexOf(talent);
+							if (idx === -1) {
+								continue;
+							}
+							learned[s.id] = {
+								spell: s,
+								rank: idx + 1,
+							};
+							++nbLearned;
+							break;
+						}
+					}
 
-			$placeholder.replaceWith($talent);
-		}
+					const $tree = $("#talent-tree-template")
+						.clone(false)
+						.removeAttr("id")
+						.appendTo($spec);
+					$tree.find(".header .image").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
+					$tree.find(".header .name").text(tree.name);
 
-		// Add arrows
-		for (let i = 0; i < 4; ++i) {
-			const $column = $columns.eq(i);
-			for (const icon of $column.find(".iconmedium")) {
-				const $icon = $(icon);
-				const spell = data.spells.find(s => s.id === $icon.data("id"));
-				if (spell === undefined || spell.prereqTalent0 === 0) {
+					createTree(tree, learned, $tree[0]);
+				}
+
+				if (nbLearned === 0 && spec !== 0) {
+					$spec.addClass("hidden");
+					$("#spec-links").hide();
 					continue;
 				}
-				const req = data.spells.find(s => s.id === spell.prereqTalent0);
-				if (req === undefined) {
-					continue;
-				}
-				if (req.columnIndex === spell.columnIndex) {
-					// Down
-					const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 25;
-					const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-					createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
-				} else if (req.tierId === spell.tierId && req.columnIndex < spell.columnIndex) {
-					// Right
-					const width = (44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 23;
-					const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-					createArrow(width, 15, -(width - 8), undefined, 16, "right" + arrowFile, "right center", $icon);
-				} else if (req.tierId === spell.tierId && req.columnIndex > spell.columnIndex) {
-					// Left
-					const width = (44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 23;
-					const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-					createArrow(width, 15, undefined, -(width - 8), 16, "left" + arrowFile, "left center", $icon)
-				} else if (req.tierId < spell.tierId && req.columnIndex < spell.columnIndex) {
-					// Right Down
-					const width = 44 * (spell.columnIndex - req.columnIndex) + 2;
-					const left = -((44 + 14) * (spell.columnIndex - req.columnIndex - 1) + 15);
-					const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
-					const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-					createArrow(width, 15, left, undefined, top, "rightdown" + arrowFile, "right center", $icon);
 
-					const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
-					createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
-				} else {
-					// Left Down
-					const width = 44 * (req.columnIndex - spell.columnIndex) - 1;
-					const right = -((44 + 14) * (req.columnIndex - spell.columnIndex - 1) + 15);
-					const top = -((44 + 14) * (spell.tierId - req.tierId) - 14);
-					const arrowFile = $icon.data("rank") > 0 ? "2" : "";
-					createArrow(width, 15, undefined, right, top, "leftdown" + arrowFile, "left center", $icon);
-
-					const height = (44 + 14) * (spell.tierId - req.tierId - 1) + 40;
-					createArrow(15, height, 16, undefined, -(height - 8), "down" + arrowFile, "center bottom", $icon);
+				const $glyphs = $spec.find(".glyphs");
+				for (const spell of talentsData.glyphs[spec]) {
+					const $a = $("<a>");
+					$a.attr("href", `{{aowow}}?spell=${spell}`);
+					$glyphs.append($a);
+					$glyphs.append("<br>");
 				}
+				$glyphs.parent().appendTo($spec);
 			}
-		}
 
-		$(container).find(".header .points").text(points);
-	}
+			$("#link-spec-0").on("click", () => {
+				$("#talents-spec-0").removeClass("hidden");
+				$("#talents-spec-1").addClass("hidden");
+			});
 
-	function createArrow(width, height, left, right, top, file, bgPos, container) {
-		const $arrow = $("<div>");
-		$arrow.css("position", "absolute");
-		if (left !== undefined) {
-			$arrow.css("left", `${left}px`);
-		}
-		if (right !== undefined) {
-			$arrow.css("right", `${right}px`);
-		}
-		$arrow.css("top", `${top}px`);
-		$arrow.css("width", `${width}px`);
-		$arrow.css("height", `${height}px`);
-		$arrow.css("background-image", `url("{{aowow}}/static/images/TalentCalc/arrows/${file}.png")`);
-		$arrow.css("background-position", bgPos);
-		$(container).append($arrow);
-	}
+			$("#link-spec-1").on("click", () => {
+				$("#talents-spec-1").removeClass("hidden");
+				$("#talents-spec-0").addClass("hidden");
+			});
 
-	$("#link-spec-0").on("click", () => {
-		$("#talents-spec-0").removeClass("hidden");
-		$("#talents-spec-1").addClass("hidden");
+			if (location.hash === "#1") {
+				$("#link-spec-1").click();
+			}
+
+			$("<script>")
+				.attr("src", "{{aowow}}/static/widgets/power.js")
+				.appendTo("body");
+		}
+		main();
 	});
-
-	$("#link-spec-1").on("click", () => {
-		$("#talents-spec-1").removeClass("hidden");
-		$("#talents-spec-0").addClass("hidden");
-	});
-
-	if (location.hash === "#1") {
-		$("#link-spec-1").click();
-	}
 </script>
diff --git a/static/character.hbs b/static/character.hbs
index e85d981..aa0a21f 100644
--- a/static/character.hbs
+++ b/static/character.hbs
@@ -71,346 +71,348 @@
 </div>
 
 <script type="application/javascript">
-	const $model = $("#model");
-	const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
-	const $mountTemplate = $("#mount-template").detach().removeAttr("id");
+	$(window).on("load", () => {
+		const $model = $("#model");
+		const $itemSlotTemplate = $("#item-slot-template").detach().removeAttr("id");
+		const $mountTemplate = $("#mount-template").detach().removeAttr("id");
 
-	window.WH = {
-		//debug: console.log,
-		debug: () => { },
-	};
+		window.WH = {
+			//debug: console.log,
+			debug: () => { },
+		};
 
-	const charData = {{{ JSONstringify data }}};
-	const races = {
-		1: "human",
-		2: "orc",
-		3: "dwarf",
-		4: "nightelf",
-		5: "scourge",
-		6: "tauren",
-		7: "gnome",
-		8: "troll",
-		10: "bloodelf",
-		11: "draenei",
-	};
-	const genders = ["male", "female"];
+		const charData = {{{ JSONstringify data }}};
+		const races = {
+			1: "human",
+			2: "orc",
+			3: "dwarf",
+			4: "nightelf",
+			5: "scourge",
+			6: "tauren",
+			7: "gnome",
+			8: "troll",
+			10: "bloodelf",
+			11: "draenei",
+		};
+		const genders = ["male", "female"];
 
-	if (Cookies.get("disable-3d-viewer") === "1") {
-		$("#3d-viewer-options").hide();
-	} else {
-		$("#cb-enable-3d-viewer").prop("checked", true);
-	}
-	$("#cb-enable-3d-viewer").change(() => {
-		const enabled = $("#cb-enable-3d-viewer").prop("checked");
-
-		if (enabled) {
-			Cookies.remove("disable-3d-viewer");
-			createViewer();
-			$("#3d-viewer-options").slideDown("fast");
-		} else {
-			Cookies.set("disable-3d-viewer", "1");
-			viewer?.destroy();
-			$("#3d-viewer-options").slideUp("fast");
-		}
-	});
-
-	const hideHelm = (charData.flags & 0x0400) === 0x0400;
-	$("#cb-hide-helmet").prop("checked", hideHelm);
-	const hideCloak = (charData.flags & 0x0800) === 0x0800;
-	$("#cb-hide-cloak").prop("checked", hideCloak);
-
-	$("#cb-hide-helmet").change(() => {
-		const hide = $("#cb-hide-helmet").prop("checked");
-		setSlotVisible(1, !hide);
-	});
-	$("#cb-hide-cloak").change(() => {
-		const hide = $("#cb-hide-cloak").prop("checked");
-		setSlotVisible(16, !hide);
-	});
-	$("#cb-hide-tabard").change(() => {
-		const hide = $("#cb-hide-tabard").prop("checked");
-		setSlotVisible(19, !hide);
-	});
-	if (charData.characterModelTransmogs === undefined) {
-		$("#cb-hide-transmogs").parent().hide();
-	}
-	$("#cb-hide-transmogs").change(() => {
-		const hide = $("#cb-hide-transmogs").prop("checked");
-		const items = hide ? charData.characterModelItems : charData.characterModelTransmogs;
-		for (const slot of (items.map((item) => item[0]))) {
-			clearSlots([slot]);
-		}
-
-		const hideHelm = $("#cb-hide-helmet").prop("checked");
-		const hideCloak = $("#cb-hide-cloak").prop("checked");
-		setItems(items.filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))));
-	});
-
-	let viewer;
-	function createViewer() {
 		if (Cookies.get("disable-3d-viewer") === "1") {
-			return;
-		}
-
-		viewer?.destroy();
-		viewer = new ZamModelViewer(characterModel);
-		const isLoadedInterval = setInterval(() => {
-			if (viewer.method("isLoaded")) {
-				clearInterval(isLoadedInterval);
-				setBackground("background.png");
-			}
-		}, 100);
-	}
-
-	function setSlotVisible(slot, visible) {
-		if (visible) {
-			const transmogged = !$("#cb-hide-transmogs").prop("checked");
-			const items = transmogged ? charData.characterModelTransmogs : charData.characterModelItems;
-			const item = items.find(([sl, appearance]) => sl === slot);
-			if (item !== undefined) {
-				setItems([item]);
-			}
+			$("#3d-viewer-options").hide();
 		} else {
-			clearSlots([slot]);
+			$("#cb-enable-3d-viewer").prop("checked", true);
 		}
-	}
+		$("#cb-enable-3d-viewer").change(() => {
+			const enabled = $("#cb-enable-3d-viewer").prop("checked");
 
-	function clearSlots(slots) {
-		viewer.method("clearSlots", slots.join(","));
-		characterModel.items = characterModel.items.filter(item => !slots.includes(item[0]));
-	}
-
-	function setItems(items) {
-		const data = items.map(([slot, display]) => {
-			return {
-				slot,
-				display,
-			};
-		});
-		viewer.method("setItems", [data]);
-
-		characterModel.items = characterModel.items.filter(item => !items.some(item2 => item[0] === item2[0]));
-		characterModel.items.push(...items);
-	}
-
-	function createItemSlot(item, invSlot, icon, quality, rel, container) {
-		const $item = $itemSlotTemplate.clone();
-		$item
-			.data("icon", icon)
-			.data("quality", quality)
-			.find(".inventory-slot")
-			.css("background-image", `url("{{websiteRoot}}/img/inventory-slot/${invSlot}.png")`);
-		if (item !== undefined) {
-			$item.data("item", item);
-			$item.find("a").attr("href", `{{aowow}}/?item=${item}`);
-			$item.find("a").attr("rel", rel);
-		}
-		$item.appendTo($(container));
-	}
-	const invSlotContainers = [
-		{ element: "#equipment-col-left", slots: [0, 1, 2, 14, 4, 3, 18, 8] },
-		{ element: "#equipment-col-right", slots: [9, 5, 6, 7, 10, 11, 12, 13] },
-		{ element: "#equipment-bottom", slots: [15, 16, 17] }
-	];
-	for (const side of invSlotContainers) {
-		for (const slot of side.slots) {
-			const item = charData.equipment.find(item => item.slot === slot);
-			const rel = [];
-			if (item !== undefined) {
-				rel.push("pcs=" + charData.equipment.map(item => item.itemEntry).join(":"));
-				if (item.gems.length !== 0) {
-					rel.push("gems=" + item.gems.join(":"));
-				}
-				if (item.enchantments.length !== 0) {
-					rel.push("ench=" + item.enchantments.join(":"));
-				}
-				if (item.randomPropertyId !== 0) {
-					rel.push("rand=" + item.randomPropertyId);
-				}
-			}
-			createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), item?.quality, rel.join("&"), side.element);
-		}
-	}
-	const nbItemRows = Math.max($("#equipment-col-left").children().length, $("#equipment-col-right").children().length);
-
-	function onResize(init = false) {
-		const iconSize = $(".icon-size:visible").data("icon-size");
-		const iconSizePx = iconSize === "medium" ? 44 : 68;
-
-		$("#model-container").css("height", (iconSizePx * nbItemRows) + "px");
-
-		$(".item-slot")
-			.removeClass("iconmedium iconlarge")
-			.addClass(`icon${iconSize}`)
-			.each((idx, el) => {
-				const $item = $(el);
-				const item = $item.data("item");
-				const icon = $item.data("icon");
-				const quality = $item.data("quality");
-				if (item !== undefined) {
-					$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/${iconSize}/${icon}.jpg")`);
-				}
-				if (quality !== undefined) {
-					$item.find(".border").css("background-image", `url("{{websiteRoot}}/img/icon-border/${iconSize}/q${quality}.png")`);
-				}
-			});
-
-		if (!init) {
-			characterModel.aspect = $model.outerWidth() / $model.outerHeight();
-			createViewer();
-		}
-	}
-	onResize(true);
-
-	function setMount(mountId) {
-		if (characterModel.mount.id === mountId) {
-			return;
-		}
-
-		if (mountId !== 0) {
-			const mainHand = charData.equipment.find(e => e.slot === 15);
-			const offHand = charData.equipment.find(e => e.slot === 16);
-			const ranged = charData.equipment.find(e => e.slot === 17);
-
-			characterModel.charCustomization.sheathMain = sheathTypes[mainHand.classId][mainHand.subclassId];
-			if (offHand !== undefined) {
-				characterModel.charCustomization.sheathOff = sheathTypes[offHand.classId][offHand.subclassId];
-			} else if (ranged !== undefined) {
-				characterModel.charCustomization.sheathOff = sheathTypes[ranged.classId][ranged.subclassId];
+			if (enabled) {
+				Cookies.remove("disable-3d-viewer");
+				createViewer();
+				$("#3d-viewer-options").slideDown("fast");
 			} else {
+				Cookies.set("disable-3d-viewer", "1");
+				viewer?.destroy();
+				$("#3d-viewer-options").slideUp("fast");
+			}
+		});
+
+		const hideHelm = (charData.flags & 0x0400) === 0x0400;
+		$("#cb-hide-helmet").prop("checked", hideHelm);
+		const hideCloak = (charData.flags & 0x0800) === 0x0800;
+		$("#cb-hide-cloak").prop("checked", hideCloak);
+
+		$("#cb-hide-helmet").change(() => {
+			const hide = $("#cb-hide-helmet").prop("checked");
+			setSlotVisible(1, !hide);
+		});
+		$("#cb-hide-cloak").change(() => {
+			const hide = $("#cb-hide-cloak").prop("checked");
+			setSlotVisible(16, !hide);
+		});
+		$("#cb-hide-tabard").change(() => {
+			const hide = $("#cb-hide-tabard").prop("checked");
+			setSlotVisible(19, !hide);
+		});
+		if (charData.characterModelTransmogs === undefined) {
+			$("#cb-hide-transmogs").parent().hide();
+		}
+		$("#cb-hide-transmogs").change(() => {
+			const hide = $("#cb-hide-transmogs").prop("checked");
+			const items = hide ? charData.characterModelItems : charData.characterModelTransmogs;
+			for (const slot of (items.map((item) => item[0]))) {
+				clearSlots([slot]);
+			}
+
+			const hideHelm = $("#cb-hide-helmet").prop("checked");
+			const hideCloak = $("#cb-hide-cloak").prop("checked");
+			setItems(items.filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))));
+		});
+
+		let viewer;
+		function createViewer() {
+			if (Cookies.get("disable-3d-viewer") === "1") {
+				return;
+			}
+
+			viewer?.destroy();
+			viewer = new ZamModelViewer(characterModel);
+			const isLoadedInterval = setInterval(() => {
+				if (viewer.method("isLoaded")) {
+					clearInterval(isLoadedInterval);
+					setBackground("background.png");
+				}
+			}, 100);
+		}
+
+		function setSlotVisible(slot, visible) {
+			if (visible) {
+				const transmogged = !$("#cb-hide-transmogs").prop("checked");
+				const items = transmogged ? charData.characterModelTransmogs : charData.characterModelItems;
+				const item = items.find(([sl, appearance]) => sl === slot);
+				if (item !== undefined) {
+					setItems([item]);
+				}
+			} else {
+				clearSlots([slot]);
+			}
+		}
+
+		function clearSlots(slots) {
+			viewer.method("clearSlots", slots.join(","));
+			characterModel.items = characterModel.items.filter(item => !slots.includes(item[0]));
+		}
+
+		function setItems(items) {
+			const data = items.map(([slot, display]) => {
+				return {
+					slot,
+					display,
+				};
+			});
+			viewer.method("setItems", [data]);
+
+			characterModel.items = characterModel.items.filter(item => !items.some(item2 => item[0] === item2[0]));
+			characterModel.items.push(...items);
+		}
+
+		function createItemSlot(item, invSlot, icon, quality, rel, container) {
+			const $item = $itemSlotTemplate.clone();
+			$item
+				.data("icon", icon)
+				.data("quality", quality)
+				.find(".inventory-slot")
+				.css("background-image", `url("{{websiteRoot}}/img/inventory-slot/${invSlot}.png")`);
+			if (item !== undefined) {
+				$item.data("item", item);
+				$item.find("a").attr("href", `{{aowow}}/?item=${item}`);
+				$item.find("a").attr("rel", rel);
+			}
+			$item.appendTo($(container));
+		}
+		const invSlotContainers = [
+			{ element: "#equipment-col-left", slots: [0, 1, 2, 14, 4, 3, 18, 8] },
+			{ element: "#equipment-col-right", slots: [9, 5, 6, 7, 10, 11, 12, 13] },
+			{ element: "#equipment-bottom", slots: [15, 16, 17] }
+		];
+		for (const side of invSlotContainers) {
+			for (const slot of side.slots) {
+				const item = charData.equipment.find(item => item.slot === slot);
+				const rel = [];
+				if (item !== undefined) {
+					rel.push("pcs=" + charData.equipment.map(item => item.itemEntry).join(":"));
+					if (item.gems.length !== 0) {
+						rel.push("gems=" + item.gems.join(":"));
+					}
+					if (item.enchantments.length !== 0) {
+						rel.push("ench=" + item.enchantments.join(":"));
+					}
+					if (item.randomPropertyId !== 0) {
+						rel.push("rand=" + item.randomPropertyId);
+					}
+				}
+				createItemSlot(item?.itemEntry, slot, item?.icon?.toLowerCase(), item?.quality, rel.join("&"), side.element);
+			}
+		}
+		const nbItemRows = Math.max($("#equipment-col-left").children().length, $("#equipment-col-right").children().length);
+
+		function onResize(init = false) {
+			const iconSize = $(".icon-size:visible").data("icon-size");
+			const iconSizePx = iconSize === "medium" ? 44 : 68;
+
+			$("#model-container").css("height", (iconSizePx * nbItemRows) + "px");
+
+			$(".item-slot")
+				.removeClass("iconmedium iconlarge")
+				.addClass(`icon${iconSize}`)
+				.each((idx, el) => {
+					const $item = $(el);
+					const item = $item.data("item");
+					const icon = $item.data("icon");
+					const quality = $item.data("quality");
+					if (item !== undefined) {
+						$item.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/${iconSize}/${icon}.jpg")`);
+					}
+					if (quality !== undefined) {
+						$item.find(".border").css("background-image", `url("{{websiteRoot}}/img/icon-border/${iconSize}/q${quality}.png")`);
+					}
+				});
+
+			if (!init) {
+				characterModel.aspect = $model.outerWidth() / $model.outerHeight();
+				createViewer();
+			}
+		}
+		onResize(true);
+
+		function setMount(mountId) {
+			if (characterModel.mount.id === mountId) {
+				return;
+			}
+
+			if (mountId !== 0) {
+				const mainHand = charData.equipment.find(e => e.slot === 15);
+				const offHand = charData.equipment.find(e => e.slot === 16);
+				const ranged = charData.equipment.find(e => e.slot === 17);
+
+				characterModel.charCustomization.sheathMain = sheathTypes[mainHand.classId][mainHand.subclassId];
+				if (offHand !== undefined) {
+					characterModel.charCustomization.sheathOff = sheathTypes[offHand.classId][offHand.subclassId];
+				} else if (ranged !== undefined) {
+					characterModel.charCustomization.sheathOff = sheathTypes[ranged.classId][ranged.subclassId];
+				} else {
+					characterModel.charCustomization.sheathOff = -1;
+				}
+
+				if (characterModel.charCustomization.sheathMain === undefined) {
+					characterModel.charCustomization.sheathMain = 0;
+				}
+				if (characterModel.charCustomization.sheathOff === undefined) {
+					characterModel.charCustomization.sheathOff = 0;
+				}
+			} else {
+				characterModel.charCustomization.sheathMain = -1;
 				characterModel.charCustomization.sheathOff = -1;
 			}
 
-			if (characterModel.charCustomization.sheathMain === undefined) {
-				characterModel.charCustomization.sheathMain = 0;
-			}
-			if (characterModel.charCustomization.sheathOff === undefined) {
-				characterModel.charCustomization.sheathOff = 0;
+			characterModel.mount.id = mountId;
+			createViewer();
+		}
+
+		function setBackground(file) {
+			if (!viewer) {
+				return;
 			}
+
+			const originalContentPath = viewer.options.contentPath;
+			viewer.options.contentPath = "{{websiteRoot}}/data/";
+			viewer.options.background = file;
+			viewer.renderer.loadBackground();
+			viewer.options.contentPath = originalContentPath;
+		}
+
+		if (charData.mounts.length === 0) {
+			$("#mounts-container").hide();
 		} else {
-			characterModel.charCustomization.sheathMain = -1;
-			characterModel.charCustomization.sheathOff = -1;
-		}
-
-		characterModel.mount.id = mountId;
-		createViewer();
-	}
-
-	function setBackground(file) {
-		if (!viewer) {
-			return;
-		}
-
-		const originalContentPath = viewer.options.contentPath;
-		viewer.options.contentPath = "{{websiteRoot}}/data/";
-		viewer.options.background = file;
-		viewer.renderer.loadBackground();
-		viewer.options.contentPath = originalContentPath;
-	}
-
-	if (charData.mounts.length === 0) {
-		$("#mounts-container").hide();
-	} else {
-		const $dismount = $mountTemplate.clone();
-		$dismount.find(".icon").css("background-image", `url("{{websiteRoot}}/img/UI-GearManager-LeaveItem.png")`);
-		$dismount.find("a")
-			.on("click", () => {
-				setMount(0);
-				return false;
-			});
-		$("#mounts").append($dismount);
-
-		for (const mount of charData.mounts) {
-			const $mount = $mountTemplate.clone();
-			$mount.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${mount.icon}.jpg")`);
-			$mount.find("a")
-				.attr("href", `{{aowow}}/?spell=${mount.spell}`)
+			const $dismount = $mountTemplate.clone();
+			$dismount.find(".icon").css("background-image", `url("{{websiteRoot}}/img/UI-GearManager-LeaveItem.png")`);
+			$dismount.find("a")
 				.on("click", () => {
-					setMount(mount.creatureDisplayId);
+					setMount(0);
 					return false;
 				});
-			$("#mounts").append($mount);
+			$("#mounts").append($dismount);
+
+			for (const mount of charData.mounts) {
+				const $mount = $mountTemplate.clone();
+				$mount.find(".icon").css("background-image", `url("{{aowow}}/static/images/wow/icons/medium/${mount.icon}.jpg")`);
+				$mount.find("a")
+					.attr("href", `{{aowow}}/?spell=${mount.spell}`)
+					.on("click", () => {
+						setMount(mount.creatureDisplayId);
+						return false;
+					});
+				$("#mounts").append($mount);
+			}
 		}
-	}
-	$("#btn-mounts").on("click", () => {
-		$("#mounts").slideToggle("fast");
-	});
+		$("#btn-mounts").on("click", () => {
+			$("#mounts").slideToggle("fast");
+		});
 
-	const sheathTypes = {
-		2: {
-			// One handed weapons
-			0: 3,
-			4: 3,
-			7: 3,
-			14: 3,
-			15: 3,
-			17: 3,
-			20: 3,
+		const sheathTypes = {
+			2: {
+				// One handed weapons
+				0: 3,
+				4: 3,
+				7: 3,
+				14: 3,
+				15: 3,
+				17: 3,
+				20: 3,
 
-			// Two handed weapons
-			1: 1,
-			5: 1,
-			8: 1,
+				// Two handed weapons
+				1: 1,
+				5: 1,
+				8: 1,
 
-			// Others
-			10: 2, // Staff
-			6: 1, // Polearm
-			2: 4, // Bow
-			3: 4, // Gun
-			18: 4, // Crossbow
-			13: 0, // Fist weapons
-			19: 3, // Wand
-			20: 1, // Fishing pole
-		},
-		4: {
-			0: 3, // Held in off-hand
-			6: 9, // Shield
-		},
-	};
-
-	const characterModel = {
-		type: ZamModelViewer.WOW,
-		contentPath: "{{ contentPath }}",
-		container: $model,
-		hd: true,
-		aspect: $model.outerWidth() / $model.outerHeight(),
-		charCustomization: {
-			race: charData.race,
-			gender: charData.gender,
-			options: charData.customizationOptions,
-			sheathMain: -1,
-			sheathOff: -1,
-		},
-		cls: charData.class,
-		items: (charData.characterModelTransmogs ?? charData.characterModelItems).filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))),
-		models: {
-			type: ZamModelViewer.Wow.Types.CHARACTER,
-			id: `${races[charData.race]}${genders[charData.gender]}`,
-		},
-		mount: {
-			type: ZamModelViewer.Wow.Types.NPC,
-			id: 0,
-		},
-	};
-	createViewer();
-
-	function debounce(func, timeout) {
-		let timer;
-		return (...args) => {
-			clearTimeout(timer);
-			timer = setTimeout(() => { func.apply(this, args); }, timeout);
+				// Others
+				10: 2, // Staff
+				6: 1, // Polearm
+				2: 4, // Bow
+				3: 4, // Gun
+				18: 4, // Crossbow
+				13: 0, // Fist weapons
+				19: 3, // Wand
+				20: 1, // Fishing pole
+			},
+			4: {
+				0: 3, // Held in off-hand
+				6: 9, // Shield
+			},
 		};
-	}
 
-	let windowWidth = $(window).width();
-	$(window).resize(debounce(() => {
-		const newWidth = $(window).width();
-		if (windowWidth === newWidth) {
-			// Do nothing if only the height changed.
-			// This prevents triggering a resize when the navigation bar moves on mobile when scrolling.
-			return;
+		const characterModel = {
+			type: ZamModelViewer.WOW,
+			contentPath: "{{ contentPath }}",
+			container: $model,
+			hd: true,
+			aspect: $model.outerWidth() / $model.outerHeight(),
+			charCustomization: {
+				race: charData.race,
+				gender: charData.gender,
+				options: charData.customizationOptions,
+				sheathMain: -1,
+				sheathOff: -1,
+			},
+			cls: charData.class,
+			items: (charData.characterModelTransmogs ?? charData.characterModelItems).filter(item => !((item[0] === 1 && hideHelm) || (item[0] === 16 && hideCloak))),
+			models: {
+				type: ZamModelViewer.Wow.Types.CHARACTER,
+				id: `${races[charData.race]}${genders[charData.gender]}`,
+			},
+			mount: {
+				type: ZamModelViewer.Wow.Types.NPC,
+				id: 0,
+			},
+		};
+		createViewer();
+
+		function debounce(func, timeout) {
+			let timer;
+			return (...args) => {
+				clearTimeout(timer);
+				timer = setTimeout(() => { func.apply(this, args); }, timeout);
+			};
 		}
-		windowWidth = newWidth;
-		onResize();
-	}, 500));
+
+		let windowWidth = $(window).width();
+		$(window).resize(debounce(() => {
+			const newWidth = $(window).width();
+			if (windowWidth === newWidth) {
+				// Do nothing if only the height changed.
+				// This prevents triggering a resize when the navigation bar moves on mobile when scrolling.
+				return;
+			}
+			windowWidth = newWidth;
+			onResize();
+		}, 500));
+	});
 </script>
diff --git a/static/guild.hbs b/static/guild.hbs
index 2342c28..7fd3491 100644
--- a/static/guild.hbs
+++ b/static/guild.hbs
@@ -59,43 +59,45 @@
 </table>
 
 <script type="application/javascript">
-	createGuildEmblem({{{ JSONstringify emblem }}}, $(".emblem-container .guild-emblem")[0]);
+	$(window).on("load", () => {
+		createGuildEmblem({{{ JSONstringify emblem }}}, $(".emblem-container .guild-emblem")[0]);
 
-	dt = $("#members").DataTable({
-		processing: true,
-		serverSide: true,
-		searchDelay: 800,
-		ajax: {
-			url: `{{websiteRoot}}/guild/{{realm}}/{{id}}/members`,
-		},
-		columnDefs: [
-			{
-				targets: 0,
-				render: (name) => `<a href="{{websiteRoot}}/character/{{realm}}/${name}">${name}</a>`,
+		dt = $("#members").DataTable({
+			processing: true,
+			serverSide: true,
+			searchDelay: 800,
+			ajax: {
+				url: `{{websiteRoot}}/guild/{{realm}}/{{id}}/members`,
 			},
-			{
-				targets: 1,
-				render: (rank, type, row, meta) => meta.settings.json.ranks[rank],
+			columnDefs: [
+				{
+					targets: 0,
+					render: (name) => `<a href="{{websiteRoot}}/character/{{realm}}/${name}">${name}</a>`,
+				},
+				{
+					targets: 1,
+					render: (rank, type, row, meta) => meta.settings.json.ranks[rank],
+				},
+				{
+					searchable: false,
+					targets: 3,
+					render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
+				},
+				{
+					searchable: false,
+					targets: 4,
+					render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
+				},
+				{
+					searchable: false,
+					targets: 5,
+					render: online => online ? "🟢" : "🔴",
+				},
+			],
+			responsive: {
+				details: true,
 			},
-			{
-				searchable: false,
-				targets: 3,
-				render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
-			},
-			{
-				searchable: false,
-				targets: 4,
-				render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
-			},
-			{
-				searchable: false,
-				targets: 5,
-				render: online => online ? "🟢" : "🔴",
-			},
-		],
-		responsive: {
-			details: true,
-		},
-		order: [[1, "asc"]],
+			order: [[1, "asc"]],
+		});
 	});
 </script>
diff --git a/static/index.hbs b/static/index.hbs
index b49052c..7e89a0f 100644
--- a/static/index.hbs
+++ b/static/index.hbs
@@ -34,49 +34,51 @@
 </table>
 
 <script type="application/javascript">
-	let dt;
+	$(window).on("load", () => {
+		let dt;
 
-	$("#select-realm").on("change", () => {
-		dt.draw();
-	});
+		$("#select-realm").on("change", () => {
+			dt.draw();
+		});
 
-	dt = $("#results").DataTable({
-		processing: true,
-		serverSide: true,
-		searchDelay: 800,
-		ajax: {
-			url: `{{websiteRoot}}/search`,
-			data: d => {
-				d.realm = $("#select-realm").val();
+		dt = $("#results").DataTable({
+			processing: true,
+			serverSide: true,
+			searchDelay: 800,
+			ajax: {
+				url: `{{websiteRoot}}/search`,
+				data: d => {
+					d.realm = $("#select-realm").val();
+				},
 			},
-		},
-		columnDefs: [
-			{
-				targets: 0,
-				render: (name, type, row, meta) => `<a href="{{websiteRoot}}/character/${meta.settings.json.realm}/${name}">${name}</a>`,
+			columnDefs: [
+				{
+					targets: 0,
+					render: (name, type, row, meta) => `<a href="{{websiteRoot}}/character/${meta.settings.json.realm}/${name}">${name}</a>`,
+				},
+				{
+					targets: 1,
+					render: (guild, type, row, meta) => guild === null ? "" : `<a href="{{websiteRoot}}/guild/${meta.settings.json.realm}/${guild}">${guild}</a>`,
+				},
+				{
+					searchable: false,
+					targets: 3,
+					render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
+				},
+				{
+					searchable: false,
+					targets: 4,
+					render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
+				},
+				{
+					searchable: false,
+					targets: 5,
+					render: online => online ? "🟢" : "🔴",
+				},
+			],
+			responsive: {
+				details: true,
 			},
-			{
-				targets: 1,
-				render: (guild, type, row, meta) => guild === null ? "" : `<a href="{{websiteRoot}}/guild/${meta.settings.json.realm}/${guild}">${guild}</a>`,
-			},
-			{
-				searchable: false,
-				targets: 3,
-				render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
-			},
-			{
-				searchable: false,
-				targets: 4,
-				render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
-			},
-			{
-				searchable: false,
-				targets: 5,
-				render: online => online ? "🟢" : "🔴",
-			},
-		],
-		responsive: {
-			details: true,
-		},
+		});
 	});
 </script>