☰

WME Wazebar

Displays a bar at the top of the editor that displays inbox, forum & wiki links

当前为 2025-03-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         WME Wazebar
  3. // @namespace    https://greasyfork.org/users/30701-justins83-waze
  4. // @version      2025.02.08.00
  5. // @description  Displays a bar at the top of the editor that displays inbox, forum & wiki links
  6. // @author       JustinS83
  7. // @include      https://beta.waze.com/*
  8. // @include      https://www.waze.com/discuss/*
  9. // @include      https://webnew.waze.com/discuss/*
  10. // @include      https://www.waze.com/editor*
  11. // @include      https://www.waze.com/*/editor*
  12. // @exclude      https://www.waze.com/user/editor*
  13. // @require      https://greasyfork.org/scripts/27254-clipboard-js/code/clipboardjs.js
  14. // @connect      storage.googleapis.com
  15. // @connect      greasyfork.org
  16. // @grant        none
  17. // @contributionURL https://github.com/WazeDev/Thank-The-Authors
  18. // ==/UserScript==
  19.  
  20. /* global $ */
  21. /* global I18n */
  22.  
  23. (function () {
  24.   "use strict";
  25.   var WazeBarSettings = [];
  26.   var forumInterval;
  27.   var currentState = "";
  28.   var States = {};
  29.   var forumUnreadOffset = 0;
  30.   const SCRIPT_VERSION = GM_info.script.version.toString();
  31.   const SCRIPT_NAME = GM_info.script.name;
  32.   const DOWNLOAD_URL = GM_info.script.downloadURL;
  33.   var debug = false;
  34.   let wmeSDK;
  35.  
  36.   var isBeta = /beta/.test(location.href);
  37.   var forumPage = /discuss/.test(location.href);
  38.  
  39.   console.log(`${SCRIPT_NAME}: isBeta:`, isBeta);
  40.   console.log(`${SCRIPT_NAME}: forumPage:`, forumPage);
  41.  
  42.   if (!forumPage) {
  43.     window.SDK_INITIALIZED.then(bootstrap);
  44.   } else {
  45.     initScript();
  46.   }
  47.  
  48.   function bootstrap() {
  49.     console.log(`${SCRIPT_NAME}: bootstrap() called`);
  50.     wmeSDK = getWmeSdk({
  51.       scriptId: SCRIPT_NAME.replaceAll(" ", ""),
  52.       scriptName: SCRIPT_NAME,
  53.     });
  54.  
  55.     Promise.all([wmeReady()])
  56.       .then(() => {
  57.         console.log(`${SCRIPT_NAME}: All dependencies are ready.`);
  58.         initScript();
  59.       })
  60.       .catch((error) => {
  61.         console.error(`${SCRIPT_NAME}: Error during bootstrap -`, error);
  62.       });
  63.   }
  64.  
  65.   function wmeReady() {
  66.     return new Promise((resolve) => {
  67.       if (wmeSDK.State.isReady()) {
  68.         resolve();
  69.       } else {
  70.         wmeSDK.Events.once({ eventName: "wme-ready" }).then(resolve);
  71.       }
  72.     });
  73.   }
  74.  
  75.   function initScript() {
  76.     if (debug) console.log(`${SCRIPT_NAME}: initScript() called`);
  77.     if (forumPage) {
  78.       loadScript("https://use.fontawesome.com/73f886e1d5.js", loadAppComponents);
  79.     } else {
  80.       loadAppComponents();
  81.     }
  82.   }
  83.  
  84.   function loadAppComponents() {
  85.     if (debug) console.log(`${SCRIPT_NAME}: loadAppComponents() called`);
  86.     LoadSettingsObj();
  87.     LoadStatesObj();
  88.  
  89.     if (!forumPage || (forumPage && WazeBarSettings.DisplayWazeForum)) {
  90.       if (!forumPage) {
  91.         if (wmeSDK.Events) {
  92.           // Register map move events
  93.           wmeSDK.Events.on({
  94.             eventName: "wme-map-move-end",
  95.             eventHandler: () => setTimeout(updateCurrentStateEntries, 100),
  96.           });
  97.  
  98.           // Register map zoom change event
  99.           wmeSDK.Events.on({
  100.             eventName: "wme-map-zoom-changed",
  101.             eventHandler: () => setTimeout(updateCurrentStateEntries, 100),
  102.           });
  103.         }
  104.       }
  105.       BuildWazebar();
  106.       injectCss();
  107.       BuildSettingsInterface();
  108.       console.log(`${SCRIPT_NAME}: Waze Bar Loaded`);
  109.     }
  110.   }
  111.  
  112.   function loadScript(url, callback) {
  113.     var script = document.createElement("script");
  114.     script.type = "text/javascript";
  115.  
  116.     if (script.readyState) {
  117.       //IE
  118.       script.onreadystatechange = function () {
  119.         if (script.readyState == "loaded" || script.readyState == "complete") {
  120.           script.onreadystatechange = null;
  121.           if (callback != null) callback();
  122.         }
  123.       };
  124.     } else {
  125.       //Others
  126.       script.onload = function () {
  127.         if (callback != null) callback();
  128.       };
  129.     }
  130.  
  131.     script.src = url;
  132.     document.getElementsByTagName("head")[0].appendChild(script);
  133.   }
  134.  
  135.   function getCurrentState() {
  136.     const topState = wmeSDK.DataModel.States.getTopState();
  137.     if (debug) console.log(`${SCRIPT_NAME}: getCurrentState() called: topState =`, topState);
  138.     if (topState === null) {
  139.       return null; // Handle the case where no top state is available
  140.     }
  141.     return topState.name;
  142.   }
  143.  
  144.   function updateCurrentStateEntries() {
  145.     const topState = wmeSDK.DataModel.States.getTopState();
  146.     if (debug) console.log(`${SCRIPT_NAME}: updateCurrentStateEntries() called: topState =`, topState);
  147.  
  148.     if (topState !== null && currentState !== getCurrentState()) {
  149.       // User panned/zoomed to a different state, so we need to update the current state forum & wiki entries
  150.       BuildWazebar();
  151.       currentState = getCurrentState();
  152.     }
  153.   }
  154.  
  155.   function BuildWazebar() {
  156.     if (debug) console.log(`${SCRIPT_NAME}: BuildWazebar() called`);
  157.     $("#Wazebar").remove();
  158.     var $Wazebar = $("<div>", { id: "Wazebar" });
  159.     $Wazebar.html(
  160.       [
  161.         '<div class="WazeBarIcon" id="WazeBarSettingsButton"><i class="fa fa-cog" aria-hidden="true"></i></div>',
  162.         '<div class="WazeBarIcon" id="WazeBarRefreshButton"><i class="fa fa-refresh" aria-hidden="true"></i></div>',
  163.         '<div class="WazeBarIcon" id="WazeBarFavoritesIcon"><i class="fa fa-star" aria-hidden="true"></i>',
  164.         '<div id="WazeBarFavorites">',
  165.         '<ul id="WazeBarFavoritesList"></ul>',
  166.         '<div id="WazeBarFavoritesAddContainer">',
  167.         '<input type="text" id="WazeBarURL" placeholder="URL">',
  168.         '<input type="text" id="WazeBarText" placeholder="Label">',
  169.         '<button id="WazeBarAddFavorite">Add</button>',
  170.         "</div>",
  171.         "</div>",
  172.         "</div>",
  173.         // Other forum links
  174.         WazeBarSettings.WMEBetaForum ? '<div class="WazeBarText WazeBarForumItem" id="WMEBetaForum"><a href="' + location.origin + '/discuss/c/editors/beta-community/4088" ' + LoadNewTab() + ">WME Beta</a></div>" : "",
  175.         WazeBarSettings.scriptsForum ? '<div class="WazeBarText WazeBarForumItem" id="Scripts"><a href="' + location.origin + '/discuss/c/editors/addons-extensions-and-scripts/3984" ' + LoadNewTab() + ">Scripts</a></div>" : "",
  176.         WazeBarSettings.USSMForum ? '<div class="WazeBarText WazeBarForumItem" id="USSMForum"><a href="' + location.origin + '/discuss/c/editors/united-states/us-state-managers/4890" ' + LoadNewTab() + ">US SM</a></div>" : "",
  177.         WazeBarSettings.USChampForum ? '<div class="WazeBarText WazeBarForumItem" id="USChampForum"><a href="' + location.origin + '/discuss/c/editors/united-states/us-waze-champs/4893" ' + LoadNewTab() + ">US Champ</a></div>" : "",
  178.         WazeBarSettings.USWikiForum ? '<div class="WazeBarText WazeBarForumItem" id="USWikiForum"><a href="' + location.origin + '/discuss/c/editors/united-states/us-wiki-discussion/4894" ' + LoadNewTab() + ">US Wiki</a></div>" : "",
  179.         BuildStateForumEntries(),
  180.         BuildStateUnlockEntries(),
  181.         BuildCustomEntries(),
  182.         BuildRegionWikiEntries(),
  183.         BuildStateWikiEntries(),
  184.         BuildCurrentStateEntries(),
  185.         WazeBarSettings.NAServerUpdate ? '<div class="WazeBarText WazeBarServerUpdate;" id="WazebarStatus">NA Server Update: </div>' : "",
  186.         WazeBarSettings.ROWServerUpdate ? '<div class="WazeBarText WazeBarServerUpdate;" id="WazebarStatusROW">ROW Server Update: </div>' : "",
  187.       ].join("")
  188.     );
  189.  
  190.     if (forumPage) {
  191.       $(".d-header").prepend($Wazebar);
  192.       $("#Wazebar").css({
  193.         "background-color": "white",
  194.         width: "100%",
  195.       });
  196.     } else {
  197.       $(".app.container-fluid").before($Wazebar);
  198.     }
  199.  
  200.     checkForums();
  201.     StartIntervals();
  202.  
  203.     // Event handler for settings button to show the settings dialog
  204.     $("#WazeBarSettingsButton").click(function () {
  205.       if (debug) console.log(`${SCRIPT_NAME}: Settings button clicked`);
  206.       $("#WazeBarSettings").fadeIn();
  207.     });
  208.  
  209.     $("#WazeBarAddFavorite").click(function () {
  210.       if (debug) console.log(`${SCRIPT_NAME}: AddFavorite button clicked`);
  211.       var url = $("#WazeBarURL").val();
  212.       var text = $("#WazeBarText").val();
  213.       if (url !== "" && text !== "") {
  214.         if (!(url.startsWith("http://") || url.startsWith("https://"))) {
  215.           url = "http://" + url;
  216.         }
  217.         WazeBarSettings.Favorites.push({ href: url, text: text });
  218.         $("#WazeBarURL").val("");
  219.         $("#WazeBarText").val("");
  220.         LoadFavorites();
  221.         SaveSettings();
  222.       }
  223.     });
  224.  
  225.     $("#WazeBarFavoritesIcon").mouseleave(function () {
  226.       $("#WazeBarFavorites").css({ display: "none" });
  227.     });
  228.  
  229.     $("#WazeBarFavoritesIcon").mouseenter(function () {
  230.       $("#WazeBarFavorites").css({ display: "block" });
  231.     });
  232.  
  233.     LoadFavorites();
  234.  
  235.     $("#WazeBarFavoritesList a").click(function () {
  236.       $("#WazeBarFavorites").css({ display: "none" });
  237.     });
  238.  
  239.     if (WazeBarSettings.NAServerUpdate) {
  240.       fetch("https://storage.googleapis.com/waze-tile-build-public/release-history/na-feed-v2.xml")
  241.         .then((response) => {
  242.           if (!response.ok) {
  243.             throw new Error(`${SCRIPT_NAME}: Network response was not ok: ${response.statusText}`);
  244.           }
  245.           return response.text();
  246.         })
  247.         .then((data) => ParseStatusFeed(data, "NA", "WazebarStatus"))
  248.         .catch((error) => console.error(`${SCRIPT_NAME}: Error fetching NA Server Update:`, error));
  249.     }
  250.  
  251.     if (WazeBarSettings.ROWServerUpdate) {
  252.       fetch("https://storage.googleapis.com/waze-tile-build-public/release-history/intl-feed-v2.xml")
  253.         .then((response) => {
  254.           if (!response.ok) {
  255.             throw new Error(`${SCRIPT_NAME}: Network response was not ok: ${response.statusText}`);
  256.           }
  257.           return response.text();
  258.         })
  259.         .then((data) => ParseStatusFeed(data, "ROW", "WazebarStatusROW"))
  260.         .catch((error) => console.error(`${SCRIPT_NAME}: Error fetching ROW Server Update:`, error));
  261.     }
  262.  
  263.     $("#WazeBarRefreshButton").click(function () {
  264.       if (debug) console.log(`${SCRIPT_NAME}: Refresh button clicked`);
  265.       $("#WazeBarRefreshButton i").addClass("fa-spin");
  266.       window.clearInterval(forumInterval);
  267.       checkForums();
  268.       StartIntervals();
  269.       $("#WazeBarRefreshButton i").removeClass("fa-spin");
  270.     });
  271.  
  272.     // Initially set height for the app container
  273.     setHeightForAppContainer();
  274.   }
  275.  
  276.   // Function for setting height dynamically
  277.   function setHeightForAppContainer() {
  278.     if (debug) console.log(`${SCRIPT_NAME}: setHeightForAppContainer called`);
  279.     const wazebarHeight = $("#Wazebar").height();
  280.     $("body > div.app.container-fluid").css("height", `calc(100vh - ${wazebarHeight}px)`);
  281.     window.dispatchEvent(new Event("resize")); // Adjust WME editing area
  282.   }
  283.  
  284.   function LoadSettingsInterface() {
  285.     if (debug) console.log(`${SCRIPT_NAME}: LoadSettingsInterface() called`);
  286.     // Load JSON settings and use default if not present
  287.     const loadedSettings = localStorage.getItem("Wazebar_Settings") || JSON.stringify(defaultSettings, null, 4);
  288.     $("#txtWazebarSettings")[0].innerHTML = loadedSettings;
  289.  
  290.     // Update the UI elements
  291.     setChecked("WazeForumSetting", WazeBarSettings?.DisplayWazeForum !== undefined ? WazeBarSettings.DisplayWazeForum : defaultSettings.DisplayWazeForum);
  292.     setChecked("WMEBetaForumSetting", WazeBarSettings?.WMEBetaForum !== undefined ? WazeBarSettings.WMEBetaForum : defaultSettings.WMEBetaForum);
  293.     setChecked("ScriptsForum", WazeBarSettings?.scriptsForum !== undefined ? WazeBarSettings.scriptsForum : defaultSettings.scriptsForum);
  294.     setChecked("USSMForumSetting", WazeBarSettings?.USSMForum !== undefined ? WazeBarSettings.USSMForum : defaultSettings.USSMForum);
  295.     if (!forumPage) setChecked("USChampForumSetting", WazeBarSettings?.USChampForum !== undefined ? WazeBarSettings.USChampForum : defaultSettings.USChampForum);
  296.     setChecked("USWikiForumSetting", WazeBarSettings?.USWikiForum !== undefined ? WazeBarSettings.USWikiForum : defaultSettings.USWikiForum);
  297.     setChecked("NAServerUpdateSetting", WazeBarSettings?.NAServerUpdate !== undefined ? WazeBarSettings.NAServerUpdate : defaultSettings.NAServerUpdate);
  298.     setChecked("ROWServerUpdateSetting", WazeBarSettings?.ROWServerUpdate !== undefined ? WazeBarSettings.ROWServerUpdate : defaultSettings.ROWServerUpdate);
  299.     $("#forumInterval")[0].value = WazeBarSettings?.forumInterval !== undefined ? WazeBarSettings.forumInterval : defaultSettings.forumInterval;
  300.     $("#forumHistory")[0].value = WazeBarSettings?.forumHistory !== undefined ? WazeBarSettings.forumHistory : defaultSettings.forumHistory;
  301.     $("#WazeBarFontSize")[0].value = WazeBarSettings?.BarFontSize !== undefined ? WazeBarSettings.BarFontSize : defaultSettings.BarFontSize;
  302.     $("#colorPickerForumFont").val(WazeBarSettings?.ForumFontColor !== undefined ? WazeBarSettings.ForumFontColor : defaultSettings.ForumFontColor);
  303.     $("#colorPickerWikiFont").val(WazeBarSettings?.WikiFontColor !== undefined ? WazeBarSettings.WikiFontColor : defaultSettings.WikiFontColor);
  304.     serializeSettings();
  305.     LoadCustomLinks();
  306.   }
  307.  
  308.   function LoadNewTab() {
  309.     return forumPage ? "" : ' target="_blank"';
  310.   }
  311.  
  312.   function LoadFavorites() {
  313.     if (debug) console.log(`${SCRIPT_NAME}: LoadFavorites() called`);
  314.     var favoritesList = $("#WazeBarFavoritesList");
  315.     favoritesList.empty(); // Clear the list
  316.  
  317.     // For each favorite, append a structured item
  318.     WazeBarSettings.Favorites.forEach((favorite, index) => {
  319.       const listItem = $(`
  320.                 <li class="WazeBarFavoritesList favorite-item">
  321.                     <a href="${favorite.href}" target="_blank">${favorite.text}</a>
  322.                     <i class="fa fa-times" title="Remove from favorites" data-index="${index}"></i>
  323.                 </li>
  324.             `);
  325.       favoritesList.append(listItem);
  326.     });
  327.  
  328.     // Use event delegation to handle the removal of items
  329.     favoritesList.on("click", ".fa-times", function () {
  330.       const index = $(this).data("index");
  331.       WazeBarSettings.Favorites.splice(index, 1);
  332.       SaveSettings();
  333.       LoadFavorites();
  334.     });
  335.   }
  336.  
  337.   function LoadCustomLinks() {
  338.     if (debug) console.log(`${SCRIPT_NAME}: LoadCustomLinks() called`);
  339.     const customList = $("#WazeBarCustomLinksList");
  340.     customList.empty(); // Clear the list
  341.  
  342.     // For each custom link, append a structured item
  343.     WazeBarSettings.CustomLinks.forEach((customLink, index) => {
  344.       const listItem = $(`
  345.                 <li class="custom-item">
  346.                     <a href="${customLink.href}" target="_blank">${customLink.text}</a>
  347.                     <i class="fa fa-times" title="Remove custom link" data-index="${index}"></i>
  348.                 </li>
  349.             `);
  350.       customList.append(listItem);
  351.     });
  352.  
  353.     // Use event delegation to handle the removal of items
  354.     customList.on("click", ".fa-times", function () {
  355.       const index = $(this).data("index");
  356.       WazeBarSettings.CustomLinks.splice(index, 1);
  357.       SaveSettings();
  358.       serializeSettings();
  359.       LoadCustomLinks();
  360.       BuildWazebar();
  361.     });
  362.  
  363.     // Add close click functionality, ensure proper index management
  364.     $('[id^="WazeBarCustomLinksListClose"]').click(function () {
  365.       const index = Number(this.id.replace("WazeBarCustomLinksListClose", ""));
  366.       if (index >= 0 && index < WazeBarSettings.CustomLinks.length) {
  367.         WazeBarSettings.CustomLinks.splice(index, 1);
  368.         SaveSettings();
  369.         LoadCustomLinks();
  370.         serializeSettings();
  371.         BuildWazebar();
  372.       }
  373.     });
  374.   }
  375.  
  376.   function StartIntervals() {
  377.     forumInterval = setInterval(checkForums, WazeBarSettings.forumInterval * 60000);
  378.   }
  379.  
  380.   function checkForums() {
  381.     if (debug) console.log(`${SCRIPT_NAME}: checkForums() called`);
  382.     if (WazeBarSettings.WMEBetaForum) checkUnreadTopics(location.origin + "/discuss/c/editors/beta-community/4088", "WMEBetaForum", "WMEBetaForumCount");
  383.     if (WazeBarSettings.scriptsForum) checkUnreadTopics(location.origin + "/discuss/c/editors/addons-extensions-and-scripts/3984", "Scripts", "ScriptsCount");
  384.     if (WazeBarSettings.USSMForum) checkUnreadTopics(location.origin + "/discuss/c/editors/united-states/us-state-managers/4890", "USSMForum", "USSMForumCount");
  385.     if (WazeBarSettings.USChampForum) checkUnreadTopics(location.origin + "/discuss/c/editors/united-states/us-waze-champs/4893", "USChampForum", "USChampForumCount");
  386.     if (WazeBarSettings.USWikiForum) checkUnreadTopics(location.origin + "/discuss/c/editors/united-states/us-wiki-discussion/4894", "USWikiForum", "USWikiForumCount");
  387.  
  388.     Object.keys(WazeBarSettings.header).forEach(function (state, index) {
  389.       if (WazeBarSettings.header[state].forum) checkUnreadTopics(WazeBarSettings.header[state].forum.replace("https://www.waze.com", location.origin), state.replace(" ", "_") + "Forum", state.replace(" ", "_") + "ForumCount");
  390.  
  391.       if (WazeBarSettings.header[state].unlock) {
  392.         var url = "https://www.waze.com/discuss/search?q=" + encodeURIComponent(state) + "%20%23united-states%3Aus-unlock-and-update-requests%20order%3Alatest";
  393.         checkUnreadTopics(url, state.replace(" ", "_") + "Unlock", state.replace(" ", "_") + "UnlockCount");
  394.       }
  395.     });
  396.  
  397.     for (var i = 0; i < WazeBarSettings.CustomLinks.length; i++) {
  398.       if (WazeBarSettings.CustomLinks[i].href.includes("/discuss")) checkUnreadTopics(WazeBarSettings.CustomLinks[i].href, WazeBarSettings.CustomLinks[i].text.replace(/\s/g, "") + i + "Forum", WazeBarSettings.CustomLinks[i].text.replace(/\s/g, "") + i + "ForumCount");
  399.     }
  400.   }
  401.  
  402.   // General Function logic for checkUnreadTopics() from dalverson Github fork - Oct 10, 20204
  403.   function checkUnreadTopics(path, parentID, spanID) {
  404.     var count = 0;
  405.     var jdat, dat1;
  406.  
  407.     if (debug) console.log(`${SCRIPT_NAME}: CheckUnreadTopics() called for `, path, parentID, spanID);
  408.  
  409.     $.get(path, function (page) {
  410.       const jpattern = /data-preloaded=\"(.*)\">/;
  411.       var dat = jpattern.exec(page);
  412.  
  413.       if (dat && dat.length > 1) {
  414.         dat1 = dat[1].replace(/&quot;/g, '"');
  415.         try {
  416.           jdat = JSON.parse(dat1);
  417.         } catch (error) {
  418.           console.error(`${SCRIPT_NAME}: JSON parse error in checkUnreadTopics()`, error);
  419.           return;
  420.         }
  421.  
  422.         var jdat2;
  423.         var topix;
  424.  
  425.         if (jdat.search) {
  426.           jdat2 = JSON.parse(jdat.search);
  427.           topix = jdat2.topics; // Access topics directly from search JSON format
  428.         } else if (jdat.topic_list) {
  429.           jdat2 = JSON.parse(jdat.topic_list);
  430.           topix = jdat2.topic_list?.topics; // Access topics from the nested topic_list property
  431.         } else {
  432.           console.warn(`${SCRIPT_NAME}: invalid JSON format in checkUnreadTopics() for `, parentID);
  433.           return;
  434.         }
  435.  
  436.         if (!topix || topix.length === 0) {
  437.           console.warn(`${SCRIPT_NAME}: No topics found in checkUnreadTopics() for`, parentID);
  438.           return;
  439.         }
  440.  
  441.         $("#" + spanID).remove();
  442.         var links = "";
  443.         for (var tp in topix) {
  444.           if (Object.prototype.hasOwnProperty.call(topix, tp)) {
  445.             var tobj = topix[tp];
  446.             const ldate = Date.parse(tobj.last_posted_at);
  447.             const formattedDate = formatDate(new Date(ldate));
  448.             const diff = Date.now() - ldate;
  449.             const dfhrs = diff / 3600000; // hours since last post on this topic
  450.             var lrpn = tobj.last_read_post_number ? tobj.last_read_post_number : 0;
  451.             var hpn = tobj.highest_post_number ? tobj.highest_post_number : 0;
  452.             var item_to_read = lrpn > 0 && lrpn < hpn ? lrpn + 1 : hpn;
  453.             var fh = WazeBarSettings.forumHistory * 24;
  454.  
  455.             if (((lrpn > 0 && lrpn < hpn) || (dfhrs < fh && lrpn == 0) || tobj.unseen || tobj.unread > 0 || tobj.unread_posts > 0) && dfhrs < fh) {
  456.               count += 1;
  457.               links += `
  458.             <li class="WazeBarUnreadList unread-item">
  459.                 <a href="https://www.waze.com/discuss/t/${tobj.slug}/${tobj.id}/${item_to_read}" ${LoadNewTab()}>${tobj.fancy_title} (${formattedDate})</a>
  460.             </li>`;
  461.             }
  462.           }
  463.         }
  464.  
  465.         if (count > 0) {
  466.           $("#" + parentID + " a").append(`
  467.                   <span style='color:red;font-weight:bold;' id='${spanID}'> 
  468.                   (${count})
  469.                   <div class='WazeBarUnread' id='WazeBarUnread${spanID}' style='visibility:hidden;
  470.                       animation-fill-mode: forwards;
  471.                       left:${$("#" + parentID).position().left}px;
  472.                       top:${parseInt($("#" + parentID).height()) + forumUnreadOffset}px;'>
  473.                       <ul class='WazeBarUnreadList' id='WazeBarUnreadList${spanID}'>
  474.                       </ul>
  475.                   </div>
  476.                   </span>
  477.               `);
  478.  
  479.           $("#WazeBarUnreadList" + spanID).html(links);
  480.  
  481.           $("#" + spanID)
  482.             .on("mouseenter", function () {
  483.               $("#WazeBarUnread" + spanID).css({ visibility: "visible" });
  484.             })
  485.             .on("mouseleave", function () {
  486.               $("#WazeBarUnread" + spanID).css({ visibility: "hidden" });
  487.             });
  488.  
  489.           $("#" + spanID + " a").click(function (event) {
  490.             event.stopPropagation();
  491.             $("#WazeBarUnread" + spanID).css({ visibility: "hidden" });
  492.           });
  493.         }
  494.       } else {
  495.         console.warn(`${SCRIPT_NAME}: No <data-preloaded> section on /discuss webpage for `, parentID);
  496.       }
  497.     });
  498.     return count;
  499.   }
  500.  
  501.   function ParseStatusFeed(data, updateType, targetId) {
  502.     if (debug) console.log(`${SCRIPT_NAME}: ParseStatusFeed() called with updateType = ${updateType}`);
  503.  
  504.     // Parse the XML data
  505.     const parser = new DOMParser();
  506.     const xmlDoc = parser.parseFromString(data, "application/xml");
  507.  
  508.     if (xmlDoc.querySelector("parsererror")) {
  509.       console.error(`${SCRIPT_NAME}: Error parsing XML`);
  510.       return;
  511.     }
  512.  
  513.     // Get the first <entry> element
  514.     const firstEntry = xmlDoc.querySelector("entry");
  515.     if (!firstEntry) {
  516.       console.error(`${SCRIPT_NAME}: No entry element found`);
  517.       return;
  518.     }
  519.  
  520.     // Extract and check the <title> element
  521.     const title = firstEntry.querySelector("title")?.textContent || "";
  522.     if ((updateType === "NA" && title.includes("North America")) || (updateType === "ROW" && title.includes("International"))) {
  523.       // Extract the <updated> element
  524.       const updated = firstEntry.querySelector("updated")?.textContent;
  525.       if (debug) console.log(`${SCRIPT_NAME}: Parsed <update> object: ${updated}`);
  526.  
  527.       if (!updated) {
  528.         console.error(`${SCRIPT_NAME}: No updated element found`);
  529.         return;
  530.       }
  531.  
  532.       const date = new Date(updated); // The date string is expected to already be in UTC (Z) format
  533.       if (isNaN(date)) {
  534.         console.error(`${SCRIPT_NAME}: Unable to convert <update> date: ${updated}`);
  535.       } else {
  536.         if (debug) console.log(`${SCRIPT_NAME}: Converted <update> to date object: ${date}`);
  537.  
  538.         const formattedDate = formatDate(date);
  539.         const label = updateType === "NA" ? "NA Server Update: " : "ROW Server Update: ";
  540.         const $target = $("#" + targetId);
  541.         $target.empty().append(label + formattedDate);
  542.  
  543.         if (debug) console.log(`${SCRIPT_NAME}: Update found for ${updateType}: ${formattedDate}`);
  544.       }
  545.     } else {
  546.       if (debug) console.log(`${SCRIPT_NAME}: Title does not match expected format for ${updateType}`);
  547.     }
  548.   }
  549.  
  550.   function formatDate(date) {
  551.     // Extract the date in YYYY-MM-DD format
  552.     const dateOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
  553.     const dateString = date.toLocaleDateString("en-CA", dateOptions);
  554.  
  555.     // Extract the time in HH:MM AM/PM format
  556.     const timeOptions = { hour: "2-digit", minute: "2-digit", hour12: true };
  557.     const timeString = date.toLocaleTimeString("en-US", timeOptions);
  558.  
  559.     // Combine and format the date and time
  560.     return `${dateString} ${timeString}`;
  561.   }
  562.  
  563.   function BuildStateForumEntries() {
  564.     var stateForums = "";
  565.     Object.keys(WazeBarSettings.header).forEach(function (state) {
  566.       if (WazeBarSettings.header[state].forum)
  567.         stateForums += '<div class="WazeBarText WazeBarForumItem" id="' + state.replace(" ", "_") + 'Forum"><a href="' + WazeBarSettings.header[state].forum.replace("https://www.waze.com", location.origin) + '" ' + LoadNewTab() + ">" + WazeBarSettings.header[state].abbr + "</a></div>";
  568.     });
  569.     return stateForums;
  570.   }
  571.  
  572.   function BuildCurrentStateEntries() {
  573.     var currentState = "";
  574.  
  575.     if (!forumPage) {
  576.       const topCountry = wmeSDK.DataModel.Countries.getTopCountry();
  577.       const topCountryId = topCountry ? topCountry.id : null;
  578.  
  579.       if (topCountryId === 235) {
  580.         // Only proceed if the top country is the US
  581.         var currState = getCurrentState();
  582.         if (!currState || !States[currState]) {
  583.           return currentState; // Return an empty string if currState or its corresponding States entry is invalid.
  584.         }
  585.         currentState += '<div class="WazeBarText WazeBarCurrState" id="' + currState.replace(" ", "_") + 'ForumCurrState"><a href="' + States[currState].forum.replace("https://www.waze.com", location.origin) + '" ' + LoadNewTab() + ">" + States[currState].abbr + "</a></div>";
  586.         currentState += '<div class="WazeBarText WazeBarCurrState"><a href="' + States[currState].wiki + '" target="_blank">' + States[currState].abbr + " Wiki</a></div>";
  587.       }
  588.     }
  589.     return currentState;
  590.   }
  591.  
  592.   function BuildCustomEntries() {
  593.     var customList = "";
  594.     if (WazeBarSettings.CustomLinks && WazeBarSettings.CustomLinks.length > 0) {
  595.       //forum entries first
  596.       for (var i = 0; i < WazeBarSettings.CustomLinks.length; i++) {
  597.         if (WazeBarSettings.CustomLinks[i].href.includes("/discuss")) {
  598.           customList +=
  599.             '<div class="WazeBarText WazeBarForumItem" id="' +
  600.             WazeBarSettings.CustomLinks[i].text.replace(/\s/g, "") +
  601.             i +
  602.             'Forum"><a href="' +
  603.             WazeBarSettings.CustomLinks[i].href.replace("https://www.waze.com", location.origin) +
  604.             '" ' +
  605.             LoadNewTab() +
  606.             ">" +
  607.             WazeBarSettings.CustomLinks[i].text +
  608.             "</a></div>";
  609.         }
  610.       }
  611.  
  612.       //wiki entries
  613.       for (i = 0; i < WazeBarSettings.CustomLinks.length; i++) {
  614.         if (WazeBarSettings.CustomLinks[i].href.includes("/wiki")) {
  615.           customList += '<div class="WazeBarText WazeBarWikiItem"><a href="' + WazeBarSettings.CustomLinks[i].href + '" target="_blank">' + WazeBarSettings.CustomLinks[i].text + "</a></div>";
  616.         }
  617.       }
  618.       return customList;
  619.     }
  620.   }
  621.  
  622.   function BuildStateWikiEntries() {
  623.     var stateWikis = "";
  624.     Object.keys(WazeBarSettings.header).forEach(function (state) {
  625.       if (WazeBarSettings.header[state].wiki) stateWikis += '<div class="WazeBarText WazeBarWikiItem"><a href="' + WazeBarSettings.header[state].wiki + '" target="_blank">' + WazeBarSettings.header[state].abbr + " Wiki</a></div>";
  626.     });
  627.     return stateWikis;
  628.   }
  629.  
  630.   function BuildStateUnlockEntries() {
  631.     var stateUnlocks = "";
  632.     Object.keys(WazeBarSettings.header).forEach(function (state) {
  633.       if (WazeBarSettings.header[state].unlock) {
  634.         // Construct the URL with the correct use of encodeURIComponent
  635.         var url = `https://www.waze.com/discuss/search?q=${encodeURIComponent(state)}%20%23united-states%3Aus-unlock-and-update-requests%20order%3Alatest`;
  636.         stateUnlocks += '<div class="WazeBarText WazeBarForumItem" id="' + state.replace(" ", "_") + 'Unlock"><a href="' + url + '" ' + LoadNewTab() + ">" + WazeBarSettings.header[state].abbr + " Unlock</a></div>";
  637.       }
  638.     });
  639.     return stateUnlocks;
  640.   }
  641.  
  642.   function BuildRegionWikiEntries() {
  643.     var regionWikis = "";
  644.     if (WazeBarSettings.header.region) {
  645.       Object.keys(WazeBarSettings.header.region).forEach(function (region) {
  646.         if (WazeBarSettings.header.region[region].wiki) regionWikis += '<div class="WazeBarText WazeBarWikiItem"><a href="' + WazeBarSettings.header.region[region].wiki + '" target="_blank">' + WazeBarSettings.header.region[region].abbr + " Wiki</a></div>";
  647.       });
  648.     }
  649.     return regionWikis;
  650.   }
  651.  
  652.   function BuildSettingsInterface() {
  653.     if (debug) console.log(`${SCRIPT_NAME}: BuildSettingsInterface() called`);
  654.  
  655.     var $section = $("<div>", { id: "WazeBarSettings" });
  656.     $section.html(
  657.       [
  658.         "<div>",
  659.         "<div class='flex-container' style='margin-bottom: 10px;'>",
  660.  
  661.         // Start of the 1st Flex Column
  662.         "<div class='flex-column left-column'>",
  663.         "<div style='display: flex; flex-direction: column; gap: 8px;'>",
  664.         // Font size with default value
  665.         "<div style='display: flex; align-items: center; gap: 8px;'>",
  666.         "<input type='number' id='WazeBarFontSize' min='8' max='30' style='width: 50px;' value='" + WazeBarSettings.BarFontSize + "'/>",
  667.         "<label for='WazeBarFontSize'>Font size</label>",
  668.         "</div>",
  669.         // Forum font color with default value
  670.         "<div style='display: flex; align-items: center; gap: 8px;'>",
  671.         "<input type='color' id='colorPickerForumFont' style='width: 50px;' value='" + WazeBarSettings.ForumFontColor + "'/>",
  672.         "<label for='colorPickerForumFont'>Forum Links Color</label>",
  673.         "</div>",
  674.         // Wiki font color with default value
  675.         "<div style='display: flex; align-items: center; gap: 8px;'>",
  676.         "<input type='color' id='colorPickerWikiFont' style='width: 50px;' value='" + WazeBarSettings.WikiFontColor + "'/>",
  677.         "<label for='colorPickerWikiFont'>Wiki Links Color</label>",
  678.         "</div>",
  679.  
  680.         // Forum check frequency
  681.         "<div style='display: flex; align-items: center; gap: 8px;'>",
  682.         "<input type='number' id='forumInterval' min='1' style='width: 50px;' value='" + WazeBarSettings.forumInterval + "'/>",
  683.         "<label for='forumInterval'>Forum check frequency (mins)</label>",
  684.         "</div>",
  685.         // Forum History
  686.         "<div style='display: flex; align-items: center; gap: 8px;'>",
  687.         "<input type='number' id='forumHistory' min='1' style='width: 50px;' value='" + WazeBarSettings.forumHistory + "'/>",
  688.         "<label for='forumHistory'>Forum History (Days)</label>",
  689.         "</div>",
  690.         // Horizontal rule before Custom Links section
  691.         "<hr>",
  692.  
  693.         // Export/Import Section
  694.         "<div id='exportImportSection'>",
  695.         "<h4>Export/Import</h4>",
  696.         "<div class='flex-row' style='align-items: flex-start; gap: 8px;'>",
  697.         "<button class='export-button fa fa-upload' id='btnWazebarCopySettings' title='Copy Wazebar settings to the clipboard' data-clipboard-target='#txtWazebarSettings'></button>",
  698.         "<textarea readonly id='txtWazebarSettings' placeholder='Copied settings will appear here'></textarea>",
  699.         "</div>",
  700.         "<div class='flex-row' style='align-items: flex-start; gap: 8px; margin-top: 8px;'>",
  701.         "<button class='import-button fa fa-download' id='btnWazebarImportSettings' title='Import copied settings'></button>",
  702.         "<textarea id='txtWazebarImportSettings' placeholder='Paste JSON formated settings here to import'></textarea>",
  703.         "</div>",
  704.         "</div>",
  705.         "</div>",
  706.         "</div>",
  707.  
  708.         // Start of the 2nd Flex Column
  709.         // Start of the major Forums and Server update check boxes
  710.         "<div class='flex-column right-column'>",
  711.         "<div id='WBDisplayOptions'>",
  712.  
  713.         "<div class='checkbox-container'>",
  714.         "<input type='checkbox' id='WazeForumSetting' " + (WazeBarSettings.DisplayWazeForum ? "checked" : "") + " />",
  715.         "<label for='WazeForumSetting'>Display on Forum pages</label>",
  716.         "</div>",
  717.  
  718.         "<div class='checkbox-container'>",
  719.         "<input type='checkbox' id='WMEBetaForumSetting' " + (WazeBarSettings.WMEBetaForum ? "checked" : "") + " />",
  720.         "<label for='WMEBetaForumSetting'>WME Beta Forum</label>",
  721.         "</div>",
  722.  
  723.         "<div class='checkbox-container'>",
  724.         "<input type='checkbox' id='ScriptsForum' " + (WazeBarSettings.scriptsForum ? "checked" : "") + " />",
  725.         "<label for='ScriptsForum'>Scripts Forum</label>",
  726.         "</div>",
  727.  
  728.         "<div class='checkbox-container'>",
  729.         "<input type='checkbox' id='USSMForumSetting' " + (WazeBarSettings.USSMForum ? "checked" : "") + " />",
  730.         "<label for='USSMForumSetting'>US SM Forum</label>",
  731.         "</div>",
  732.  
  733.         // Conditionally render US Champ Forum checkbox
  734.  
  735.         !forumPage && wmeSDK.State.getUserInfo().rank >= 5 ? ["<div class='checkbox-container'>", "<input type='checkbox' id='USChampForumSetting' " + (WazeBarSettings.USChampForum ? "checked" : "") + " />", "<label for='USChampForumSetting'>US Champ Forum</label>", "</div>"].join("") : "",
  736.  
  737.         "<div class='checkbox-container'>",
  738.         "<input type='checkbox' id='USWikiForumSetting' " + (WazeBarSettings.USWikiForum ? "checked" : "") + " />",
  739.         "<label for='USWikiForumSetting'>US Wiki Forum</label>",
  740.         "</div>",
  741.  
  742.         "<div class='checkbox-container'>",
  743.         "<input type='checkbox' id='NAServerUpdateSetting' " + (WazeBarSettings.NAServerUpdate ? "checked" : "") + " />",
  744.         "<label for='NAServerUpdateSetting'>NA Server Update</label>",
  745.         "</div>",
  746.  
  747.         "<div class='checkbox-container'>",
  748.         "<input type='checkbox' id='ROWServerUpdateSetting' " + (WazeBarSettings.ROWServerUpdate ? "checked" : "") + " />",
  749.         "<label for='ROWServerUpdateSetting'>ROW Server Update</label>",
  750.         "</div>",
  751.  
  752.         // Start of the Region Dropdown and State check boxes
  753.         BuildRegionDropdown(),
  754.         "<div id='WBStates' style='margin-top: 12px;'></div>",
  755.         "</div>",
  756.         "</div>",
  757.  
  758.         // Start of the 3nd Flex Column
  759.         "<div class='flex-column right-column'>",
  760.         // Custom Links Section
  761.         "<div id='customLinksSection'>",
  762.         "<h4>Custom Links</h4>",
  763.         "<ul id='WazeBarCustomLinksList'></ul>",
  764.         "<div>",
  765.         "<div style='display: flex; flex-direction: column;'>",
  766.         "<input type='text' id='WazeBarCustomURL' placeholder='Enter URL'/>",
  767.         "<input type='text' id='WazeBarCustomText' placeholder='Enter Link Text'/>",
  768.         "<button id='WazeBarAddCustomLink'>Add</button>",
  769.         "</div>",
  770.         "</div>",
  771.         "</div>",
  772.         "</div>",
  773.         "</div>",
  774.  
  775.         // Bottom Div section with WazeBar Forum Link, Save and Cancel buttons
  776.         "<div style='display: flex; justify-content: space-between; margin-top: 8px;'>",
  777.         "<a href='" + location.origin + "/discuss/t/script-wazebar/208863' target='_blank'>Waze Bar Forum Thread</a>",
  778.         "<span>Version: " + SCRIPT_VERSION + "</span>",
  779.         "<div>",
  780.         "<button id='WBSettingsSave'>Save</button>",
  781.         "<button id='WBSettingsCancel'>Cancel</button>",
  782.         "</div>",
  783.         "</div>",
  784.       ].join(" ")
  785.     );
  786.  
  787.     if (forumPage) {
  788.       $("body").append($section);
  789.     } else {
  790.       $("#WazeMap").append($section);
  791.     }
  792.  
  793.     LoadCustomLinks();
  794.     serializeSettings(); // Load the current JSON settings into the Export Text Box
  795.  
  796.     $("#WazeBarAddCustomLink").click(function () {
  797.       if (debug) console.log(`${SCRIPT_NAME}: Add Custom Link clicked`);
  798.       if ($("#WazeBarCustomText").val() !== "" && $("#WazeBarCustomURL").val() !== "") {
  799.         var url = $("#WazeBarCustomURL").val();
  800.         if (!(url.startsWith("http://") || url.startsWith("https://"))) {
  801.           url = "http://" + url;
  802.         }
  803.         WazeBarSettings.CustomLinks.push({
  804.           href: url,
  805.           text: $("#WazeBarCustomText").val(),
  806.         });
  807.         $("#WazeBarCustomURL").val("");
  808.         $("#WazeBarCustomText").val("");
  809.         LoadCustomLinks();
  810.         SaveSettings();
  811.         BuildWazebar();
  812.       }
  813.     });
  814.  
  815.     // Cancel button logic
  816.     $("#WBSettingsCancel").click(function () {
  817.       if (debug) console.log(`${SCRIPT_NAME}: Settings Interface Cancel button clicked`);
  818.  
  819.       LoadSettingsObj();
  820.       LoadSettingsInterface();
  821.       var regionValue = $("#WBRegions").val();
  822.       // Check if #WBRegions has a selected value and call SelectedRegionChanged() accordingly
  823.       if (regionValue !== "" && regionValue !== null) {
  824.         SelectedRegionChanged();
  825.       }
  826.       BuildWazebar();
  827.       injectCss();
  828.       $("#WazeBarSettings").fadeOut();
  829.     });
  830.  
  831.     // Save button logic
  832.     $("#WBSettingsSave").click(function () {
  833.       if (debug) console.log(`${SCRIPT_NAME}: Settings Interface Save button clicked`);
  834.       updateWazeBarSettingsFromUI(); // Step 1: Update settings
  835.       SaveSettings(); // Step 2: Save settings
  836.       serializeSettings(); // Step 3: Serialize settings
  837.       BuildWazebar(); // Step 4: Rebuild the WazeBar
  838.       injectCss(); // Step 5: Inject CSS
  839.       $("#WazeBarSettings").fadeOut(); // Step 6: Hide settings dialog
  840.       $(".WazeBarText").css("font-size", $("#WazeBarFontSize").val() + "px"); // Step 7: Update font size
  841.       setHeightForAppContainer(); // Step 8: Reside the the .app.container for any possable changes in font size of the Wazrbar
  842.     });
  843.  
  844.     $("#WBRegions").change(SelectedRegionChanged);
  845.  
  846.     // Import Settings button logic
  847.     $("#btnWazebarImportSettings").click(function () {
  848.       if (debug) console.log(`${SCRIPT_NAME}: Import Settings button clicked`);
  849.       const inputSettings = $("#txtWazebarImportSettings").val().trim();
  850.  
  851.       if (inputSettings === "") {
  852.         localAlertInfo(SCRIPT_NAME, "Import Settings Input string is empty.");
  853.         return;
  854.       }
  855.  
  856.       if (!isValidJson(inputSettings)) {
  857.         localAlertInfo(SCRIPT_NAME, "Import Settings has Invalid JSON format.");
  858.         return;
  859.       }
  860.  
  861.       try {
  862.         const parsedSettings = JSON.parse(inputSettings);
  863.         if (debug) console.log(`${SCRIPT_NAME}: parsedSettings:`, parsedSettings);
  864.  
  865.         if (typeof parsedSettings === "object" && parsedSettings !== null) {
  866.           WazeBarSettings = { ...defaultSettings, ...parsedSettings };
  867.  
  868.           // Update the UI elements to reflect imported settings
  869.           LoadSettingsInterface();
  870.           SelectedRegionChanged();
  871.           BuildWazebar();
  872.           injectCss();
  873.  
  874.           localAlertInfo(SCRIPT_NAME, "Settings imported successfully and Saved. Please review.");
  875.         } else {
  876.           localAlertInfo(SCRIPT_NAME, "Valid JSON, but the format is not suitable for WazeBar settings.");
  877.         }
  878.       } catch (e) {
  879.         console.error(`${SCRIPT_NAME}: Exception Details:`, e.message);
  880.         console.error(e.stack);
  881.       }
  882.     });
  883.  
  884.     function isValidJson(str) {
  885.       try {
  886.         JSON.parse(str);
  887.       } catch (e) {
  888.         console.error(`${SCRIPT_NAME}: Invalid JSON detected in #btnWazebarImportSettings: `, e.message);
  889.         return false;
  890.       }
  891.       return true;
  892.     }
  893.  
  894.     // Copy Settings button logic
  895.     let clipboardInstance;
  896.     $("#btnWazebarCopySettings").click(function () {
  897.       if (debug) console.log(`${SCRIPT_NAME}: Export/Copy Settings button clicked`);
  898.       updateWazeBarSettingsFromUI(); // Step 1: Update settings
  899.       SaveSettings(); // Step 2: Save settings
  900.       serializeSettings(); // Step 3: Serialize settings
  901.       BuildWazebar(); // Step 4: Rebuild the WazeBar
  902.       injectCss(); // Step 5: Inject CSS
  903.       // Step 6: Instantiate Clipboard
  904.       if (clipboardInstance) {
  905.         clipboardInstance.destroy();
  906.       }
  907.       clipboardInstance = new Clipboard("#btnWazebarCopySettings");
  908.  
  909.       if (debug) console.log(`${SCRIPT_NAME}: Clipboard = `, clipboardInstance);
  910.       //Inform the user that settings are copied
  911.       localAlertInfo(SCRIPT_NAME, "Your settings have been copied to the clipboard.");
  912.     });
  913.  
  914.     $("#WazeBarSettings").hide(); // Ensure the settings dialog is initially hidden
  915.   }
  916.  
  917.   function SelectedRegionChanged() {
  918.     setChecked("RegionWikiSetting", false);
  919.     var selectedItem = $("#WBRegions")[0].options[$("#WBRegions")[0].selectedIndex];
  920.     var region = selectedItem.value;
  921.     var wiki = selectedItem.getAttribute("data-wiki");
  922.  
  923.     if (!WazeBarSettings.header.region) WazeBarSettings.header.region = {};
  924.     if (WazeBarSettings.header.region[region] == null) WazeBarSettings.header.region[region] = {};
  925.     if (WazeBarSettings.header.region[region].wiki && WazeBarSettings.header.region[region].wiki !== "") setChecked("RegionWikiSetting", true);
  926.  
  927.     var wikiCheckboxState = $("#RegionWikiSetting").is(":checked");
  928.     BuildStatesDiv(region, wikiCheckboxState, wiki);
  929.   }
  930.  
  931.   function BuildStatesDiv(region, wikiCheckboxState) {
  932.     // Get the state list for this region
  933.     var selectedItem = $("#WBRegions")[0].options[$("#WBRegions")[0].selectedIndex];
  934.  
  935.     var statesData = selectedItem.getAttribute("data-states") || "";
  936.     var states = statesData.split(",").filter((state) => state.trim() !== "");
  937.  
  938.     if (!statesData) {
  939.       if (debug) console.log(`${SCRIPT_NAME}: No data-states attribute found for selected region:`, selectedItem);
  940.     }
  941.  
  942.     $("#WBStates").empty();
  943.  
  944.     // Create the header row
  945.     var headerHTML = `
  946.         <div class="state-header">
  947.             <div class="state-column">Name</div>
  948.             <div class="checkbox-column">Forum</div>
  949.             <div class="checkbox-column">Wiki</div>
  950.             <div class="checkbox-column">Unlock</div>
  951.         </div>
  952.     `;
  953.  
  954.     // Include the selected region as the first row, only with the Wiki checkbox
  955.     var regionHTML = `
  956.         <div class="state-row">
  957.             <div class="state-column">${region}</div>
  958.             <div class="checkbox-column">-</div> <!-- No Forum checkbox for region -->
  959.             <div class="checkbox-column"><input type='checkbox' id='RegionWikiSetting' ${wikiCheckboxState ? "checked" : ""} /></div>
  960.             <div class="checkbox-column">-</div> <!-- No Unlock checkbox for region -->
  961.         </div>
  962.     `;
  963.  
  964.     // Create the state rows with all checkboxes
  965.     var statesHTML = states
  966.       .map(function (state) {
  967.         var stateId = state.replace(" ", "_");
  968.         return `
  969.                 <div class="state-row">
  970.                     <div class="state-column">${state}</div>
  971.                     <div class="checkbox-column"><input type='checkbox' id='${stateId}ForumSetting' /></div>
  972.                     <div class="checkbox-column"><input type='checkbox' id='${stateId}WikiSetting' /></div>
  973.                     <div class="checkbox-column"><input type='checkbox' id='${stateId}UnlockSetting' /></div>
  974.                 </div>
  975.             `;
  976.       })
  977.       .join("");
  978.  
  979.     // Append the header and region (incl. check state) and states rows to the container
  980.     $("#WBStates").append(headerHTML + regionHTML + statesHTML);
  981.  
  982.     $("#RegionWikiSetting").change(function () {
  983.       var selectedItem = $("#WBRegions")[0].options[$("#WBRegions")[0].selectedIndex];
  984.       var region = selectedItem.value;
  985.       var wiki = selectedItem.getAttribute("data-wiki");
  986.       var abbr = selectedItem.getAttribute("data-abbr");
  987.  
  988.       if (!WazeBarSettings.header.region) WazeBarSettings.header.region = {};
  989.       if (WazeBarSettings.header.region[region] == null) WazeBarSettings.header.region[region] = {};
  990.       if (this.checked) {
  991.         WazeBarSettings.header.region[region].wiki = wiki;
  992.         WazeBarSettings.header.region[region].abbr = abbr;
  993.       } else {
  994.         delete WazeBarSettings.header.region[region].wiki;
  995.       }
  996.     });
  997.  
  998.     // Checking previously saved settings (if any) and setting checkboxes accordingly
  999.     states.forEach(function (state) {
  1000.       var stateKey = state.replace(" ", "_");
  1001.  
  1002.       if (WazeBarSettings.header[state]) {
  1003.         if (WazeBarSettings.header[state].forum && WazeBarSettings.header[state].forum !== "") {
  1004.           setChecked(`${stateKey}ForumSetting`, true);
  1005.         }
  1006.         if (WazeBarSettings.header[state].wiki && WazeBarSettings.header[state].wiki !== "") {
  1007.           setChecked(`${stateKey}WikiSetting`, true);
  1008.         }
  1009.         if (WazeBarSettings.header[state].unlock && WazeBarSettings.header[state].unlock !== "") {
  1010.           setChecked(`${stateKey}UnlockSetting`, true);
  1011.         }
  1012.       }
  1013.  
  1014.       $(`#${stateKey}ForumSetting`).change(function () {
  1015.         var stateName = this.id.replace("ForumSetting", "").replace("_", " ");
  1016.         if (!WazeBarSettings.header[stateName]) WazeBarSettings.header[stateName] = {};
  1017.         if (this.checked) {
  1018.           WazeBarSettings.header[stateName].forum = States[stateName].forum;
  1019.           WazeBarSettings.header[stateName].abbr = States[stateName].abbr;
  1020.         } else {
  1021.           delete WazeBarSettings.header[stateName].forum;
  1022.         }
  1023.         SaveSettings();
  1024.       });
  1025.  
  1026.       $(`#${stateKey}WikiSetting`).change(function () {
  1027.         var stateName = this.id.replace("WikiSetting", "").replace("_", " ");
  1028.         if (!WazeBarSettings.header[stateName]) WazeBarSettings.header[stateName] = {};
  1029.         if (this.checked) {
  1030.           WazeBarSettings.header[stateName].wiki = States[stateName].wiki;
  1031.           WazeBarSettings.header[stateName].abbr = States[stateName].abbr;
  1032.         } else {
  1033.           delete WazeBarSettings.header[stateName].wiki;
  1034.         }
  1035.         SaveSettings();
  1036.       });
  1037.  
  1038.       $(`#${stateKey}UnlockSetting`).change(function () {
  1039.         var stateName = this.id.replace("UnlockSetting", "").replace("_", " ");
  1040.         if (!WazeBarSettings.header[stateName]) WazeBarSettings.header[stateName] = {};
  1041.         if (this.checked) {
  1042.           WazeBarSettings.header[stateName].unlock = "https://www.waze.com/discuss/search?q=" + encodeURIComponent(stateName) + "%20%23united-states%3Aus-unlock-and-update-requests%20order%3Alatest";
  1043.           WazeBarSettings.header[stateName].abbr = States[stateName].abbr;
  1044.         } else {
  1045.           delete WazeBarSettings.header[stateName].unlock;
  1046.         }
  1047.         SaveSettings();
  1048.       });
  1049.     });
  1050.   }
  1051.  
  1052.   function BuildRegionDropdown() {
  1053.     var $places = $("<div>");
  1054.     $places.html(
  1055.       [
  1056.         '<select id="WBRegions" class="styled-select">',
  1057.         '<option value="" selected disabled>Select Region</option>', // Default placeholder option
  1058.         '<option value="Northwest" data-abbr="NWR" data-states="Alaska,Idaho,Montana,Washington,Oregon,Wyoming" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Northwest">Northwest</option>',
  1059.         '<option value="Southwest" data-abbr="SWR" data-states="Arizona,California,Colorado,Hawaii,Nevada,New Mexico,Utah" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Southwest">Southwest</option>',
  1060.         '<option value="Plains" data-abbr="PLN" data-states="Iowa,Kansas,Minnesota,Missouri,Nebraska,North Dakota,South Dakota" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Plains">Plains</option>',
  1061.         '<option value="South Central" data-abbr="SCR" data-states="Arkansas,Louisiana,Mississippi,Oklahoma,Texas" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/South_Central">South Central</option>',
  1062.         '<option value="Great Lakes" data-abbr="GLR" data-states="Illinois,Indiana,Michigan,Ohio,Wisconsin" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Great_Lakes">Great Lakes</option>',
  1063.         '<option value="South Atlantic" data-abbr="SAT" data-states="Kentucky,North Carolina,South Carolina,Tennessee" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/South_Atlantic">South Atlantic</option>',
  1064.         '<option value="Southeast" data-abbr="SER" data-states="Alabama,Florida,Georgia" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Southeast">Southeast</option>',
  1065.         '<option value="New England" data-abbr="NER" data-states="Connecticut,Maine,Massachusetts,New Hampshire,Rhode Island,Vermont" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/New_England">New England</option>',
  1066.         '<option value="Northeast" data-abbr="NOR" data-states="Delaware,New Jersey,New York,Pennsylvania" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Northeast">Northeast</option>',
  1067.         '<option value="Mid Atlantic" data-abbr="MAR" data-states="District of Columbia,Maryland,Virginia,West Virginia" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Mid_Atlantic">Mid Atlantic</option>',
  1068.         '<option value="Territories" data-abbr="ATR" data-states="Puerto Rico,US Virgin Islands,South Pacific Territories" data-forum="" data-wiki="https://www.waze.com/wiki/USA/USA/Territories">Territories</option>',
  1069.         "</select>",
  1070.       ].join(" ")
  1071.     );
  1072.     return $places.html();
  1073.   }
  1074.  
  1075.   function LoadStatesObj() {
  1076.     if (debug) console.log(`${SCRIPT_NAME}: LoadStatesObj() called`);
  1077.     States.Alabama = {
  1078.       forum: "https://www.waze.com/discuss/c/editors/united-states/alabama/4839",
  1079.       wiki: "https://www.waze.com/wiki/USA/Southeast",
  1080.       abbr: "AL",
  1081.     };
  1082.     States.Alaska = {
  1083.       forum: "https://www.waze.com/discuss/c/editors/united-states/alaska/4840",
  1084.       wiki: "https://www.waze.com/wiki/USA/Alaska",
  1085.       abbr: "AK",
  1086.     };
  1087.     States.Arizona = {
  1088.       forum: "https://www.waze.com/discuss/c/editors/united-states/arizona/4841",
  1089.       wiki: "https://www.waze.com/wiki/USA/Arizona",
  1090.       abbr: "AZ",
  1091.     };
  1092.     States.Arkansas = {
  1093.       forum: "https://www.waze.com/discuss/c/editors/united-states/arkansas/4842",
  1094.       wiki: "https://www.waze.com/wiki/USA/Arkansas",
  1095.       abbr: "AR",
  1096.     };
  1097.     States.California = {
  1098.       forum: "https://www.waze.com/discuss/c/editors/united-states/california/4843",
  1099.       wiki: "https://www.waze.com/wiki/USA/California",
  1100.       abbr: "CA",
  1101.     };
  1102.     States.Colorado = {
  1103.       forum: "https://www.waze.com/discuss/c/editors/united-states/colorado/4844",
  1104.       wiki: "https://www.waze.com/wiki/USA/Colorado",
  1105.       abbr: "CO",
  1106.     };
  1107.     States.Connecticut = {
  1108.       forum: "https://www.waze.com/discuss/c/editors/united-states/connecticut/4845",
  1109.       wiki: "https://www.waze.com/wiki/USA/Connecticut",
  1110.       abbr: "CT",
  1111.     };
  1112.     States.Delaware = {
  1113.       forum: "https://www.waze.com/discuss/c/editors/united-states/delaware/4846",
  1114.       wiki: "https://www.waze.com/wiki/USA/Delaware",
  1115.       abbr: "DE",
  1116.     };
  1117.     States["District of Columbia"] = {
  1118.       forum: "https://www.waze.com/discuss/c/editors/united-states/district-of-columbia/4847",
  1119.       wiki: "https://www.waze.com/wiki/USA/District_of_Columbia",
  1120.       abbr: "DC",
  1121.     };
  1122.     States.Florida = {
  1123.       forum: "https://www.waze.com/discuss/c/editors/united-states/florida/4848",
  1124.       wiki: "https://www.waze.com/wiki/USA/Southeast",
  1125.       abbr: "FL",
  1126.     };
  1127.     States.Georgia = {
  1128.       forum: "https://www.waze.com/discuss/c/editors/united-states/georgia/4849",
  1129.       wiki: "https://www.waze.com/wiki/USA/Southeast",
  1130.       abbr: "GA",
  1131.     };
  1132.     States.Hawaii = {
  1133.       forum: "https://www.waze.com/discuss/c/editors/united-states/hawaii/4850",
  1134.       wiki: "https://www.waze.com/wiki/USA/Hawaii",
  1135.       abbr: "HI",
  1136.     };
  1137.     States.Idaho = {
  1138.       forum: "https://www.waze.com/discuss/c/editors/united-states/idaho/4851",
  1139.       wiki: "https://www.waze.com/wiki/USA/Idaho",
  1140.       abbr: "ID",
  1141.     };
  1142.     States.Illinois = {
  1143.       forum: "https://www.waze.com/discuss/c/editors/united-states/illinois/4852",
  1144.       wiki: "https://www.waze.com/wiki/USA/Illinois",
  1145.       abbr: "IL",
  1146.     };
  1147.     States.Indiana = {
  1148.       forum: "https://www.waze.com/discuss/c/editors/united-states/indiana/4853",
  1149.       wiki: "https://www.waze.com/wiki/USA/Indiana",
  1150.       abbr: "IN",
  1151.     };
  1152.     States.Iowa = {
  1153.       forum: "https://www.waze.com/discuss/c/editors/united-states/iowa/4854",
  1154.       wiki: "https://www.waze.com/wiki/USA/Iowa",
  1155.       abbr: "IA",
  1156.     };
  1157.     States.Kansas = {
  1158.       forum: "https://www.waze.com/discuss/c/editors/united-states/kansas/4855",
  1159.       wiki: "https://www.waze.com/wiki/USA/Kansas",
  1160.       abbr: "KS",
  1161.     };
  1162.     States.Kentucky = {
  1163.       forum: "https://www.waze.com/discuss/c/editors/united-states/kentucky/4856",
  1164.       wiki: "https://www.waze.com/wiki/USA/Kentucky",
  1165.       abbr: "KY",
  1166.     };
  1167.     States.Louisiana = {
  1168.       forum: "https://www.waze.com/discuss/c/editors/united-states/louisiana/4857",
  1169.       wiki: "https://www.waze.com/wiki/USA/Louisiana",
  1170.       abbr: "LA",
  1171.     };
  1172.     States.Maine = {
  1173.       forum: "https://www.waze.com/discuss/c/editors/united-states/maine/4858",
  1174.       wiki: "https://www.waze.com/wiki/USA/Maine",
  1175.       abbr: "ME",
  1176.     };
  1177.     States.Maryland = {
  1178.       forum: "https://www.waze.com/discuss/c/editors/united-states/maryland/4859",
  1179.       wiki: "https://www.waze.com/wiki/USA/Maryland",
  1180.       abbr: "MD",
  1181.     };
  1182.     States.Massachusetts = {
  1183.       forum: "https://www.waze.com/discuss/c/editors/united-states/massachusetts/4860",
  1184.       wiki: "https://www.waze.com/wiki/USA/Massachusetts",
  1185.       abbr: "MA",
  1186.     };
  1187.     States.Michigan = {
  1188.       forum: "https://www.waze.com/discuss/c/editors/united-states/michigan/4861",
  1189.       wiki: "https://www.waze.com/wiki/USA/Michigan",
  1190.       abbr: "MI",
  1191.     };
  1192.     States.Minnesota = {
  1193.       forum: "https://www.waze.com/discuss/c/editors/united-states/minnesota/4862",
  1194.       wiki: "https://www.waze.com/wiki/USA/Minnesota",
  1195.       abbr: "MN",
  1196.     };
  1197.     States.Mississippi = {
  1198.       forum: "https://www.waze.com/discuss/c/editors/united-states/mississippi/4863",
  1199.       wiki: "https://www.waze.com/wiki/USA/Mississippi",
  1200.       abbr: "MS",
  1201.     };
  1202.     States.Missouri = {
  1203.       forum: "https://www.waze.com/discuss/c/editors/united-states/missouri/4864",
  1204.       wiki: "https://www.waze.com/wiki/USA/Missouri",
  1205.       abbr: "MO",
  1206.     };
  1207.     States.Montana = {
  1208.       forum: "https://www.waze.com/discuss/c/editors/united-states/montana/4865",
  1209.       wiki: "https://www.waze.com/wiki/USA/Montana",
  1210.       abbr: "MT",
  1211.     };
  1212.     States.Nebraska = {
  1213.       forum: "https://www.waze.com/discuss/c/editors/united-states/nebraska/4866",
  1214.       wiki: "https://www.waze.com/wiki/USA/Nebraska",
  1215.       abbr: "NE",
  1216.     };
  1217.     States.Nevada = {
  1218.       forum: "https://www.waze.com/discuss/c/editors/united-states/nevada/4867",
  1219.       wiki: "https://www.waze.com/wiki/USA/Nevada",
  1220.       abbr: "NV",
  1221.     };
  1222.     States["New Hampshire"] = {
  1223.       forum: "https://www.waze.com/discuss/c/editors/united-states/New-Hampshire/4868",
  1224.       wiki: "https://www.waze.com/wiki/USA/New_Hampshire",
  1225.       abbr: "NH",
  1226.     };
  1227.     States["New Jersey"] = {
  1228.       forum: "https://www.waze.com/discuss/c/editors/united-states/new-jersey/4869",
  1229.       wiki: "https://www.waze.com/wiki/USA/New_Jersey",
  1230.       abbr: "NJ",
  1231.     };
  1232.     States["New Mexico"] = {
  1233.       forum: "https://www.waze.com/discuss/c/editors/united-states/new-mexico/4870",
  1234.       wiki: "https://www.waze.com/wiki/USA/New_Mexico",
  1235.       abbr: "NM",
  1236.     };
  1237.     States["New York"] = {
  1238.       forum: "https://www.waze.com/discuss/c/editors/united-states/new-york/4871",
  1239.       wiki: "hhttps://www.waze.com/wiki/USA/New_York",
  1240.       abbr: "NY",
  1241.     };
  1242.     States["North Carolina"] = {
  1243.       forum: "https://www.waze.com/discuss/c/editors/united-states/north-carolina/4872",
  1244.       wiki: "https://www.waze.com/wiki/USA/North_Carolina",
  1245.       abbr: "NC",
  1246.     };
  1247.     States["North Dakota"] = {
  1248.       forum: "https://www.waze.com/discuss/c/editors/united-states/north-dakota/4873",
  1249.       wiki: "https://www.waze.com/wiki/USA/North_Dakota",
  1250.       abbr: "ND",
  1251.     };
  1252.     States.Ohio = {
  1253.       forum: "https://www.waze.com/discuss/c/editors/united-states/ohio/4874",
  1254.       wiki: "https://www.waze.com/wiki/USA/Ohio",
  1255.       abbr: "OH",
  1256.     };
  1257.     States.Oklahoma = {
  1258.       forum: "https://www.waze.com/discuss/c/editors/united-states/oklahoma/4875",
  1259.       wiki: "hhttps://www.waze.com/wiki/USA/Oklahoma",
  1260.       abbr: "OK",
  1261.     };
  1262.     States.Oregon = {
  1263.       forum: "https://www.waze.com/discuss/c/editors/united-states/oregon/4876",
  1264.       wiki: "https://www.waze.com/wiki/USA/Oregon",
  1265.       abbr: "OR",
  1266.     };
  1267.     States.Pennsylvania = {
  1268.       forum: "https://www.waze.com/discuss/c/editors/united-states/pennsylvania/4877",
  1269.       wiki: "https://www.waze.com/wiki/USA/Pennsylvania",
  1270.       abbr: "PA",
  1271.     };
  1272.     States["Rhode Island"] = {
  1273.       forum: "https://www.waze.com/discuss/c/editors/united-states/rhode-island/4880",
  1274.       wiki: "https://www.waze.com/wiki/USA/Rhode_Island",
  1275.       abbr: "RI",
  1276.     };
  1277.     States["South Carolina"] = {
  1278.       forum: "https://www.waze.com/discuss/c/editors/united-states/south-carolina/4881",
  1279.       wiki: "https://www.waze.com/wiki/USA/South_Carolina",
  1280.       abbr: "SC",
  1281.     };
  1282.     States["South Dakota"] = {
  1283.       forum: "https://www.waze.com/discuss/c/editors/united-states/south-dakota/4882",
  1284.       wiki: "https://www.waze.com/wiki/USA/South_Dakota",
  1285.       abbr: "SD",
  1286.     };
  1287.     States.Tennessee = {
  1288.       forum: "https://www.waze.com/discuss/c/editors/united-states/tennessee/4884",
  1289.       wiki: "hhttps://www.waze.com/wiki/USA/Tennessee",
  1290.       abbr: "TN",
  1291.     };
  1292.     States.Texas = {
  1293.       forum: "https://www.waze.com/discuss/c/editors/united-states/texas/4885",
  1294.       wiki: "https://www.waze.com/wiki/USA/Texas",
  1295.       abbr: "TX",
  1296.     };
  1297.     States.Utah = {
  1298.       forum: "https://www.waze.com/discuss/c/editors/united-states/utah/4895",
  1299.       wiki: "https://www.waze.com/wiki/USA/Utah",
  1300.       abbr: "UT",
  1301.     };
  1302.     States.Vermont = {
  1303.       forum: "https://www.waze.com/discuss/c/editors/united-states/vermont/4896",
  1304.       wiki: "https://www.waze.com/wiki/USA/Vermont",
  1305.       abbr: "VT",
  1306.     };
  1307.     States.Virginia = {
  1308.       forum: "https://www.waze.com/discuss/c/editors/united-states/virginia/4897",
  1309.       wiki: "https://www.waze.com/wiki/USA/Virginia",
  1310.       abbr: "VA",
  1311.     };
  1312.     States.Washington = {
  1313.       forum: "https://www.waze.com/discuss/c/editors/united-states/washington/4898",
  1314.       wiki: "hhttps://www.waze.com/wiki/USA/Washington",
  1315.       abbr: "WA",
  1316.     };
  1317.     States["West Virginia"] = {
  1318.       forum: "https://www.waze.com/discuss/c/editors/united-states/west-virginia/4899",
  1319.       wiki: "https://www.waze.com/wiki/USA/West_Virginia",
  1320.       abbr: "WV",
  1321.     };
  1322.     States.Wisconsin = {
  1323.       forum: "https://www.waze.com/discuss/c/editors/united-states/wisconsin/4900",
  1324.       wiki: "https://www.waze.com/wiki/USA/Wisconsin",
  1325.       abbr: "WI",
  1326.     };
  1327.     States.Wyoming = {
  1328.       forum: "https://www.waze.com/discuss/c/editors/united-states/wyoming/4901",
  1329.       wiki: "https://www.waze.com/wiki/USA/Wyoming",
  1330.       abbr: "WY",
  1331.     };
  1332.     States["Puerto Rico"] = {
  1333.       forum: "https://www.waze.com/discuss/c/editors/united-states/puerto-rico/4879",
  1334.       wiki: "https://www.waze.com/wiki/USA/Puerto_Rico",
  1335.       abbr: "PR",
  1336.     };
  1337.     States["US Virgin Islands"] = {
  1338.       forum: "https://www.waze.com/discuss/c/editors/united-states/us-virgin-islands/4892",
  1339.       wiki: "https://www.waze.com/wiki/USA/Virgin_Islands",
  1340.       abbr: "",
  1341.     };
  1342.     States["South Pacific Territories"] = {
  1343.       forum: "https://www.waze.com/discuss/c/editors/united-states/south-pacific-territories/4883",
  1344.       wiki: "",
  1345.       abbr: "",
  1346.     };
  1347.   }
  1348.  
  1349.   function injectCss() {
  1350.     if (debug) console.log(`${SCRIPT_NAME}: injectCss() called`);
  1351.     var css = [
  1352.       // General text styling for WazeBar elements
  1353.       ".WazeBarText { display: inline; padding-right: 4px; margin-left: 4px; border-right: thin solid grey; font-size: " + WazeBarSettings.BarFontSize + "px; color: #555555;}",
  1354.       // WazeBar Forum / Wiki / Current State Forum & Wiki links styling
  1355.       ".WazeBarText.WazeBarWikiItem a { color: " + WazeBarSettings.WikiFontColor + "; }",
  1356.       ".WazeBarText.WazeBarForumItem a { color: " + WazeBarSettings.ForumFontColor + "; }",
  1357.       ".WazeBarText.WazeBarCurrState a { color: #FF0000; }",
  1358.       ".WazeBarText.WazeBarServerUpdate {}",
  1359.       ".WazeBarIcon { display: inline; margin-left: 8px; cursor: pointer; font-size: " + WazeBarSettings.BarFontSize + "px; color: #555555;}",
  1360.  
  1361.       // WazeBar styling
  1362.       // WazeBar Favorites dropdown styling
  1363.       "#WazeBarFavorites { max-height: 500px; z-index: 100; overflow: auto; display: none; position: absolute; background-color: #f9f9f9; min-width: 200px;  margin-top: -2px; padding: 10px; }",
  1364.       "#WazeBarFavoritesList { list-style: none; padding: 0; margin: 0; }",
  1365.       ".favorite-item { position: relative; padding: 4px 4px; margin: 4px 0; background: #f1f1f1; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }",
  1366.       ".favorite-item a { flex-grow: 1; text-decoration: none; color: #555555; }",
  1367.       ".favorite-item a:visited { color: #555555; }",
  1368.       ".favorite-item i { cursor: pointer; color: #c00; }",
  1369.       ".favorite-item:hover { background: #33CCFF; }",
  1370.       "#WazeBarFavoritesAddContainer { display: flex; flex-direction: column; margin-top: 10px; gap: 8px; }",
  1371.       "#WazeBarFavoritesAddContainer input { height: 25px; border: 1px solid #000000; padding: 4px; border-radius: 6px; background-color: white}",
  1372.       "#WazeBarAddFavorite { padding: 8px 8px; font-size: 1rem; background-color: #8BC34A; color: white; border: 2px solid #8BC34A; border-radius: 25px; cursor: pointer; box-sizing: border-box; transition: background-color 0.3s ease, border-color 0.3s ease; }",
  1373.       "#WazeBarAddFavorite:hover { background-color: #689F38; border-color: #689F38; }",
  1374.  
  1375.       // Unread messages popup delay styling
  1376.       ".WazeBarUnread { max-height: 500px; z-index: 100; overflow: auto; display: flex; position: absolute; background-color: #f9f9f9; min-width: 200px; margin-top: -2px; padding: 8px; }",
  1377.       ".WazeBarUnreadList {   list-style: none; padding: 0; margin: 0; }",
  1378.       ".WazeBarUnreadList.unread-item { position: relative; padding: 4px 4px; margin: 4px 0; background: #f1f1f1; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }",
  1379.       ".WazeBarUnreadList.unread-item a { flex-grow: 1; text-decoration: none; color: #333; font-weight: normal;}",
  1380.       ".WazeBarUnreadList.unread-item i { cursor: pointer; color: #c00; }",
  1381.       ".WazeBarUnreadList.unread-item:hover { background: #33CCFF; }",
  1382.  
  1383.       // Main Setting Menu diolog
  1384.       "#WazeBarSettings { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 3px solid #000; border-radius: 5%; padding: 12px; overflow: visible; color: #000000;}",
  1385.       "#WazeBarSettings input[type='number'], #WazeBarSettings input[type='text'], #WazeBarSettings textarea { border: 1px solid #000; padding: 5px; border-radius: 6px; margin-bottom: 0px; background-color: white; color: #000000; }",
  1386.       "#WazeBarSettings button { padding: 8px 12px; border: none; border-radius: 25px; cursor: pointer; }",
  1387.       "#WazeBarSettings button#WBSettingsSave { background-color: #007bff; color: #fff; }",
  1388.       "#WazeBarSettings button#WBSettingsSave:hover { background-color: #0056b3; }",
  1389.       "#WazeBarSettings button#WBSettingsCancel { background-color: #6c757d; color: #fff; }",
  1390.       "#WazeBarSettings button#WBSettingsCancel:hover { background-color: #5a6268; }",
  1391.       "#WazeBarSettings h4 { margin-top: 4px; margin-bottom: 4px; font-size: 14px; line-height: 1.2; text-align: center; }",
  1392.       "#WazeBarSettings #customLinksSection { margin-top: 5px; }",
  1393.       "#WazeBarSettings #customLinksSection div { margin-bottom: 0; }",
  1394.       "#WazeBarSettings label { color: #000000; }",
  1395.       // Inline element alignment for the settings inputs
  1396.       "#WazeBarSettings .flex-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }",
  1397.  
  1398.       // Flex container holds the flex columns on the Main Setting Menu diolog
  1399.       ".flex-container { display: flex; align-items: flex-start; width: 100%; gap: 8px; box-sizing: border-box;}",
  1400.       ".flex-column { padding: 8px; position: relative; box-sizing: border-box; border: 1px solid #ccc; background-color: #f9f9f9; min-width: 200px;  max-width: 250px; flex: 1 1 auto; min-height: 550px; border-radius: 1%;}",
  1401.       ".left-column::after { content: ''; position: absolute; top: 0; right: 0; width: 0px; height: 100%; background-color: #ccc; }",
  1402.       ".right-column::before { content: ''; position: absolute; top: 0; left: 0; width: 0px; height: 100%; background-color: #ccc; }",
  1403.  
  1404.       // Color Picker styling for Forumn and Wiki links
  1405.       "#colorPickerForumFont, #colorPickerWikiFont {height: 35px; border: 1px solid #000000; padding: 3px; border-radius: 6px; background-color: white; color: #000000; }",
  1406.  
  1407.       // State rows styling
  1408.       ".state-row { display: flex; align-items: center; }",
  1409.       ".state-row div { padding: 4px 4px; }",
  1410.       ".checkbox-column { display: flex; justify-content: center; align-items: center; }",
  1411.       // State Table header styling
  1412.       ".state-header { display: flex; align-items: center; background: #f1f1f1; font-weight: bold; }",
  1413.       ".state-header div { padding: 6px; }",
  1414.       // State Flex-box for the table
  1415.       ".state-column { flex: 3; }",
  1416.       ".checkbox-column { flex: 1; }",
  1417.  
  1418.       // Horizontal rule styling
  1419.       "hr { border: none; border-top: 1px solid #ccc; margin: 10px 0 0 0; width: calc(100% - 16px); }",
  1420.  
  1421.       // Additional styles for Custom Links section inputs to match Favorites section inputs
  1422.       "#WazeBarCustomURL, #WazeBarCustomText, #WazeBarAddCustomLink { box-sizing: border-box; width: 100%; margin: 5px; }",
  1423.       "#WazeBarCustomURL, #WazeBarCustomText { height: 25px; border: 1px solid #000000; padding: 8px; border-radius: 6px; margin-bottom: 3px; }",
  1424.       "#WazeBarAddCustomLink { padding: 8px 0; font-size: 1rem; background-color: #8BC34A; color: white; border: 2px solid #8BC34A; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; }",
  1425.       "#WazeBarAddCustomLink:hover { background-color: #689F38; border-color: #689F38; }",
  1426.  
  1427.       // Custom List link styling
  1428.       "#WazeBarCustomLinksList { list-style: none; padding: 0; margin: 0;  }",
  1429.       ".custom-item { position: relative; padding: 4px; margin: 4px 0;  background: #f1f1f1; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; width: 100%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: background 0.3s ease, transform 0.3s ease; border: 1px solid #ddd; }",
  1430.       ".custom-item a { flex-grow: 1; text-decoration: none; color: #555555; }",
  1431.       ".custom-item a:visited { color: #555555; }",
  1432.       ".custom-item i { cursor: pointer; color: #f56a6a;  }",
  1433.       ".custom-item:hover { background: #33CCFF;  }",
  1434.       ".custom-item i:hover { }",
  1435.  
  1436.       // Export/Import Section Styling
  1437.       ".flex-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }",
  1438.       ".export-button, .import-button { font-size: 1.5rem; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; }",
  1439.       ".export-button:hover, .import-button:hover { background-color: #0056b3; transform: scale(1.05); }",
  1440.       "#txtWazebarSettings, #txtWazebarImportSettings { width: 100%; height: auto; min-height: 120px; max-height: 500px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; box-sizing: border-box; resize: vertical; }",
  1441.  
  1442.       // Ensure textareas align properly in flex container
  1443.       ".flex-row textarea { flex-grow: 0; }",
  1444.  
  1445.       // Adjust Export and Import button font sizes for better alignment
  1446.       ".fa-upload, .fa-download { font-size: 1.2rem; padding: 10px; }",
  1447.  
  1448.       // styling for checkbox containers to align labels and checkboxes
  1449.       ".checkbox-container { display: flex; align-items: center; margin-bottom: 4px; }",
  1450.       ".checkbox-container input[type='checkbox'] { margin-right: 8px; }",
  1451.  
  1452.       // Custom styling for the region dropdown
  1453.       ".styled-select { width: 220px; font-size: 14px; line-height: 0.5; height: 30px; padding: 1px; border: 1px solid #ccc; border-radius: 6px; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); color: #000000;}",
  1454.       ".styled-select:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); outline: none; }",
  1455.     ].join(" ");
  1456.  
  1457.     // Remove the previous styles if they exist
  1458.     $("#WazeBarStyles").remove();
  1459.  
  1460.     // Append the new styles
  1461.     $('<style type="text/css" id="WazeBarStyles">' + css + "</style>").appendTo("head");
  1462.   }
  1463.  
  1464.   // Call the function to inject the CSS
  1465.   injectCss();
  1466.  
  1467.   function isChecked(checkboxId) {
  1468.     return $("#" + checkboxId).is(":checked");
  1469.   }
  1470.  
  1471.   function setChecked(checkboxId, checked) {
  1472.     $("#" + checkboxId).prop("checked", checked);
  1473.   }
  1474.  
  1475.   const defaultSettings = {
  1476.     forumInterval: 2,
  1477.     forumHistory: 7,
  1478.     scriptsForum: false,
  1479.     header: { region: {} },
  1480.     USSMForum: false,
  1481.     USChampForum: false,
  1482.     USWikiForum: false,
  1483.     NAServerUpdate: true,
  1484.     WMEBetaForum: false,
  1485.     DisplayWazeForum: false,
  1486.     Favorites: [
  1487.       {
  1488.         href: "https://www.waze.com/wiki/USA/Waze_Map_Editor/Welcome",
  1489.         text: "Map Editor Welcome",
  1490.       },
  1491.       {
  1492.         href: "https://www.waze.com/wiki/USA/Waze_etiquette",
  1493.         text: "Etiquette",
  1494.       },
  1495.       {
  1496.         href: "https://www.waze.com/wiki/USA/Glossary",
  1497.         text: "Glossary",
  1498.       },
  1499.     ],
  1500.     ForumFontColor: "#1E90FF",
  1501.     WikiFontColor: "#32CD32",
  1502.     BarFontSize: 13,
  1503.     CustomLinks: [],
  1504.     ROWServerUpdate: false,
  1505.   };
  1506.  
  1507.   function LoadSettingsObj() {
  1508.     if (debug) console.log(`${SCRIPT_NAME}: LoadSettingsObj() called:`);
  1509.  
  1510.     let loadedSettings;
  1511.     try {
  1512.       loadedSettings = JSON.parse(localStorage.getItem("Wazebar_Settings"));
  1513.     } catch (err) {
  1514.       loadedSettings = null;
  1515.     }
  1516.  
  1517.     WazeBarSettings = loadedSettings ? loadedSettings : { ...defaultSettings };
  1518.  
  1519.     for (const prop in defaultSettings) {
  1520.       if (!WazeBarSettings.hasOwnProperty(prop)) WazeBarSettings[prop] = defaultSettings[prop];
  1521.     }
  1522.   }
  1523.  
  1524.   function serializeSettings() {
  1525.     SaveSettings(); // Save current settings to localStorage
  1526.     const settings = JSON.parse(localStorage.getItem("Wazebar_Settings")) || {};
  1527.     const serialized = JSON.stringify(settings, null, 2); // Pretty print JSON with 2 spaces indentation
  1528.     // Update #txtWazebarSettings with the serialized settings
  1529.     $("#txtWazebarSettings").text(serialized);
  1530.     return serialized;
  1531.   }
  1532.   // Function to update WazeBarSettings from the UI elements
  1533.   function updateWazeBarSettingsFromUI() {
  1534.     WazeBarSettings.DisplayWazeForum = isChecked("WazeForumSetting");
  1535.     WazeBarSettings.WMEBetaForum = isChecked("WMEBetaForumSetting");
  1536.     WazeBarSettings.scriptsForum = isChecked("ScriptsForum");
  1537.     WazeBarSettings.USSMForum = isChecked("USSMForumSetting");
  1538.     if (!forumPage) {
  1539.       WazeBarSettings.USChampForum = isChecked("USChampForumSetting");
  1540.     }
  1541.     WazeBarSettings.USWikiForum = isChecked("USWikiForumSetting");
  1542.     WazeBarSettings.ForumFontColor = $("#colorPickerForumFont").val();
  1543.     WazeBarSettings.WikiFontColor = $("#colorPickerWikiFont").val();
  1544.     WazeBarSettings.forumInterval = $("#forumInterval").val();
  1545.     WazeBarSettings.forumHistory = $("#forumHistory").val();
  1546.     WazeBarSettings.NAServerUpdate = isChecked("NAServerUpdateSetting");
  1547.     WazeBarSettings.ROWServerUpdate = isChecked("ROWServerUpdateSetting");
  1548.     WazeBarSettings.BarFontSize = $("#WazeBarFontSize").val();
  1549.     if (WazeBarSettings.BarFontSize < 8) {
  1550.       WazeBarSettings.BarFontSize = 8;
  1551.       $("#WazeBarFontSize").val(8);
  1552.     }
  1553.   }
  1554.  
  1555.   function SaveSettings() {
  1556.     if (debug) console.log(`${SCRIPT_NAME}: SaveSettings() called:`);
  1557.     if (localStorage) {
  1558.       var localsettings = {
  1559.         BarFontSize: WazeBarSettings.BarFontSize,
  1560.         ForumFontColor: WazeBarSettings.ForumFontColor,
  1561.         WikiFontColor: WazeBarSettings.WikiFontColor,
  1562.         forumInterval: WazeBarSettings.forumInterval,
  1563.         forumHistory: WazeBarSettings.forumHistory,
  1564.         DisplayWazeForum: WazeBarSettings.DisplayWazeForum,
  1565.         WMEBetaForum: WazeBarSettings.WMEBetaForum,
  1566.         scriptsForum: WazeBarSettings.scriptsForum,
  1567.         header: WazeBarSettings.header,
  1568.         USChampForum: WazeBarSettings.USChampForum,
  1569.         USSMForum: WazeBarSettings.USSMForum,
  1570.         USWikiForum: WazeBarSettings.USWikiForum,
  1571.         NAServerUpdate: WazeBarSettings.NAServerUpdate,
  1572.         ROWServerUpdate: WazeBarSettings.ROWServerUpdate,
  1573.         Favorites: WazeBarSettings.Favorites,
  1574.         CustomLinks: WazeBarSettings.CustomLinks,
  1575.       };
  1576.       localStorage.setItem("Wazebar_Settings", JSON.stringify(localsettings));
  1577.     }
  1578.   }
  1579.  
  1580.   function localAlertInfo(scriptName, message, disableTimeout = false) {
  1581.     // Create the basic alert element
  1582.     const alertHtml = `
  1583.       <div class="toast-info">
  1584.         <div class="toast-header">
  1585.           <b>${scriptName} - Info</b>
  1586.           <button type="button" class="toast-close-button">&times;</button>
  1587.         </div>
  1588.         <div class="toast-message">
  1589.         <br>
  1590.         ${message}
  1591.         </div>
  1592.       </div>
  1593.     `;
  1594.  
  1595.     // Create the alert element and style it to be centered in the window
  1596.     const $alertElement = $(alertHtml).css({
  1597.       position: "fixed",
  1598.       top: "50%",
  1599.       left: "50%",
  1600.       transform: "translate(-50%, -50%)",
  1601.       backgroundColor: "#007bff",
  1602.       color: "#fff",
  1603.       padding: "15px",
  1604.       borderRadius: "10px",
  1605.       boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
  1606.       zIndex: 1000, // Ensure it's on top of other content
  1607.     });
  1608.  
  1609.     // Style for the close button
  1610.     $alertElement.find(".toast-close-button").css({
  1611.       position: "absolute",
  1612.       top: "0px",
  1613.       right: "5px",
  1614.       fontSize: "25px",
  1615.       color: "#fff",
  1616.       background: "none",
  1617.       border: "none",
  1618.       cursor: "pointer",
  1619.     });
  1620.  
  1621.     // Append the alert element to the specified container
  1622.  
  1623.     if (forumPage) {
  1624.       $("body").append($alertElement);
  1625.     } else {
  1626.       $("#waze-map-container").append($alertElement);
  1627.     }
  1628.  
  1629.     // Handle the close button functionality
  1630.     $alertElement.find(".toast-close-button").on("click", function () {
  1631.       $alertElement.remove();
  1632.     });
  1633.  
  1634.     // Auto-dismiss if disableTimeout is not true
  1635.     if (!disableTimeout) {
  1636.       setTimeout(() => {
  1637.         $alertElement.fadeOut(() => $alertElement.remove());
  1638.       }, 3000); // 5-second timeout by default
  1639.     }
  1640.   }
  1641. })();