fintic-tracker/static/app.js

var availableFeatures = document.querySelectorAll("#available-features li");
var availableFeatures2 = document.querySelectorAll("#available-features-2 li");

var displayFormat = document.querySelector("#display-format");
var displayFormat2 = document.querySelector("#display-format-2");

var featureToDisplay = document.querySelector("#feature-to-display");
var featureToDisplay2 = document.querySelector("#feature-to-display-2");

var displayToFeature = document.querySelector("#display-to-feature");
var displayToFeature2 = document.querySelector("#display-to-feature-2");

var displayToFormat = document.querySelectorAll("#display-format li");
var displayToFormat2 = document.querySelectorAll("#display-format-2 li");

var availableToDisplay = document.querySelector("#available-features");
var availableToDisplay2 = document.querySelector("#available-features-2");

var displayincreaseBtn = document.getElementById("display-increase-btn");
var displayincreaseBtn2 = document.getElementById("display-increase-btn-2");

var displayDecreaseBtn = document.getElementById("display-decrease-btn");
var displayDecreaseBtn2 = document.getElementById("display-decrease-btn-2");

var secondRow = document.getElementById("second-row");

// features lists
var stocksFeatures = document.querySelectorAll("#stocks-features li");
var cryptoFeatures = document.querySelectorAll("#crypto-features li");
var forexFeatures = document.querySelectorAll("#forex-features li");
var currentWeatherFeatures = document.querySelectorAll(
  "#current-weather-features li"
);
var dailyForecastFeatures = document.querySelectorAll(
  "#daily-forecast-features li"
);
var newsFeatures = document.querySelectorAll("#news-features li");
var upcomingGamesFeatures = document.querySelectorAll(
  "#upcoming-games-features li"
);
var pastGamesFeatures = document.querySelectorAll("#past-games-features li");
var liveGamesFeatures = document.querySelectorAll("#live-games-features li");
var teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
var imagesFeatures = document.querySelectorAll("#images-features li");
var gifsFeatures = document.querySelectorAll("#gifs-features li");
var messagesFeatures = document.querySelectorAll("#messages-features li");
var commoditiesFeatures = document.querySelectorAll("#commodities-features li");
var indicesFeatures = document.querySelectorAll("#indices-features li");
var moviesFeatures = document.querySelectorAll("#movies-features li");
var ipoFeatures = document.querySelectorAll("#ipo-features li");
var economicFeatures = document.querySelectorAll("#economic-list li");
var jokesFeatures = document.querySelectorAll("#jokes-list li");
var marketFeatures = document.querySelectorAll("#market-list li");
var sectorFeatures = document.querySelectorAll("#sector-list li");
var placeFeatures = document.querySelectorAll("#place-list li");

var allFeaturesList = [
  stocksFeatures,
  cryptoFeatures,
  forexFeatures,
  currentWeatherFeatures,
  dailyForecastFeatures,
  newsFeatures,
  upcomingGamesFeatures,
  pastGamesFeatures,
  liveGamesFeatures,
  teamStatsFeatures,
  imagesFeatures,
  gifsFeatures,
  messagesFeatures,
  commoditiesFeatures,
  indicesFeatures,
  moviesFeatures,
  ipoFeatures,
  economicFeatures,
  jokesFeatures,
  marketFeatures,
  sectorFeatures,
  placeFeatures,
];

// features remove buttons
var stocksRemoveBtn = document.getElementById("stocks-remove-btn");
var cryptoRemoveBtn = document.getElementById("crypto-remove-btn");
var forexRemoveBtn = document.getElementById("forex-remove-btn");
var currentWeatherRemoveBtn = document.getElementById(
  "current-weather-remove-btn"
);
var dailyForecastRemoveBtn = document.getElementById(
  "daily-forecast-remove-btn"
);
var newsRemoveBtn = document.getElementById("news-remove-btn");
var upcomingGamesRemoveBtn = document.getElementById(
  "upcoming-games-remove-btn"
);
var pastGamesRemoveBtn = document.getElementById("past-games-remove-btn");
var liveGamesRemoveBtn = document.getElementById("live-games-remove-btn");
var teamStatsRemoveBtn = document.getElementById("team-stats-remove-btn");
var imagesRemoveBtn = document.getElementById("images-remove-btn");
var gifsRemoveBtn = document.getElementById("gifs-remove-btn");
var messagesRemoveBtn = document.getElementById("messages-remove-btn");
var commoditiesRemoveBtn = document.getElementById("commodities-remove-btn");
var indicesRemoveBtn = document.getElementById("indices-remove-btn");
var moviesRemoveBtn = document.getElementById("movies-remove-btn");
var ipoRemoveBtn = document.getElementById("ipo-remove-btn");
var economicRemoveBtn = document.getElementById("economic-remove-btn");
var jokesRemoveBtn = document.getElementById("jokes-remove-btn");
var marketRemoveBtn = document.getElementById("market-remove-btn");
var sectorRemoveBtn = document.getElementById("sector-remove-btn");
var placeRemoveBtn = document.getElementById("place-remove-btn");

var allFeaturesRemoveBtns = [
  stocksRemoveBtn,
  cryptoRemoveBtn,
  forexRemoveBtn,
  currentWeatherRemoveBtn,
  dailyForecastRemoveBtn,
  newsRemoveBtn,
  upcomingGamesRemoveBtn,
  pastGamesRemoveBtn,
  liveGamesRemoveBtn,
  teamStatsRemoveBtn,
  imagesRemoveBtn,
  gifsRemoveBtn,
  messagesRemoveBtn,
  commoditiesRemoveBtn,
  indicesRemoveBtn,
  moviesRemoveBtn,
  ipoRemoveBtn,
  economicRemoveBtn,
  jokesRemoveBtn,
  marketRemoveBtn,
  sectorRemoveBtn,
  placeRemoveBtn,
];
// features increase buttons
var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
var cryptoincreaseBtn = document.getElementById("crypto-increase-btn");
var forexincreaseBtn = document.getElementById("forex-increase-btn");
var currentWeatherincreaseBtn = document.getElementById(
  "current-weather-increase-btn"
);
var dailyForecastincreaseBtn = document.getElementById(
  "daily-forecast-increase-btn"
);
var newsincreaseBtn = document.getElementById("news-increase-btn");
var upcomingGamesincreaseBtn = document.getElementById(
  "upcoming-games-increase-btn"
);
var pastGamesincreaseBtn = document.getElementById("past-games-increase-btn");
var liveGamesincreaseBtn = document.getElementById("live-games-increase-btn");
var teamStatsincreaseBtn = document.getElementById("team-stats-increase-btn");
var imagesincreaseBtn = document.getElementById("images-increase-btn");
var gifsincreaseBtn = document.getElementById("gifs-increase-btn");
var messagesincreaseBtn = document.getElementById("messages-increase-btn");
var commoditiesincreaseBtn = document.getElementById("commodities-increase-btn");
var indicesincreaseBtn = document.getElementById("indices-increase-btn");
var moviesincreaseBtn = document.getElementById("movies-increase-btn");
var ipoincreaseBtn = document.getElementById("ipo-increase-btn");
var economicincreaseBtn = document.getElementById("economic-increase-btn");
var jokesincreaseBtn = document.getElementById("jokes-increase-btn");
var marketincreaseBtn = document.getElementById("market-increase-btn");
var sectorincreaseBtn = document.getElementById("sector-increase-btn");
var placeincreaseBtn = document.getElementById("place-increase-btn");

var allFeaturesIncreaseBtns = [
  stocksincreaseBtn,
  cryptoincreaseBtn,
  forexincreaseBtn,
  currentWeatherincreaseBtn,
  dailyForecastincreaseBtn,
  newsincreaseBtn,
  upcomingGamesincreaseBtn,
  pastGamesincreaseBtn,
  liveGamesincreaseBtn,
  teamStatsincreaseBtn,
  imagesincreaseBtn,
  gifsincreaseBtn,
  messagesincreaseBtn,
  commoditiesincreaseBtn,
  indicesincreaseBtn,
  moviesincreaseBtn,
  ipoincreaseBtn,
  economicincreaseBtn,
  jokesincreaseBtn,
  marketincreaseBtn,
  sectorincreaseBtn,
  placeincreaseBtn,
];

// features decrease buttons
var stocksDecreaseBtn = document.getElementById("stocks-decrease-btn");
var cryptoDecreaseBtn = document.getElementById("crypto-decrease-btn");
var forexDecreaseBtn = document.getElementById("forex-decrease-btn");
var currentWeatherDecreaseBtn = document.getElementById(
  "current-weather-decrease-btn"
);
var dailyForecastDecreaseBtn = document.getElementById(
  "daily-forecast-decrease-btn"
);
var newsDecreaseBtn = document.getElementById("news-decrease-btn");
var upcomingGamesDecreaseBtn = document.getElementById(
  "upcoming-games-decrease-btn"
);
var pastGamesDecreaseBtn = document.getElementById("past-games-decrease-btn");
var liveGamesDecreaseBtn = document.getElementById("live-games-decrease-btn");
var teamStatsDecreaseBtn = document.getElementById("team-stats-decrease-btn");
var imagesDecreaseBtn = document.getElementById("images-decrease-btn");
var gifsDecreaseBtn = document.getElementById("gifs-decrease-btn");
var messagesDecreaseBtn = document.getElementById("messages-decrease-btn");
var commoditiesDecreaseBtn = document.getElementById("commodities-decrease-btn");
var indicesDecreaseBtn = document.getElementById("indices-decrease-btn");
var moviesDecreaseBtn = document.getElementById("movies-decrease-btn");
var ipoDecreaseBtn = document.getElementById("ipo-decrease-btn");
var economicDecreaseBtn = document.getElementById("economic-decrease-btn");
var jokesDecreaseBtn = document.getElementById("jokes-decrease-btn");
var marketDecreaseBtn = document.getElementById("market-decrease-btn");
var sectorDecreaseBtn = document.getElementById("sector-decrease-btn");
var placeDecreaseBtn = document.getElementById("place-decrease-btn");

var allFeaturesDecreaseBtns = [
  stocksDecreaseBtn,
  cryptoDecreaseBtn,
  forexDecreaseBtn,
  currentWeatherDecreaseBtn,
  dailyForecastDecreaseBtn,
  newsDecreaseBtn,
  upcomingGamesDecreaseBtn,
  pastGamesDecreaseBtn,
  liveGamesDecreaseBtn,
  teamStatsDecreaseBtn,
  imagesDecreaseBtn,
  gifsDecreaseBtn,
  messagesDecreaseBtn,
  commoditiesDecreaseBtn,
  indicesDecreaseBtn,
  moviesDecreaseBtn,
  ipoDecreaseBtn,
  economicDecreaseBtn,
  jokesDecreaseBtn,
  marketDecreaseBtn,
  sectorDecreaseBtn,
  placeDecreaseBtn,
];

const changeVarValue = () => {
  stocksFeatures = document.querySelectorAll("#stocks-features li");
  cryptoFeatures = document.querySelectorAll("#crypto-features li");
  forexFeatures = document.querySelectorAll("#forex-features li");
  currentWeatherFeatures = document.querySelectorAll(
    "#current-weather-features li"
  );
  dailyForecastFeatures = document.querySelectorAll(
    "#daily-forecast-features li"
  );
  newsFeatures = document.querySelectorAll("#news-features li");
  upcomingGamesFeatures = document.querySelectorAll(
    "#upcoming-games-features li"
  );
  pastGamesFeatures = document.querySelectorAll("#past-games-features li");
  liveGamesFeatures = document.querySelectorAll("#live-games-features li");
  teamStatsFeatures = document.querySelectorAll("#team-stats-features li");
  imagesFeatures = document.querySelectorAll("#images-features li");
  gifsFeatures = document.querySelectorAll("#gifs-features li");
  messagesFeatures = document.querySelectorAll("#messages-features li");
  commoditiesFeatures = document.querySelectorAll("#commodities-features li");
  indicesFeatures = document.querySelectorAll("#indices-features li");
  moviesFeatures = document.querySelectorAll("#movies-features li");
  ipoFeatures = document.querySelectorAll("#ipo-features li");
  economicFeatures = document.querySelectorAll("#economic-list li");
  jokesFeatures = document.querySelectorAll("#jokes-list li");
  marketFeatures = document.querySelectorAll("#market-list li");
  sectorFeatures = document.querySelectorAll("#sector-list li");
  placeFeatures = document.querySelectorAll("#place-list li");
  
  allFeaturesList = [
    stocksFeatures,
    cryptoFeatures,
    forexFeatures,
    currentWeatherFeatures,
    dailyForecastFeatures,
    newsFeatures,
    upcomingGamesFeatures,
    pastGamesFeatures,
    liveGamesFeatures,
    teamStatsFeatures,
    imagesFeatures,
    gifsFeatures,
    messagesFeatures,
    commoditiesFeatures,
    indicesFeatures,
    moviesFeatures,
    ipoFeatures,
    economicFeatures,
    jokesFeatures,
    marketFeatures,
    sectorFeatures,
    placeFeatures,
  ];
};

const addEventOnList = () => {
  // for available feature
  for (let i = 0; i < availableFeatures.length; i++) {
    const availableFeature = availableFeatures[i];
    availableFeature.addEventListener("click", () => {
      for (let i = 0; i < availableFeatures.length; i++) {
        availableFeatures[i].setAttribute("class", "");
      }
      if (availableFeature.getAttribute("class") == "active") {
        availableFeature.setAttribute("class", "");
      } else {
        availableFeature.setAttribute("class", "active");
      }
    });
  }
  // for available feature 2
  for (let i = 0; i < availableFeatures2.length; i++) {
    const availableFeature = availableFeatures2[i];
    availableFeature.addEventListener("click", () => {
      for (let i = 0; i < availableFeatures2.length; i++) {
        availableFeatures2[i].setAttribute("class", "");
      }
      if (availableFeature.getAttribute("class") == "active") {
        availableFeature.setAttribute("class", "");
      } else {
        availableFeature.setAttribute("class", "active");
      }
    });
  }
  // for display format
  for (let i = 0; i < displayToFormat.length; i++) {
    const display_format = displayToFormat[i];
    display_format.addEventListener("click", () => {
      for (let i = 0; i < displayToFormat.length; i++) {
        displayToFormat[i].setAttribute("class", "");
      }
      if (display_format.getAttribute("class") == "active") {
        display_format.setAttribute("class", "");
      } else {
        display_format.setAttribute("class", "active");
      }
    });
  }
  // for display format 2
  for (let i = 0; i < displayToFormat2.length; i++) {
    const display_format = displayToFormat2[i];
    display_format.addEventListener("click", () => {
      for (let i = 0; i < displayToFormat2.length; i++) {
        displayToFormat2[i].setAttribute("class", "");
      }
      if (display_format.getAttribute("class") == "active") {
        display_format.setAttribute("class", "");
      } else {
        display_format.setAttribute("class", "active");
      }
    });
  }
};

const addEventonBtns = () => {
  featureToDisplay.addEventListener("click", () => {
    for (let i = 0; i < availableFeatures.length; i++) {
      const availableFeature = availableFeatures[i];
      if (availableFeature.getAttribute("class") == "active") {
        availableFeature.remove();
        availableFeature.setAttribute("class", "");
        displayFormat.appendChild(availableFeature);
        availableFeatures = document.querySelectorAll("#available-features li");
        displayToFormat = document.querySelectorAll("#display-format li");
        addEventOnList();
        displaySavePrompt();
      }
    }
  });

  displayToFeature.addEventListener("click", () => {
    for (let i = 0; i < displayToFormat.length; i++) {
      const availableFormat = displayToFormat[i];
      if (availableFormat.getAttribute("class") == "active") {
        availableFormat.remove();
        availableFormat.setAttribute("class", "");
        availableToDisplay.appendChild(availableFormat);
        availableFeatures = document.querySelectorAll("#available-features li");
        displayToFormat = document.querySelectorAll("#display-format li");
        addEventOnList();
        displaySavePrompt();
      }
    }
  });

  featureToDisplay2.addEventListener("click", () => {
    for (let i = 0; i < availableFeatures2.length; i++) {
      const availableFeature = availableFeatures2[i];
      if (availableFeature.getAttribute("class") == "active") {
        availableFeature.remove();
        availableFeature.setAttribute("class", "");
        displayFormat2.appendChild(availableFeature);
        availableFeatures2 = document.querySelectorAll(
          "#available-features-2 li"
        );
        displayToFormat2 = document.querySelectorAll("#display-format-2 li");
        addEventOnList();
        displaySavePrompt();
      }
    }
  });

  displayToFeature2.addEventListener("click", () => {
    for (let i = 0; i < displayToFormat2.length; i++) {
      const availableFormat = displayToFormat2[i];
      if (availableFormat.getAttribute("class") == "active") {
        availableFormat.remove();
        availableFormat.setAttribute("class", "");
        availableToDisplay2.appendChild(availableFormat);
        availableFeatures2 = document.querySelectorAll(
          "#available-features-2 li"
        );
        displayToFormat2 = document.querySelectorAll("#display-format-2 li");
        addEventOnList();
        displaySavePrompt();
      }
    }
  });
};

addEventOnList();
addEventonBtns();

const addEventOnFeaturesList = () => {
  allFeaturesList.map((value) => {
    for (let i = 0; i < value.length; i++) {
      const availableFeature = value[i];
      availableFeature.addEventListener("click", () => {
        for (let i = 0; i < value.length; i++) {
          value[i].setAttribute("class", "");
        }
        if (availableFeature.getAttribute("class") == "active") {
          availableFeature.setAttribute("class", "");
        } else {
          availableFeature.setAttribute("class", "active");
          let getCustomImages = JSON.parse(
          localStorage.getItem("customImages")
          );
          let getCustomGifs = JSON.parse(localStorage.getItem("customGifs"));
          let getCustomMsg = JSON.parse(localStorage.getItem("customMsg"));

          getCustomImages.map((value) => {
            let scrollSpeed1 = document.getElementById("inputScrollSpeed11");
            let scrollSpeed2 = document.getElementById("inputScrollSpeedRow11");
            let inputTransition = document.getElementById("inputTransition11");
            let inputText12 = document.getElementById("inputText12");
            let displayCheck = document.getElementById("flexCheckChecked25");

            if (value.fileName == availableFeature.innerText) {
              scrollSpeed1.value = value.scrollSpeed;
              scrollSpeed2.value = value.scrollSpeed2;
              inputTransition.value = value.transition;
              inputText12.value = value.pauseScreen;
              displayCheck.checked = value.displayCheck;
            }
          });
          getCustomGifs.map((value) => {
            let scrollSpeed1 = document.getElementById("inputScrollSpeed12");
            let scrollSpeed2 = document.getElementById("inputScrollSpeedRow12");
            let inputTransition = document.getElementById("inputTransition12");
            let inputText12 = document.getElementById("inputText112");
            let displayCheck = document.getElementById("flexCheckChecked28");

            if (value.fileName == availableFeature.innerText) {
              scrollSpeed1.value = value.scrollSpeed;
              scrollSpeed2.value = value.scrollSpeed2;
              inputTransition.value = value.transition;
              inputText12.value = value.pauseScreen;
              displayCheck.checked = value.displayCheck;
            }
          });

          getCustomMsg.map((value) => {
            let scrollSpeed1 = document.getElementById("inputScrollSpeed13");
            let scrollSpeed2 = document.getElementById("inputScrollSpeedRow13");
            let inputTransition = document.getElementById("inputTransition13");
            let inputMsg = document.getElementById("inputText14");
            let inputColor = document.getElementById("inputScrollSpeed16");
            let inputSize = document.getElementById("inputScrollSpeed17");
            let inputBg = document.getElementById("inputScrollSpeed19BG");
            let displayCheck = document.getElementById("flexCheckChecked29");

            if (value.messageName == availableFeature.innerText) {
              scrollSpeed1.value = value.scrollSpeed1;
              scrollSpeed2.value = value.scrollSpeed2;
              inputTransition.value = value.transition;
              inputMsg.value = value.messageInput;
              inputColor.value = value.colorInput;
              inputSize.value = value.sizeInput;
              inputBg.value = value.backgroundInput;
              displayCheck.checked = value.displayCheck;
            }
          });
        }
      });
    }
  });
};
addEventOnFeaturesList();

// display increase function
displayincreaseBtn.addEventListener("click", () => {
  for (let i = 0; i < displayToFormat.length; i++) {
    var displayItem = displayToFormat[i];

    if (displayItem.getAttribute("class") == "active") {
      var prevElement = displayItem.previousElementSibling;
      var currentText = displayItem.innerText;

      displayItem.innerText = prevElement.innerText;
      prevElement.innerText = currentText;
      prevElement.setAttribute("class", "active");
      displayItem.setAttribute("class", "");
      displaySavePrompt();
    }
  }
});

// display increase 2 function
displayincreaseBtn2.addEventListener("click", () => {
  for (let i = 0; i < displayToFormat2.length; i++) {
    var displayItem = displayToFormat2[i];

    if (displayItem.getAttribute("class") == "active") {
      var prevElement = displayItem.previousElementSibling;
      var currentText = displayItem.innerText;

      displayItem.innerText = prevElement.innerText;
      prevElement.innerText = currentText;
      prevElement.setAttribute("class", "active");
      displayItem.setAttribute("class", "");
      displaySavePrompt();
    }
  }
});

// display decrease function
displayDecreaseBtn.addEventListener("click", () => {
  for (let i = 0; i < displayToFormat.length; i++) {
    var displayItem = displayToFormat[i];

    if (displayItem.getAttribute("class") == "active") {
      var nextElement = displayItem.nextElementSibling;
      var currentText = displayItem.innerText;

      displayItem.innerText = nextElement.innerText;
      nextElement.innerText = currentText;
      nextElement.setAttribute("class", "active");
      displayItem.setAttribute("class", "");
      displaySavePrompt();
      break;
    }
  }
});

// display decrease 2 function
displayDecreaseBtn2.addEventListener("click", () => {
  for (let i = 0; i < displayToFormat2.length; i++) {
    var displayItem = displayToFormat2[i];

    if (displayItem.getAttribute("class") == "active") {
      var nextElement = displayItem.nextElementSibling;
      var currentText = displayItem.innerText;
      displayItem.innerText = nextElement.innerText;
      nextElement.innerText = currentText;
      nextElement.setAttribute("class", "active");
      displayItem.setAttribute("class", "");
      displaySavePrompt();
      break;
    }
  }
});

// feature remove function
allFeaturesRemoveBtns.map((value, index) => {
  value.addEventListener("click", () => {
    for (let i = 0; i < allFeaturesList[index].length; i++) {
      var item = allFeaturesList[index][i];
      console.log(item);
      if ((item.getAttribute("class") == "active") && (index == 0 )){
          let symbol = item.innerText;
          item.remove();
          uploaded_images = [];
          uploaded_GIFs = [];
          fetch("/deletePortfolioSettings", {
            method: "POST",
            body: JSON.stringify(symbol),
          });  
          displaySavePrompt2();
      }
      else if ((item.getAttribute("class") == "active") && (index == 1 )){
          let symbol = item.innerText;
          item.remove();
          uploaded_images = [];
          uploaded_GIFs = [];
          fetch("/deletePortfolioCryptoSettings", {
            method: "POST",
            body: JSON.stringify(symbol),
          });
          displaySavePrompt2();
      }
      else if (item.getAttribute("class") == "active") {
          item.remove();
          uploaded_images = [];
          uploaded_GIFs = [];
          displaySavePrompt2();
      }
    }
  });
});

// feature increase function
allFeaturesIncreaseBtns.map((value, index) => {
  value.addEventListener("click", () => {
    for (let i = 0; i < allFeaturesList[index].length; i++) {
      var item = allFeaturesList[index][i];

      if (item.getAttribute("class") == "active") {
        var prevElement = item.previousElementSibling;
        var currentText = item.innerText;
        item.innerText = prevElement.innerText;
        prevElement.innerText = currentText;
        prevElement.setAttribute("class", "active");
        item.setAttribute("class", "");
        displaySavePrompt2();
      }
    }
  });
});

// feature decrease function
allFeaturesDecreaseBtns.map((value, index) => {
  value.addEventListener("click", () => {
    for (let i = 0; i < allFeaturesList[index].length; i++) {
      var item = allFeaturesList[index][i];

      if (item.getAttribute("class") == "active") {
        var nextElement = item.nextElementSibling;
        var currentText = item.innerText;

        item.innerText = nextElement.innerText;
        nextElement.innerText = currentText;
        nextElement.setAttribute("class", "active");
        item.setAttribute("class", "");
        displaySavePrompt2();
        break;
      }
    }
  });
});

// all features
var stocks = document.getElementById("stocks-features");
var crypto1 = document.getElementById("crypto-features");
var forex = document.getElementById("forex-features");
var currentWeather = document.getElementById("current-weather-features");
var dailyForecast = document.getElementById("daily-forecast-features");
var news = document.getElementById("news-features");
var upcomingGames = document.getElementById("upcoming-games-features");
var pastGames = document.getElementById("past-games-features");
var liveGames = document.getElementById("live-games-features");
var teamStats = document.getElementById("team-stats-features");
var images = document.getElementById("images-features");
var gifs = document.getElementById("gifs-features");
var messages = document.getElementById("messages-features");
var commodities = document.getElementById("commodities-features");
var indices = document.getElementById("indices-features");
var movies = document.getElementById("movies-features");
var ipos = document.getElementById("ipo-features");
var economics = document.getElementById("economic-list");
var jokes = document.getElementById("jokes-list");
var market = document.getElementById("market-list");
var sector = document.getElementById("sector-list");
var place = document.getElementById("place-list");

var allFeatures = [
  stocks,
  crypto1,
  forex,
  currentWeather,
  dailyForecast,
  news,
  upcomingGames,
  pastGames,
  liveGames,
  teamStats,
  images,
  gifs,
  messages,
  commodities,
  indices,
  movies,
  ipos,
  economics,
  jokes,
  market,
  sector,
  place,
];

// features select box
var newsSelect = document.getElementById("inputTransition63");
var upcomingGamesSelect = document.getElementById("inputTransition73");
var pastGamesSelect = document.getElementById("inputTransition83");
var liveGamesSelect = document.getElementById("inputTransition93");
var teamStatsSelect = document.getElementById("inputTransition103");
var moviesSelect = document.getElementById("inputTransition64");
var economicSelect = document.getElementById("inputTransition2222");
var jokesSelect = document.getElementById("jokes-categories");
var marketSelect = document.getElementById("market-categories");
var sectorSelect = document.getElementById("sector-categories");
var placeSelect = document.getElementById("place-categories");
var allFeaturesSelectBox = [
  null,
  null,
  null,
  null,
  null,
  newsSelect,
  upcomingGamesSelect,
  pastGamesSelect,
  liveGamesSelect,
  teamStatsSelect,
  null,
  null,
  null,
  null,
  null,
  moviesSelect,
  null,
  economicSelect,
  jokesSelect,
  marketSelect,
  sectorSelect,
  placeSelect,
];

// features select add buttons
var newsAddBtn = document.getElementById("inputTransitionBtn63");
var upcomingGamesAddBtn = document.getElementById("inputTransitionBtn73");
var pastGamesAddBtn = document.getElementById("inputTransitionBtn83");
var liveGamesAddBtn = document.getElementById("inputTransitionBtn93");
var teamStatsAddBtn = document.getElementById("inputTransitionBtn103");
var economicAddBtn = document.getElementById("economic-countries-btn");
var jokesAddBtn = document.getElementById("jokes-categories-btn");
var marketAddBtn = document.getElementById("market-categories-btn");
var sectorAddBtn = document.getElementById("sector-categories-btn");
var placeAddBtn = document.getElementById("place-categories-btn");

var allFeaturesSelectAddBtn = [
  null,
  null,
  null,
  null,
  null,
  newsAddBtn,
  upcomingGamesAddBtn,
  pastGamesAddBtn,
  liveGamesAddBtn,
  teamStatsAddBtn,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  economicAddBtn,
  jokesAddBtn,
  marketAddBtn,
  sectorAddBtn,
  placeAddBtn,
];

allFeaturesSelectAddBtn.map((value, index) => {
  if (value != null) {
    value.addEventListener("click", () => {
      var tag = document.createElement("li");
      tag.innerHTML = allFeaturesSelectBox[index].value;
      allFeatures[index].appendChild(tag);
      changeVarValue();
      addEventOnFeaturesList();
      displaySavePrompt2();
    });
  }
});

// features input file
var imagesFile = document.getElementById("inputText11");
var gifsFile = document.getElementById("inputText1112");

var allFeaturesFile = [
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  imagesFile,
  gifsFile,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
];
// features file add button
var imagesFileAddBtn = document.getElementById("inputTextBtn11");
var gifsFileAddBtn = document.getElementById("inputTextBtn1112");

var allFeaturesFileAddBtn = [
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  imagesFileAddBtn,
  gifsFileAddBtn,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
];

// features input text
var stocksText = document.getElementById("inputText3");
var cryptoText = document.getElementById("inputText4");
var forexText = document.getElementById("base-select").value + ',' + document.getElementById("quote-select").value;
var currentWeatherText = document.getElementById("inputText6");
var dailyForecastText = document.getElementById("inputText7");
var messagesText = document.getElementById("inputText13");
var indicesText = document.getElementById("indices-items");
var commoditiesText = document.getElementById("commodities-items");

var allFeaturesText = [
  stocksText,
  cryptoText,
  forexText,
  currentWeatherText,
  dailyForecastText,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  messagesText,
  commoditiesText,
  indicesText,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
];

// features text add button
var stocksTextAddBtn = document.getElementById("inputTextBtn3");
var cryptoTextAddBtn = document.getElementById("inputTextBtn4");
var forexTextAddBtn = document.getElementById("inputTextBtn5");
var currentWeatherTextAddBtn = document.getElementById("inputTextBtn6");
var dailyForecastTextAddBtn = document.getElementById("inputTextBtn7");
var messagesTextAddBtn = document.getElementById("inputTextBtn13");
var commoditiesTextAddBtn = document.getElementById("inputTextBtn20");
var indicesTextAddBtn = document.getElementById("inputTextBtn21");

var allFeaturesTextAddBtn = [
  stocksTextAddBtn,
  cryptoTextAddBtn,
  forexTextAddBtn,
  currentWeatherTextAddBtn,
  dailyForecastTextAddBtn,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  messagesTextAddBtn,
  commoditiesTextAddBtn,
  indicesTextAddBtn,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
];


var allFeaturesLimit = [
  200,
  100,
  100,
  20,
  20,
  null,
  null,
  null,
  null,
  null,
  20,
  20,
  20,
  30,
  40,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
];




var createLi = false;

// function addingItems() {
allFeaturesTextAddBtn.map((value, index) => {
  if (value !== null) {
    value.addEventListener("click", () => {
      if ((value == messagesTextAddBtn) && (createLi === true)) {
        // custom message
        let messageName = document.getElementById("inputText13").value;
        let scrollSpeed1 = document.getElementById("inputScrollSpeed13").value;
        let scrollSpeed2 = document.getElementById(
          "inputScrollSpeedRow13"
        ).value;
        let transition = document.getElementById("inputTransition13").value;
        let messageInput = document.getElementById("inputText14").value;
        let colorInput = document.getElementById("inputScrollSpeed16").value;
        let sizeInput = document.getElementById("inputScrollSpeed17").value;
        let backgroundInput =
          document.getElementById("inputScrollSpeed19BG").value;
        let displayCheck =
          document.getElementById("flexCheckChecked29").checked;
        let messagesWrapper = document.getElementById("messages-features");

        let fileFound = false;

        for (let i = 0; i < messagesWrapper.children.length; i++) {
          fileFound =
            messagesWrapper.children[i]?.innerText == messageName && true;
        }
        if (!fileFound) {
          let values = {
            messageName,
            scrollSpeed1,
            scrollSpeed2,
            transition,
            messageInput,
            colorInput,
            sizeInput,
            backgroundInput,
            displayCheck,
          };

          let getCustomMsg = localStorage.getItem("customMsg");

          let newValues = getCustomMsg && JSON.parse(getCustomMsg);
          getCustomMsg && newValues.push(values);

          // getCustomMsg
            // ? localStorage.setItem("customMsg", JSON.stringify(newValues))
            // : localStorage.setItem("customMsg", JSON.stringify([values]));

          var tag = document.createElement("li");
          var msg = "You've reached the maximum limit of items to add for this feature";

          // if the list length exceeds the limit
          if (allFeatures[index].getElementsByTagName("li").length == allFeaturesLimit[index]){
            document.getElementById("limit-msg").innerHTML = msg;
          }
             
          else{
            tag.innerHTML = allFeaturesText[index].value;
            tag.setAttribute("onclick", "getCustomMsg(this.innerText)");
            allFeatures[index].appendChild(tag);
            changeVarValue();
            addEventOnFeaturesList();
            displaySavePrompt2();
            createLi = false;
        }}
      } else {
        var msg = "You've reached the maximum limit of items to add for this feature";

        // if the list length exceeds the limit
        if (allFeatures[index].getElementsByTagName("li").length > allFeaturesLimit[index]){
          document.getElementById("limit-msg").innerHTML = msg;
        }

        else{
          if (createLi === true) {
            var tag = document.createElement("li");
            if (index == 2) {
              tag.innerHTML= document.getElementById("base-select").value + ',' + document.getElementById("quote-select").value;
            } else if (index == 0) {
              tag.innerHTML = allFeaturesText[index].value;
              tag.setAttribute("onclick", "getStockSymbol(this.innerText)");
            } else if (index == 1) {
              tag.innerHTML = allFeaturesText[index].value;
              tag.setAttribute("onclick", "getCryptoSymbol(this.innerText)");
            } else {
              tag.innerHTML = allFeaturesText[index].value;
            }
            allFeatures[index].appendChild(tag);
            changeVarValue();
            addEventOnFeaturesList();
            displaySavePrompt2();
            createLi = false;
        }
    }
    }});
  }
});

var startButton = document.getElementById("start-btn");
// start the display
startButton.addEventListener("click", () => {
    fetch("/start", {
      method: "PUT",
    }); 
});

var brightnessButton = document.getElementById("brightness-btn");
// start the display
brightnessButton.addEventListener("click", () => {
  let brightness = document.querySelectorAll(".brightness-text")[0].value;
  fetch("/brightness", {
    method: "PUT",
    body: JSON.stringify({ brightness: brightness }),
  });
});

var shutdownButton = document.getElementById("shutdown-btn");

shutdownButton.addEventListener("click", () => {
  fetch("/shutdown", {
    method: "GET",
  });
  document.getElementById('yooo').style.display = "block";
});


var restartButton = document.getElementById("restart-btn");

restartButton.addEventListener("click", () => {
  fetch("/restart", {
    method: "GET",
  });
  document.getElementById('yooo').style.display = "block";
});

var resetButton = document.getElementById("reset-btn");

resetButton.addEventListener("click", () => {
  fetch("/reset", {
    method: "GET",
  });
  document.getElementById('yooo').style.display = "block";
});


var stopButton = document.getElementById("stop-btn");
stopButton.addEventListener("click", () => {
  fetch("/stop", {
    method: "GET",
  });
});



var screensaverButton = document.getElementById("screensaver-btn");
screensaverButton.addEventListener("click", () => {
  let anim = localStorage.getItem("inputAnimation");
  
  
  fetch("/screensaver", {
      method: "POST",
      body: anim,
    });
});

var updateButton = document.getElementById("update-btn");
updateButton.addEventListener("click", () => {

  fetch("/update", {
      method: "POST",
    });
});



var dispFormatButton = document.getElementById("dispformat-btn");

var displayFormats = document.getElementById("inputDisplayFormat");

// gets selected functions to display
function getSelected(selector) {
  var opt;
  for (var i = 0, len = selector.options.length; i < len; i++) {
    opt = selector.options[i];

    if (opt.selected === true) {
      break;
    }
  }

  return opt.innerHTML;
}

function getListItems(list_el) {
  let symbols = list_el.getElementsByTagName("li");

  let items = [];
  for (var i = 0; i < symbols.length; ++i) {
    items.push(symbols[i].innerText);
  }
  return items;
}




// gets which features are to be displayed 
function getDisplaying(){
  let opt = getSelected(displayFormats);
  
  if (opt.includes("Standard")) {
    var list_el = document.getElementById("display-format");
    
    let features = getListItems(list_el);
    
     return [features];
  } else if (opt.includes("Professional")) {
    
    var top_list_el = document.getElementById("display-format");
    
    let top_features = getListItems(top_list_el);
    
    
    var bot_list_el = document.getElementById("display-format-2");
    
    let bot_features = getListItems(bot_list_el);
    
    
    let features = [top_features, bot_features];
   
    
    return features;
  }
 
}


  



// gets feature specific settings
function getFeatureSettings() {
  
  let featureSelector = document.getElementById("drop");
  feature = getSelected(featureSelector);
  let features = [
    "Stocks",
    "Crypto",
    "Forex",
    "Current Weather",
    "Daily Forecast",
    "News",
    "Sports (Upcoming Games)",
    "Sports (Past Games)",
    "Sports (Live Games)",
    "Sports (Team Stats)",
    "Custom Images",
    "Custom GIFs",
    "Custom Messages",
    "Commodities",
    "Indices",
    "Movies",
    "IPO Calendar",
    "Economic Calendar",
    "Jokes",
    "Gainers, Losers, Active",
    "Sector Performance",
    "Place (Reddit)",
  ];
  let pageNum = features.indexOf(feature) + 1;
  let pageSelector = "Page" + pageNum.toString();

  let page = document.getElementById(pageSelector);

  // these common to all settings
  let speeds = page.querySelectorAll(".speed-select");
  var speed;
  var speed2;
  
  speed = getSelected(speeds[0]);
  if (speeds.length == 2) {
    
    speed2 = getSelected(page.querySelectorAll(".speed-select")[1]);
  } else {
    speed2 = "Medium";
  }
  let animation = getSelected(page.querySelectorAll(".animation-select")[0]);

  var settings = { feature: feature, speed: speed, speed2: speed2, animation: animation }; // general settings

  var s;
  //function specific settings
  switch (pageNum) {
    case 1:
    case 2:
    case 3:
      s = getTradingSettings(page);
      break;
    case 4:
    case 5:
      s = getWeatherSettings(page);
      break;
    case 6:
      s = getNewsSettings(page);
      break;
    case 7:
    case 8:
    case 9:
    case 10:
      s = getSportsSettings(page);
      break;
    case 11:
    case 12:
      s = getImageSettings(page);
      break;
    case 13:
      s = getMessageSettings(page);
      break;
    case 14:
      s = getTradingSettings(page);
      break;
    case 15:
      s = getTradingSettings(page);
      break;
    case 16:
      s = getMovieSettings(page);
      break;
    case 17:
      s = getIpoSettings(page);
      break;
    case 18:
      s = getEconomicSettings(page);
      break;
    case 19:
      s = getJokesSettings(page);
      break;
    case 20:
      s = getMarketSettings(page);
      break;
    case 21:
      s = getSectorSettings(page);
      break;
    case 22:
      s = getPlaceSettings(page);
      break;
  }
  
  settings = { ...settings, ...s }; // merge both sets of settings
  
    

  return settings;
}

function getFiles() {
  var data = new FormData();

    for (var i = 0; i < uploaded_images.length; i++) {
      data.append(uploaded_images[i].name, uploaded_images[i]);
      console.log(uploaded_images[i].name);
    }
     for (var i = 0; i < uploaded_GIFs.length; i++) {
      data.append(uploaded_GIFs[i].name, uploaded_GIFs[i]);
    }
    
  
    //return data;
    
    fetch("/upload", {
      method: "POST",
      body: data,
    });
}

function saveSettings() {
  
  let displaying = getDisplaying();
  let feature_settings = getFeatureSettings();
  let files = getFiles();
  

 
  console.log(JSON.stringify({'displaying': displaying, 'feature_settings': feature_settings, 'files':files}));
  
  
  
  fetch("/save", {
    method: "POST",
    body: JSON.stringify({'displaying': displaying, 'feature_settings': feature_settings}),
  });

  
}


let saveSettingsButtons = document.querySelectorAll(".save-btn").forEach((button) => button.addEventListener("click", saveSettings));

// gets the stock, crypto or forex specific settings
function getTradingSettings(page) {
  // get all the tick boxes
  let whatFeature = document.getElementById('drop').value;
  let percent = page.querySelectorAll(".percent-select")[0].checked;
  let point = page.querySelectorAll(".point-select")[0].checked;
  let no_logos = page.querySelectorAll(".logo-select")[0].checked;
  let title = page.querySelectorAll(".title-select")[0].checked;
  let symbols_el = page.querySelectorAll(".symbol-list")[0];
  let symbols = getListItems(symbols_el);

  if (whatFeature == 2) {
    let portfolio = page.querySelectorAll(".portfolio-select")[0].checked;
    let lohivol = page.querySelectorAll(".lohivol-select")[0].checked;
    settings = {
      percent: percent,
      point: point,
      logos: no_logos,
      title: title,
      symbols: symbols,
      chart: portfolio,
      lohivol: lohivol,
    };
  }
  else if (whatFeature == 1) {
    let prepost = page.querySelectorAll(".prepost-select")[0].checked;
    let portfolio = page.querySelectorAll(".portfolio-select")[0].checked;
    let lohivol = page.querySelectorAll(".lohivol-select")[0].checked;
    settings = {
      prepost: prepost,
      percent: percent,
      point: point,
      logos: no_logos,
      title: title,
      symbols: symbols,
      chart: portfolio,
      lohivol: lohivol,
    };    
  }
  else {
    settings = {
      percent: percent,
      point: point,
      logos: no_logos,
      title: title,
      symbols: symbols,
    }; 
  }
  console.log(settings);

  return settings;
}

// gets the current wether and forecast settings
function getWeatherSettings(page) {
  let temp = getSelected(page.querySelectorAll(".temp-select")[0]);
  let speed = getSelected(page.querySelectorAll(".wind-speed-select")[0]);
  
  let title = page.querySelectorAll(".title-select")[0].checked;
  
  let
  settings = {
    temp: temp,
    wind_speed: speed,
    title: title,
  };

  //only for daily weather
  try {
    current_weather = page.querySelectorAll(".current-weather-select")[0]
      .checked;
    settings["current_weather"] = current_weather;
  } catch {}

  let locations_el = page.querySelectorAll(".location-list")[0];
  let locations = getListItems(locations_el);
  settings["locations"] = locations;
  console.log(settings);
  return settings;
}

// function saveWeatherAPIKey(){
//   let featureSelector = document.getElementById("drop");
//   feature = getSelected(featureSelector);
//   let features = [
//     "Stocks",
//     "Crypto",
//     "Forex",
//     "Current Weather",
//     "Daily Forecast",
//     "News",
//     "Sports (Upcoming Games)",
//     "Sports (Past Games)",
//     "Sports (Live Games)",
//     "Sports (Team Stats)",
//     "Custom Images",
//     "Custom GIFs",
//     "Custom Messages",
//     "Commodities",
//     "Indices",
//     "Movies",
//     "IPO Calendar",
//   ];
//   let pageNum = features.indexOf(feature) + 1;
//   let pageSelector = "Page" + pageNum.toString();

//   let page = document.getElementById(pageSelector);
  
//   let api_key = page.querySelectorAll(".api-key")[0].value;
//   let settings = {
//     api_key:api_key
//   };
  
//   console.log(settings);
  
//   fetch("/saveWeatherAPIKey", {
//     method: "POST",
//     body: JSON.stringify(settings),
//   });
// }


function saveMovieAPIKey(){
  let featureSelector = document.getElementById("drop");
  feature = getSelected(featureSelector);
  let features = [
    "Stocks",
    "Crypto",
    "Forex",
    "Current Weather",
    "Daily Forecast",
    "News",
    "Sports (Upcoming Games)",
    "Sports (Past Games)",
    "Sports (Live Games)",
    "Sports (Team Stats)",
    "Custom Images",
    "Custom GIFs",
    "Custom Messages",
    "Commodities",
    "Indices",
    "Movies",
    "IPO Calendar",
    "Economic Calendar",
    "Jokes",
    "Gainers, Losers, Active",
    "Sector Performance",
    "Place (Reddit)",
  ];
  let pageNum = features.indexOf(feature) + 1;
  let pageSelector = "Page" + pageNum.toString();

  let page = document.getElementById(pageSelector);
  
  let api_key = page.querySelectorAll(".api-key")[0].value;
  let settings = {
    api_key:api_key
  };
  
  console.log(settings);
  
  fetch("/saveMovieAPIKey", {
    method: "POST",
    body: JSON.stringify(settings),
  });
}


function saveIpoAPIKey(){
  let featureSelector = document.getElementById("drop");
  feature = getSelected(featureSelector);
  let features = [
    "Stocks",
    "Crypto",
    "Forex",
    "Current Weather",
    "Daily Forecast",
    "News",
    "Sports (Upcoming Games)",
    "Sports (Past Games)",
    "Sports (Live Games)",
    "Sports (Team Stats)",
    "Custom Images",
    "Custom GIFs",
    "Custom Messages",
    "Commodities",
    "Indices",
    "Movies",
    "IPO Calendar",
    "Economic Calendar",
    "Jokes",
    "Gainers, Losers, Active",
    "Sector Performance",
    "Place (Reddit)",
  ];
  let pageNum = features.indexOf(feature) + 1;
  let pageSelector = "Page" + pageNum.toString();

  let page = document.getElementById(pageSelector);
  
  let api_key = page.querySelectorAll(".api-key")[0].value;
  let settings = {
    api_key:api_key
  };
  
  console.log(settings);
  
  fetch("/saveIpoAPIKey", {
    method: "POST",
    body: JSON.stringify(settings),
  });
}

var ipoAPIbtn = document.getElementById("ipo-api-btn");
ipoAPIbtn.addEventListener("click", saveIpoAPIKey);

var movieAPIbtn = document.getElementById("movie-api-btn");
movieAPIbtn.addEventListener("click", saveMovieAPIKey);

// var weatherAPIbtn = document.getElementById("weather-api-btn");
// weatherAPIbtn.addEventListener("click", saveWeatherAPIKey);

function getNewsSettings(page) {
  
  let country = getSelected(page.querySelectorAll(".country-select")[0]);
  let category = getSelected(page.querySelectorAll(".category-select")[0]);
  let country_check = page.querySelectorAll(".country-check")[0].checked;
  let category_check = page.querySelectorAll(".category-check")[0].checked;
  
  let num_headlines = page.querySelectorAll(".headline-num")[0].value
  let title = page.querySelectorAll(".title-select")[0].checked;

  settings = {
    country: country,
    category: category,
    use_country: country_check, 
    use_category: category_check,
    num_headlines: num_headlines,
    title: title,
  };
 
  console.log(settings);
  return settings;
}

function getMovieSettings(page) {
  
  let category = getSelected(page.querySelectorAll(".movie-categories")[0]);
  let title = page.querySelectorAll(".title-select")[0].checked;
  let api_key = page.querySelectorAll(".api-key")[0];

  settings = {
    category: category,
    title: title,
    api_key: api_key
  };
 
  return settings;
}


function getIpoSettings(page) {
  let title = page.querySelectorAll(".title-select")[0].checked;
  let api_key = page.querySelectorAll(".api-key")[0];

  settings = {
    title: title,
    api_key: api_key
  };
  return settings;
}

function getSportsSettings(page) {
  let title = page.querySelectorAll(".title-select")[0].checked;
  let leagues_el = page.querySelectorAll(".league-list")[0];
  leagues = getListItems(leagues_el);
  

  settings = { title: title, leagues: leagues };
  return settings;
}

var uploaded_images = [];
var uploaded_GIFs = [];

allFeaturesFileAddBtn.map((value, index) => {
  if (value !== null) {
    value.addEventListener("click", () => {
      var tag = document.createElement("li");
      tag.innerHTML = allFeaturesFile[index].files[0].name;
      if (index == 10) {
        let getCustomImg = localStorage.getItem("customImages");
        let fileName = imagesFile.files[0].name;
        let scrollSpeed = document.getElementById("inputScrollSpeed11").value;
        let scrollSpeed2 = document.getElementById(
          "inputScrollSpeedRow11"
        ).value;
        let transition = document.getElementById("inputTransition11").value;
        let pauseScreen = document.getElementById("inputText12").value;
        let displayCheck =
          document.getElementById("flexCheckChecked25").checked;

        let fileFound = false;

        for (let i = 0; i < allFeatures[index].children.length; i++) {
          fileFound =
            allFeatures[index].children[i]?.innerText == fileName && true;
        }
        if (!fileFound) {
          let values = {
            fileName,
            scrollSpeed,
            scrollSpeed2,
            transition,
            pauseScreen,
            displayCheck,
          };

          let newValues = getCustomImg && JSON.parse(getCustomImg);
          getCustomImg && newValues.push(values);

          // getCustomImg
          //   ? localStorage.setItem("customImages", JSON.stringify(newValues))
          //   : localStorage.setItem("customImages", JSON.stringify([values]));

          uploaded_images.push(allFeaturesFile[index].files[0]);
          allFeatures[index].appendChild(tag);
        }
      } else if (index == 11) {
        let getCustomGifs = localStorage.getItem("customGifs");
        let fileName = allFeaturesFile[index].files[0].name;
        let scrollSpeed = document.getElementById("inputScrollSpeed12").value;
        let scrollSpeed2 = document.getElementById(
          "inputScrollSpeedRow12"
        ).value;
        let transition = document.getElementById("inputTransition12").value;
        let pauseScreen = document.getElementById("inputText112").value;
        let displayCheck =
          document.getElementById("flexCheckChecked28").checked;

        let fileFound = false;

        for (let i = 0; i < allFeatures[index].children.length; i++) {
          fileFound =
            allFeatures[index].children[i]?.innerText == fileName && true;
        }
        if (!fileFound) {
          let values = {
            fileName,
            scrollSpeed,
            scrollSpeed2,
            transition,
            pauseScreen,
            displayCheck,
          };

          let newValues = getCustomGifs && JSON.parse(getCustomGifs);
          getCustomGifs && newValues.push(values);

          // getCustomGifs
          //   ? localStorage.setItem("customGifs", JSON.stringify(newValues))
          //   : localStorage.setItem("customGifs", JSON.stringify([values]));

          uploaded_GIFs.push(allFeaturesFile[index].files[0]);
          allFeatures[index].appendChild(tag);
        }
      }
      imagesFile.value = "";
      changeVarValue();
      addEventOnFeaturesList();
      displaySavePrompt2();
    });
  }
});

//images and GIFs
function getImageSettings(page) {
  let pause = page.querySelectorAll(".pause-select")[0].value;
  let title = page.querySelectorAll(".title-select")[0].checked;

  let images_el = page.querySelectorAll(".image-list")[0];
  images = getListItems(images_el);

  settings = { title: title, pause: pause, images: images };
  return settings;
}

// ADD MSG TO LIST AND SAVE MSG TO JSON FILE
var messages = [];
messagesTextAddBtn.addEventListener("click", () => {
  let pageSelector = "Page13";

  let page = document.getElementById(pageSelector);

  let msg_name = messagesText.value;
  //let speed = getSelected(page.querySelectorAll(".speed-select")[0]);
  //let animation = getSelected(page.querySelectorAll(".animation-select")[0]);

  let message_text = page.querySelectorAll(".message-input")[0].value;
  let text_colour = getSelected(page.querySelectorAll(".text-colour")[0]);
  let text_size = getSelected(page.querySelectorAll(".text-size")[0]);
  let background_colour = getSelected(page.querySelectorAll(".back-colour")[0]);

  let message = {
    name: msg_name,
    text: message_text,
    text_colour: text_colour,
    size: text_size,
    background_colour: background_colour,
  };
  messages.push(message);
  
  fetch("/sendMsgToJSON", {
     method: "POST",
     body: JSON.stringify(message),
   });
});

function getMessageSettings(page) {
  let messages_el = page.querySelectorAll(".message-list")[0];
  let message_names = getListItems(messages_el);

  //remove any messages that arent in the list
  let new_messages = [];
  let new_names = [];
  
  
  

  for (let i = 0; i < message_names.length; i++) {
    
    for (let j = 0; j < messages.length; j++) {
    
      if (message_names[i] == messages[j]["name"]) {
        new_messages.push(messages[j]);
        new_names.push(messages[j]["name"]);
      }
    }
    
    
    if ( !(new_names.includes(message_names[i]))) {
      new_messages.push({name: message_names[i]});
    }
    
  }
  
  let title = page.querySelectorAll(".title-select")[0].checked;
  return { title: title, messages: new_messages };
}

// economic settings
function getEconomicSettings(page) {
  
  let title = page.querySelectorAll(".title-select")[0].checked;
  let countries = getListItems(page.querySelectorAll(".symbol-list")[0]);
  let importance = page.querySelectorAll(".economic-importance-select")[0].value;
  let timezone = page.querySelectorAll(".economic-tz-select")[0].value;

  settings = {
    title: title,
    countries: countries,
    importance: importance,
    timezone: timezone,
  };
  console.log(settings);
  return settings;
}


// market settings
function getMarketSettings(page) {
  
  let title = page.querySelectorAll(".title-select")[0].checked;
  let categories = getListItems(page.querySelectorAll(".symbol-list")[0]);
  let percent = page.querySelectorAll(".percent-select")[0].checked;
  let point = page.querySelectorAll(".point-select")[0].checked;
  let no_logos = page.querySelectorAll(".logo-select")[0].checked;
  let lohivol = page.querySelectorAll(".lohivol-select")[0].checked;

  settings = {
    title: title,
    categories: categories,
    percent: percent,
    point: point,
    logos: no_logos,
    lohivol: lohivol,
  };
  console.log(settings);
  return settings;
}


// sector settings
function getSectorSettings(page) {
  
  let title = page.querySelectorAll(".title-select")[0].checked;
  let categories = getListItems(page.querySelectorAll(".symbol-list")[0]);
  let no_logos = page.querySelectorAll(".logo-select")[0].checked;

  settings = {
    title: title,
    categories: categories,
    logos: no_logos,
  };
  console.log(settings);
  return settings;
}


// jokes settings
function getJokesSettings(page) {
  
  let title = page.querySelectorAll(".title-select")[0].checked;
  let categories = getListItems(page.querySelectorAll(".symbol-list")[0]);
  let amount = page.querySelectorAll(".jokes-amount-select")[0].value;
  let safe = page.querySelectorAll(".title-select")[1].checked;
  const jokesdivElement = page.querySelector('.blacklist-checkboxes');
  const allcheckboxes = jokesdivElement.querySelectorAll('input');
  const blacklist = [];
  allcheckboxes.forEach(checkbox => {
   if (checkbox.checked) {
      blacklist.push(checkbox.value);
         }
  });
  settings = {
    title: title,
    safe: safe,
    categories: categories,
    blacklist: blacklist,
    amount: amount,
  };
  console.log(settings);
  return settings;
}


// place settings
function getPlaceSettings(page) {
  
  let title = page.querySelectorAll(".title-select")[0].checked;
  let places = getListItems(page.querySelectorAll(".symbol-list")[0]);
  let pause_place = page.querySelectorAll(".pause-select")[0].value;
  let width = page.querySelectorAll(".slider")[0].value;

  settings = {
    title: title,
    places: places,
    pause: pause_place,
    width: width,
  };
  console.log(settings);
  return settings;
}



// Join Network

let wifiSsidInput = document.getElementById("wifi-ssid-input");
let wifiPassInput = document.getElementById("wifi-pass-input");
let countryCodeInput = document.getElementById("country-code-input");

let joinNetworkBtn = document.querySelector("#join-network-btn");
let connectedText = document.querySelector("#connected-text");

joinNetworkBtn.addEventListener("click", () => {
   localStorage.setItem("wifiSsid", wifiSsidInput.value);
   localStorage.setItem("wifiPass", wifiPassInput.value);
   localStorage.setItem("countryCode", countryCodeInput.value);

//   connectedText.style.display = "block";
//   setTimeout(() => {
//     connectedText.style.display = "none";
//   }, 2000);
  
   data = {country:countryCodeInput.value, ssid:wifiSsidInput.value, pwd:wifiPassInput.value}
  
   fetch("/wifi", {
       method: "POST",
       body: JSON.stringify(data),
     });
 });

// change display format
let displayFormatDropDown = document.querySelector("#inputDisplayFormat");
let displayFormatBtn = document.querySelector("#dispformat-btn");
let selectedDisplayText = document.querySelector("#selected-display-text");
let topRowText = document.querySelector("#top-row-text");
let bottomRowText = document.querySelector("#bottom-row-text");

displayFormatBtn.addEventListener("click", () => {
  selectedDisplayText.innerText = displayFormatDropDown.value;
  if (selectedDisplayText.innerText === "Professional Two Rows") {
    topRowText.style.display = "inline";
    bottomRowText.style.display = "inline";
    secondRow.style.display = "flex";
    displaySavePrompt();
    inputScrollSpeedRow.forEach((value) => {
      value.parentElement.parentElement.style.display = "flex";
    });
  } else {
    topRowText.style.display = "none";
    bottomRowText.style.display = "none";
    secondRow.style.display = "none";
    displaySavePrompt();
    inputScrollSpeedRow.forEach((value) => {
      value.parentElement.parentElement.style.display = "none";
    });
  }
});


// after clicking reset user settings, change back to standard scrolling

let resetSettingsBtn = document.querySelector("#reset-btn")

resetSettingsBtn.addEventListener("click", () => {
  selectedDisplayText.innerText = "Standard Scrolling";
  topRowText.style.display = "none";
  bottomRowText.style.display = "none";
  secondRow.style.display = "none";
  inputScrollSpeedRow.forEach((value) => {
    value.parentElement.parentElement.style.display = "none";
  });
});


// if selected display text = Professional two rows

if (selectedDisplayText.innerText === "Professional Two Rows") {
  topRowText.style.display = "inline";
}

// change host name

let hostNameInput = document.getElementById("host-name-input");
let hostNameBtn = document.getElementById("host-name-btn");
let hostNameText = document.getElementById("host-name");

hostNameBtn.addEventListener("click", () => {
  hostNameText.innerText = hostNameInput.value;
  // localStorage.setItem("hostName", hostNameText.innerText);
  
   data = {hostname:hostNameText.innerText}
  
  fetch("/hostname", {
      method: "POST",
      body: JSON.stringify(data),
    });
});

// Add Weather API Key

// let weatherKeyInput = document.getElementById("api-key");
// let weatherKeyBtn = document.getElementById("weather-api-button");
// let inputTextWeather = document.getElementById("inputText-weather");

// weatherKeyBtn.addEventListener("click", () => {
//    inputTextWeather.innerText = weatherKeyInput.value;
//    data = {api-key:inputTextWeather.innerText}

//    fetch("/weatherAPI", {
//    	method: "POST",
//    	body: JSON.stringify(data),
//    });
// });


// change brightness

let brightnessInput = document.getElementById("brightness-input");
let brightnessBtn = document.getElementById("brightness-btn");

brightnessBtn.addEventListener("click", () => {
  // localStorage.setItem("brightness", brightnessInput.value);
});

// change input animation
let inputAnimation = document.getElementById("inputAnimation");
let inputAnimationBtn = document.getElementById("input-animation-btn");

inputAnimationBtn.addEventListener("click", () => {
  localStorage.setItem("inputAnimation", inputAnimation.value);

});

// scroll speed row two
let inputScrollSpeedRow = [];

for (let i = 1; i <= 22; i++) {
  inputScrollSpeedRow.push(
    document.getElementById(
      i === 1 ? "inputScrollSpeedRow" : `inputScrollSpeedRow${i}`
    )
  );
}

window.onload = () => {
  // let getHostName = localStorage.getItem("hostName");
  // let getBrightness = localStorage.getItem("brightness");
  // let getWifiSsid = localStorage.getItem("wifiSsid");
  // let getWifiPass = localStorage.getItem("wifiPass");
  // let getCountryCode = localStorage.getItem("countryCode");
  // let getInputAnimation = localStorage.getItem("inputAnimation");

  // getHostName &&
  //   (hostNameText.innerText = getHostName) &&
  //   (hostNameInput.value = getHostName);

  //getBrightness && (brightnessInput.value = getBrightness);
  //getWifiSsid && (wifiSsidInput.value = getWifiSsid);
  //getWifiPass && (wifiPassInput.value = getWifiPass);
  //getCountryCode && (countryCodeInput.value = getCountryCode);

//   let getDispayFormat = localStorage.getItem("displayFormat");
//   getDispayFormat && (displayFormatDropDown.value = getDispayFormat);
  selectedDisplayText.innerText = displayFormatDropDown.value;

 // getInputAnimation && (inputAnimation.value = getInputAnimation);

  if (selectedDisplayText.innerText === "Professional Two Rows") {
    topRowText.style.display = "inline";
    bottomRowText.style.display = "inline";
    secondRow.style.display = "flex";
    inputScrollSpeedRow.forEach((value) => {
      value.parentElement.parentElement.style.display = "flex";
    });
  } else {
    topRowText.style.display = "none";
    bottomRowText.style.display = "none";
    secondRow.style.display = "none";
    inputScrollSpeedRow.forEach((value) => {
      value.parentElement.parentElement.style.display = "none";
    });
  }

  // custom images
  
  /*
  let localCustomImages = JSON.parse(localStorage.getItem("customImages"));
  localCustomImages?.map((value) => {
    let tag = document.createElement("li");
    tag.innerText = value.fileName;
    images.appendChild(tag);
  });
  // custom gifs
  let localCustomGifs = JSON.parse(localStorage.getItem("customGifs"));
  localCustomGifs?.map((value) => {
    let tag = document.createElement("li");
    tag.innerText = value.fileName;
    gifs.appendChild(tag);
  });
  // custom messages
  let localCustomMsg = JSON.parse(localStorage.getItem("customMsg"));
  localCustomMsg?.map((value) => {
    let tag = document.createElement("li");
    tag.innerText = value.messageName;
    var messagesWrapper = document.getElementById("messages-features");

    messagesWrapper.appendChild(tag);
  });
  * */
  addEventOnList();
  addEventonBtns();
  changeVarValue();
  addEventOnFeaturesList();
};


// Update button CSS effects if update available vs if already up to date

var btnText = document.getElementById("update-btn").innerText
var divClass = document.getElementById("outer-div")

if(btnText == "Up to date"){
    divClass.classList.remove("main-div2");
    divClass.classList.add("main-div3");
}else{
    divClass.classList.remove("main-div3");
    divClass.classList.add("main-div2");

}


function togglePass() {
  var x = document.getElementById("wifi-pass-input");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}


// Show messages when updating ticker / joining wifi network

function showDiv() {
  document.getElementById('update-message').style.display = "block";
}


function showDivTwo() {
  document.getElementById('wifi-message').style.display = "block";
}


// Display message asking for restart of ticker when new API key added for weather

// function showWeatherP() {
//   if(document.getElementById("api-key1").value==="") {

//             document.getElementById('weather-api-p').style.display = "none";
//         } 

//         else if (document.getElementById("api-key1").value==="Weather API Key") {
//                       document.getElementById('weather-api-p').style.display = "none";

//         }

//           else {
//             document.getElementById('weather-api-p').style.display = "block"
//         }

//     }


// Display message asking for restart of ticker when new API key added for movie

function showMovieP() {
  if(document.getElementById("api-key-movie").value==="") {

            document.getElementById('movie-api-p').style.display = "none";
        } 

        else if (document.getElementById("api-key-movie").value==="Movies API Key") {
                      document.getElementById('movie-api-p').style.display = "none";

        }

          else {
            document.getElementById('movie-api-p').style.display = "block"
        }

    }



function showIpoP() {
  if(document.getElementById("api-key-ipo").value==="") {

            document.getElementById('ipo-api-p').style.display = "none";
        } 

        else if (document.getElementById("api-key-ipo").value==="IPO Calendar API Key") {
                      document.getElementById('ipo-api-p').style.display = "none";

        }

          else {
            document.getElementById('ipo-api-p').style.display = "block"
        }

    }


// Disable adding cities when no API key detected


//    if(document.getElementById("api-key1").value==="") { 
//             document.getElementById('inputTextBtn6').disabled = true; 
//         } 

//         else if (document.getElementById("api-key1").value==="Weather API Key") {
//             document.getElementById('inputTextBtn6').disabled = true;
//         }

//           else {
//             document.getElementById('inputTextBtn6').disabled = false;
//           }
        



//    if(document.getElementById("api-key").value==="") { 
//             document.getElementById('inputTextBtn7').disabled = true; 
//         } 

//         else if (document.getElementById("api-key").value==="Weather API Key") {
//             document.getElementById('inputTextBtn7').disabled = true;
//         }

//           else {
//             document.getElementById('inputTextBtn7').disabled = false;
//           }


// Stocks validation

function stockValidate() {

var specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|,<>\/?~]/;

  let x = document.getElementById("inputText3").value;
  let portfolioCheckbox = document.getElementById("flexCheckChecked4");
  let sharesText = document.getElementById("inputText8").value;
  let averageCost = document.getElementById("inputText9").value;
  let dateText = document.getElementById("inputText10").value;

  let text;
  let text2;
    if (x.toUpperCase() != x) {
      document.getElementById('demo').style.display = "block";
      text = "Stock symbol must be uppercase";
      document.getElementById("inputText3").value = '';
      // createLi = false;

    }
        else if (x === '') {
        document.getElementById('demo').style.display = "block";  
        text = "No blanks"
        // createLi = false;
        }
        else if (x.includes(' ')) {
        text = "No spaces";
        document.getElementById('demo').style.display = "block";
        document.getElementById("inputText3").value = ''; 
        // createLi = false;
        }
        else if (x.length > 5) {
          document.getElementById('demo').style.display = "block";
        text = "No more than 5 characters";
        document.getElementById("inputText3").value = '';
        // createLi = false; 
        }
        else if (/\d/.test(x)) {
          document.getElementById('demo').style.display = "block";
        text = "No numbers allowed";
        document.getElementById("inputText3").value = '';
        // createLi = false; 
        }    
        // CAREFUL TO DELETE THE BACKEND LIST ITEMS, JUST DELETING THE VALUE LIKE THIS ISN"T 100% ACCURATE
        else if (specialChars.test(x)) {
          document.getElementById('demo').style.display = "block";
        text = "No special characters allowed";
        document.getElementById("inputText3").value = ''; 
        // createLi = false;
        } 
        else {
          text = "Input OK";
          document.getElementById('demo').style.display = "none";
          //PORTFOLIO VALIDATION HERE
          if (portfolioCheckbox.checked) {
            if ((sharesText === ' ') || (averageCost === ' ') || (dateText === ' ')) {
              text2 = "No spaces";
              document.getElementById('demo-portfolio').style.display = "block";
              document.getElementById("inputText8").value = ''; 
              document.getElementById("inputText9").value = ''; 
              document.getElementById("inputText10").value = ''; 
              document.getElementById("inputText3").value = '';
            }
            else if ((isNaN(sharesText))|| (isNaN(averageCost))) {
              text2 = "No text characters, only numbers";
              document.getElementById('demo-portfolio').style.display = "block";
              document.getElementById("inputText8").value = ''; 
              document.getElementById("inputText9").value = ''; 
              document.getElementById("inputText10").value = '';     
              document.getElementById("inputText3").value = '';           
            }
            else if ((!dateText.includes('-')) && (dateText !== '')) {
              text2 = "Incorrect date format, it should be YYYY-MM-DD";
              document.getElementById('demo-portfolio').style.display = "block";
              document.getElementById("inputText8").value = ''; 
              document.getElementById("inputText9").value = ''; 
              document.getElementById("inputText10").value = '';  
              document.getElementById("inputText3").value = ''; 
            }
            else if (((sharesText !== '') || (averageCost !== '') || (dateText !== '')) && ((sharesText === '') || (averageCost === '') || (dateText === ''))) {
              text2 = "Some fields are empty";
              document.getElementById('demo-portfolio').style.display = "block";
              document.getElementById("inputText8").value = ''; 
              document.getElementById("inputText9").value = ''; 
              document.getElementById("inputText10").value = ''; 
              document.getElementById("inputText3").value = ''; 
            }
            else {
              text2 = "Input OK";
              document.getElementById('demo-portfolio').style.display = "none";
              createLi = true;
              // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
              // addingItems();
              let cost = document.getElementById('inputText9').value;
              let shares = document.getElementById('inputText8').value;
              let symbol = document.getElementById('inputText3').value;
              let days = document.getElementById('inputText10').value;

              let settings = {
                shares:shares,
                cost:cost,
                symbol:symbol,
                days:days,
              };
              console.log(JSON.stringify(settings));

              setTimeout(
                  function() {
                document.getElementById('inputText3').value="";
                document.getElementById("inputText8").value = ''; 
                document.getElementById("inputText9").value = ''; 
                document.getElementById("inputText10").value = ''; 
                document.getElementById("inputText3").value = ''; 
                  }, 100);

              if ((sharesText !== '') && (averageCost !== '') && (dateText !== '')) {
                fetch("/savePortfolioSettings", {
                  method: "POST",
                  body: JSON.stringify(settings),
                });
              }
            }
            document.getElementById("demo-portfolio").innerHTML = text2;
          }

          else {
            createLi = true;
            // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
            // addingItems();
            setTimeout(
                function() {
              document.getElementById('inputText3').value="";
                }, 100);            
          }
        }
          document.getElementById("demo").innerHTML = text;
        }


// Crypto validation

function cryptoValidate() {

var specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|<>\/?~]/;

  let x = document.getElementById("inputText4").value;
  let baseCurrency = x.split(",")[1];
  let portfolioCheckbox = document.getElementById("crypto_portfolio_checkbox");
  let sharesText = document.getElementById("cryptoshares").value;
  let averageCost = document.getElementById("cryptocost").value;
  let dateText = document.getElementById("cryptodate").value;

  let text;
  let text2;
    if (x.toUpperCase() != x) {
      document.getElementById('demo2').style.display = "block";
      text = "Crypto and base must be uppercase";
      document.getElementById("inputText4").value = '';
      // createLi = false;
    }
        else if (x === '') {
        document.getElementById('demo2').style.display = "block";  
        text = "No blanks"
        // createLi = false;
        }
        else if (x.includes(' ')) {
        text = "No spaces";
        document.getElementById('demo2').style.display = "block";
        document.getElementById("inputText4").value = ''; 
        // createLi = false;
        }
        else if (specialChars.test(x)) {
          document.getElementById('demo2').style.display = "block";
        text = "No special characters allowed";
        document.getElementById("inputText4").value = ''; 
        // createLi = false;
        } 
        else if (!x.includes(',')) {
        document.getElementById('demo2').style.display = "block";  
        document.getElementById("inputText4").value = '';
        text = "Missing ',' (e.g. BTC,USD)"
        // createLi = false;
        }

        else if (!["USD","AUD","BTC","CAD","CHF","EUR","GBP","ETH","JPY","NZD"].includes(baseCurrency)) {
        document.getElementById('demo2').style.display = "block";  
        document.getElementById("inputText4").value = '';
        text = "Invalid base currency"

        }

        else {
          text = "Input OK";
          document.getElementById('demo2').style.display = "none";
          //PORTFOLIO VALIDATION HERE
          if (portfolioCheckbox.checked) {
            if ((sharesText === ' ') || (averageCost === ' ') || (dateText === ' ')) {
              text2 = "No spaces";
              document.getElementById('demo-portfolio-crypto').style.display = "block";
              document.getElementById("cryptoshares").value = ''; 
              document.getElementById("cryptocost").value = ''; 
              document.getElementById("cryptodate").value = ''; 
              document.getElementById("inputText4").value = '';
            }
            else if ((isNaN(sharesText))|| (isNaN(averageCost))) {
              text2 = "No text characters, only numbers";
              document.getElementById('demo-portfolio-crypto').style.display = "block";
              document.getElementById("cryptoshares").value = ''; 
              document.getElementById("cryptocost").value = ''; 
              document.getElementById("cryptodate").value = '';     
              document.getElementById("inputText4").value = '';           
            }
            else if ((!dateText.includes('-')) && (dateText !== '')) {
              text2 = "Incorrect date format, it should be YYYY-MM-DD";
              document.getElementById('demo-portfolio-crypto').style.display = "block";
              document.getElementById("cryptoshares").value = ''; 
              document.getElementById("cryptocost").value = ''; 
              document.getElementById("cryptodate").value = '';  
              document.getElementById("inputText4").value = ''; 
            }
            else if (((sharesText !== '') || (averageCost !== '') || (dateText !== '')) && ((sharesText === '') || (averageCost === '') || (dateText === ''))) {
              text2 = "Some fields are empty";
              document.getElementById('demo-portfolio-crypto').style.display = "block";
              document.getElementById("cryptoshares").value = ''; 
              document.getElementById("cryptocost").value = ''; 
              document.getElementById("cryptodate").value = ''; 
              document.getElementById("inputText4").value = ''; 
            }
            else {
              text2 = "Input OK";
              document.getElementById('demo-portfolio-crypto').style.display = "none";
              createLi = true;   

              let cost = document.getElementById('cryptocost').value;
              let shares = document.getElementById('cryptoshares').value;
              let symbol = document.getElementById('inputText4').value;
              let days = document.getElementById('cryptodate').value;

              let settings = {
                shares:shares,
                cost:cost,
                symbol:symbol,
                days:days,
              };
              console.log(JSON.stringify(settings));  

              setTimeout(
                  function() {
                document.getElementById('inputText4').value="";
                document.getElementById("cryptocost").value = ''; 
                document.getElementById("cryptoshares").value = ''; 
                document.getElementById("cryptodate").value = ''; 
                document.getElementById("inputText4").value = ''; 
                  }, 100);

              if ((sharesText !== '') && (averageCost !== '') && (dateText !== '')) {
                fetch("/savePortfolioCryptoSettings", {
                  method: "POST",
                  body: JSON.stringify(settings),
                });
              }
            }
            document.getElementById("demo-portfolio-crypto").innerHTML = text2;
          }

          else {
            createLi = true;
            // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
            setTimeout(
                function() {
              document.getElementById('inputText4').value="";
                }, 100); 
          }         
        }
          document.getElementById("demo2").innerHTML = text;
        }


// Forex validation
function forexValidate() {
  createLi = true;
}

// var specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|<>\/?~]/;

//   let x = document.getElementById("inputText5").value;
//   let quoteCurrency = x.split(",")[1];
//   let baseCurrency = x.split(",")[0];

//   // console.log("base"+baseCurrency);
//   // console.log("quote"+quoteCurrency);

//   let text;
//     if (x.toUpperCase() != x) {
//       document.getElementById('demo3').style.display = "block";
//       text = "Base and quote must be uppercase";
//       document.getElementById("inputText5").value = '';
//       // createLi = false;
//     }
//         else if (x === '') {
//         document.getElementById('demo3').style.display = "block";  
//         text = "No blanks"
//         }

//         else if (x.includes(' ')) {
//         text = "No spaces";
//         document.getElementById('demo3').style.display = "block";
//         document.getElementById("inputText5").value = ''; 
//         }

//         else if (/\d/.test(x)) {
//           document.getElementById('demo3').style.display = "block";
//         text = "No numbers allowed";
//         document.getElementById("inputText5").value = ''; 
//         }    
//         // CAREFUL TO DELETE THE BACKEND LIST ITEMS, JUST DELETING THE VALUE LIKE THIS ISN"T 100% ACCURATE

//         else if (specialChars.test(x)) {
//           document.getElementById('demo3').style.display = "block";
//         text = "No special characters allowed";
//         document.getElementById("inputText5").value = ''; 
//         } 

//         else if (!x.includes(',')) {
//         document.getElementById('demo3').style.display = "block";  
//         document.getElementById("inputText5").value = '';
//         text = "Missing ',' (e.g. EUR,USD)"
//         }

//         else if (x.length > 7) {
//         document.getElementById('demo3').style.display = "block";
//         text = "No more than 7 characters";
//         document.getElementById("inputText5").value = ''; 
//         }

//         else if (!["USD","EUR","JPY","GBP","AUD","CAD","CHF","CNY","HKD","NZD","SEK","KRW","SGD","NOK","MXN","INR","RUB","ZAR","TRY","BRL",
//         "TWD","DKK","PLN","THB","IDR","HUF","ILS","CLP","PHP","AED","CZK","COP","SAR","MYR","RON","CLP","ARS","VND","QAR","KWD"].includes(baseCurrency)) {
//         document.getElementById('demo3').style.display = "block";  
//         document.getElementById("inputText5").value = '';
//         text = "Invalid base currency"

//         }

//         else if (!["AED","AFN","ALL","AMD","AOA","ARS","AUD","AWG","AZN","BAM","BBD","BDT","BGN","BHD","BMD","BND","BOB","BRL","BSD", "BTN", "BWP", "BYN", 
//         "BZD", "CAD", "CDF", "CHF", "CLP", "CNY", "COP", "CRC", "CUC", "CUP", "CVE", "CZK", "DJF", "DKK", "DOP", "DZD", "EGP", "ERN", "ETB", "EUR",
//         "FJD", "FKP", "FOK", "GBP", "GEL", "GGP", "GHS", "GIP", "GMD", "GNF", "GTQ", "GYD", "HKD", "HNL", "HRK", "HTG", "HUF", "IDR", "ILS", "IMP", 
//         "INR", "IQD", "IRR", "ISK", "JMD", "JOD", "JPY","KES","KGS","KHR","KID","KMF","KRW","KWD", "KYD","KZT","LAK","LBP","LKR","LRD","LSL", "LYD",
//         "MAD","MDL","MGA","MKD","MMK","MNT","MOP","MRU","MUR","MVR","MWK","MXN","MYR","MZN","NAD","NGN","NIO","NOK","NPR","NZD","OMR","PAB","PEN",
//         "PGK","PHP","PKR","PLN","PYG","QAR","RON","RSD","RUB","RWF","SAR","SBD","SCR","SDG","SEK","SGD","SHP","SLL","SOS","SRD","SSP","STN","SYP","SZL", 
//         "THB","TJS","TMT","TND","TOP","TRY","TTD","TVD","TWD","TZS","UAH","UGX","USD","UYU","UZS","VES","VND","VUV","WST","YER","ZAR"].includes(quoteCurrency)) {
//         document.getElementById('demo3').style.display = "block";  
//         document.getElementById("inputText5").value = '';
//         text = "Invalid quote currency"

//         }

//         else {
//           text = "Input OK";
//           document.getElementById('demo3').style.display = "none";
//           createLi = true;
//           // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
//           // addingItems();
//           setTimeout(
//               function() {
//             document.getElementById('inputText5').value="";
//               }, 100);          
//         }
//           document.getElementById("demo3").innerHTML = text;
//         }


// Custom messages validation

function customMsgValidate() {

  let x = document.getElementById("inputText13").value;
  let y = document.getElementById("inputText14").value;
  let text;
    if ((x === '') && (y !== '')) {
        createLi = false;
        document.getElementById('demo4').style.display = "block"; 
        text = "No blanks"
        document.getElementById("inputText14").value = '';
        document.getElementById('demo5').style.display = "none";
        }

    else if ((y === '') && (x !== '')){
      createLi = false;
      document.getElementById('demo5').style.display = "block";
      document.getElementById("inputText13").value = '';
      document.getElementById('demo4').style.display = "none";
      text = "No blanks"
    }

    else if ((y === '') && (x === '')){
      createLi = false;
      document.getElementById('demo5').style.display = "block";
      // document.getElementById("inputText13").value = '';
      document.getElementById('demo4').style.display = "block";
      text = "No blanks"
    }

        else if ((x !== '') && (y !== '')) {
          text = "Input OK";
          document.getElementById('demo4').style.display = "none";
          document.getElementById('demo5').style.display = "none";
          createLi = true;
          // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
          // addingItems();          
          setTimeout(
              function() {
            document.getElementById('inputText13').value="";
            document.getElementById('inputText14').value="";
              }, 100);   
        }
          document.getElementById("demo4").innerHTML = text;
          document.getElementById("demo5").innerHTML = text;
        }



// current weather validation

function currentWeatherValidate() {
  var specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|<>\/?~]/;
  let x = document.getElementById("inputText6").value;
  let text;
       if (specialChars.test(x)) {
          document.getElementById('demo6').style.display = "block";
        text = "No special characters allowed";
        document.getElementById("inputText6").value = ''; 
        } 
        else if (x === '') {
        document.getElementById('demo6').style.display = "block";  
        text = "No blanks"
        }
        else if (/\d/.test(x)) {
          document.getElementById('demo6').style.display = "block";
        text = "No numbers allowed";
        document.getElementById("inputText6").value = ''; 
        }  

        else {
          text = "Input OK";
          document.getElementById('demo6').style.display = "none";
          createLi = true;
          // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
          // addingItems();          
          setTimeout(
              function() {
            document.getElementById('inputText6').value="";
              }, 100);          
        }
          document.getElementById("demo6").innerHTML = text;
        }


// Daily forecast validation 

function dailyWeatherValidate() {
  var specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|<>\/?~]/;
  let x = document.getElementById("inputText7").value;
  let text;
       if (specialChars.test(x)) {
          document.getElementById('demo7').style.display = "block";
        text = "No special characters allowed";
        document.getElementById("inputText7").value = ''; 
        } 
        else if (x === '') {
        document.getElementById('demo7').style.display = "block";  
        text = "No blanks"
        }
        else if (/\d/.test(x)) {
          document.getElementById('demo7').style.display = "block";
        text = "No numbers allowed";
        document.getElementById("inputText7").value = ''; 
        }  

        else {
          text = "Input OK";
          document.getElementById('demo7').style.display = "none";
          createLi = true;
          // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
          // addingItems();          
          setTimeout(
              function() {
            document.getElementById('inputText7').value="";
              }, 100);          
        }
          document.getElementById("demo7").innerHTML = text;
        }


// Commodities validation

function commoditiesValidate() {
  createLi = true;
}
// var specialChars = /[`!@#$%^&*()_+\-=\[\]{};':"\\|<>\/?~]/;

//   let x = document.getElementById("inputText20").value;

//   let text;
//     if (x.toUpperCase() != x) {
//       document.getElementById('demo8').style.display = "block";
//       text = "Commodity symbol must be uppercase";
//       document.getElementById("inputText20").value = '';
//       // createLi = false;
//     }
//         else if (x === '') {
//         document.getElementById('demo8').style.display = "block";  
//         text = "No blanks"
//         // createLi = false;
//         }

//         else if (x.includes(' ')) {
//         text = "No spaces";
//         document.getElementById('demo8').style.display = "block";
//         document.getElementById("inputText20").value = ''; 
//         // createLi = false;
//         }

//         else if (specialChars.test(x)) {
//           document.getElementById('demo8').style.display = "block";
//         text = "No special characters allowed";
//         document.getElementById("inputText20").value = ''; 
//         // createLi = false;
//         } 

//         else if (!["ALU","BRENTOIL","LCO","COFFEE","XCU","CORN","COTTON","XAU","IRD","NI","XPD","XPT","XRH","RICE","RUTH","XAG","SOYBEAN",
//           "XDR","SUGAR","TIN","WHEAT","WTIOIL","ZNC","ETHANOL","CPO","NG","COCOA","ROBUSTA","LUMBER","RUBBER","HOG","CATTLE"].includes(x)) {
//         document.getElementById('demo8').style.display = "block";  
//         document.getElementById("inputText20").value = '';
//         text = "Invalid commodity symbol"

//         }

//         else {
//           text = "Input OK";
//           document.getElementById('demo8').style.display = "none";
//           createLi = true;
//           // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
//           setTimeout(
//               function() {
//             document.getElementById('inputText20').value="";
//               }, 100);          
//         }
//           document.getElementById("demo8").innerHTML = text;
//         }


// Indices validation
function indicesValidate() {
  createLi = true
};
// var specialChars = /[`!@#$%&*()_+\-=\[\]{};':"\\|<>\/?~]/;

//   let x = document.getElementById("inputText21").value;

//   let text;
//     if (x.toUpperCase() != x) {
//       document.getElementById('demo9').style.display = "block";
//       text = "Index symbol must be uppercase";
//       document.getElementById("inputText21").value = '';
//       // createLi = false;
//     }
//         else if (x === '') {
//         document.getElementById('demo9').style.display = "block";  
//         text = "No blanks"
//         // createLi = false;
//         }

//         else if (x.includes(' ')) {
//         text = "No spaces";
//         document.getElementById('demo9').style.display = "block";
//         document.getElementById("inputText21").value = ''; 
//         // createLi = false;
//         }

//         else if (specialChars.test(x)) {
//           document.getElementById('demo9').style.display = "block";
//         text = "No special characters allowed";
//         document.getElementById("inputText21").value = ''; 
//         // createLi = false;
//         } 

//         else if (!["^DJI","^GSPC","^NDX","^RUT","^VIX","^GSPTSE","^MXX","^BVSP","^GDAXI","^FTSE","^IBEX","^FCHI","^SSMI","^BFX","^ATX","^AEX","^OMX","^IXIC","FTSEMIB.MI",
//           "^OMXH25","PSI20.LS","^STOXX","^STOXX50E","^N100","^KS11","^NZ50","^AXJO","^STI","000001.SS","399001.SZ","^N225","^NSEI","^BSESN","^HSI","^TWII","^JKSE","PSEI.PS","^SET.BK","XU100.IS"].includes(x)) {
//         document.getElementById('demo9').style.display = "block";  
//         document.getElementById("inputText21").value = '';
//         text = "Invalid index symbol"

//         }
  
//         else {
//           text = "Input OK";
//           document.getElementById('demo9').style.display = "none";
//           createLi = true;
//           // CALL ADDING ITEMS FUNCTION SO THAT ONLY VALIDATED ITEMS CAN GET ADDED TO LIST
//           setTimeout(
//               function() {
//             document.getElementById('inputText21').value="";
//               }, 100);          
//         }
//           document.getElementById("demo9").innerHTML = text;
//         }


// portoflio stuff

  var portfolioCheckbox = document.getElementById("flexCheckChecked4");
  if (portfolioCheckbox.checked) {
    document.getElementById('stocks-portfolio').style.display = "block";
  } else {
    document.getElementById('stocks-portfolio').style.display = "none";
  }


function portfolioValidate() {
  var portfolioCheckbox = document.getElementById("flexCheckChecked4");
  if (portfolioCheckbox.checked) {
    document.getElementById('stocks-portfolio').style.display = "block";
  } else {
    document.getElementById('stocks-portfolio').style.display = "none";
  }
}


// crypto portfolio stuff

var portfolioCryptoCheckbox = document.getElementById("crypto_portfolio_checkbox");
if (portfolioCryptoCheckbox.checked) {
  document.getElementById('crypto-portfolio').style.display = "block";
} else {
  document.getElementById('crypto-portfolio').style.display = "none";
}


function portfolioCryptoValidate() {
  var portfolioCryptoCheckbox = document.getElementById("crypto_portfolio_checkbox");
  if (portfolioCryptoCheckbox.checked) {
    document.getElementById('crypto-portfolio').style.display = "block";
  } else {
    document.getElementById('crypto-portfolio').style.display = "none";
  }
}


// screensaver show div
function showScreensaver() {
  document.getElementById('screensaver-div').style.display = "block";
}
function closeScreensaver() {
  document.getElementById('screensaver-div').style.display = "none";
  document.getElementById('screensaver-saved').style.display = "none";
}



// scheduler show div

function showScheduler() {
  document.getElementById('scheduler-div').style.display = "block";
}

function closeScheduler() {
  document.getElementById('scheduler-div').style.display = "none";
  document.getElementById('saved').style.display = "none";
}

// save scheduler settings

function saveSchedulerSettings() {
  let shutdown_hour = document.getElementById("shutdown-hour-select").value;
  let shutdown_minute = document.getElementById("shutdown-minute-select").value;
  let shutdown_enabled = document.getElementById("shutdown-enabled").checked;

  let reboot_hour = document.getElementById("reboot-hour-select").value;
  let reboot_minute = document.getElementById("reboot-minute-select").value;
  let reboot_enabled = document.getElementById("reboot-enabled").checked;

  let brightness1_hour = document.getElementById("brightness1-hour1-select").value;
  let brightness1_minute = document.getElementById("brightness1-minute1-select").value;
  let brightness1_enabled = document.getElementById("brightness1-enabled").checked;
  let brightness1_bright = document.getElementById("brightness1-bright-select").value;

  let brightness2_hour = document.getElementById("brightness2-hour1-select").value;
  let brightness2_minute = document.getElementById("brightness2-minute1-select").value;
  let brightness2_enabled = document.getElementById("brightness2-enabled").checked;
  let brightness2_bright = document.getElementById("brightness2-bright-select").value;

  let brightness3_hour = document.getElementById("brightness3-hour1-select").value;
  let brightness3_minute = document.getElementById("brightness3-minute1-select").value;
  let brightness3_enabled = document.getElementById("brightness3-enabled").checked;
  let brightness3_bright = document.getElementById("brightness3-bright-select").value;

  let brightness4_hour = document.getElementById("brightness4-hour1-select").value;
  let brightness4_minute = document.getElementById("brightness4-minute1-select").value;
  let brightness4_enabled = document.getElementById("brightness4-enabled").checked;
  let brightness4_bright = document.getElementById("brightness4-bright-select").value;

  let timezone = document.getElementById("timezone-select").value;

  let settings = {
    shutdown_hour: shutdown_hour,
    shutdown_minute: shutdown_minute,
    shutdown_enabled: shutdown_enabled,
    reboot_hour: reboot_hour,
    reboot_minute: reboot_minute,
    reboot_enabled: reboot_enabled,
    timezone: timezone,
    brightness1_hour: brightness1_hour,
    brightness1_minute: brightness1_minute,
    brightness1_bright: brightness1_bright,
    brightness1_enabled: brightness1_enabled,
    brightness2_hour: brightness2_hour,
    brightness2_minute: brightness2_minute,
    brightness2_bright: brightness2_bright,
    brightness2_enabled: brightness2_enabled,
    brightness3_hour: brightness3_hour,
    brightness3_minute: brightness3_minute,
    brightness3_bright: brightness3_bright,
    brightness3_enabled: brightness3_enabled,
    brightness4_hour: brightness4_hour,
    brightness4_minute: brightness4_minute,
    brightness4_bright: brightness4_bright,
    brightness4_enabled: brightness4_enabled,
  };

  console.log(settings);
  fetch("/saveSchedulerSettings", {
    method: "POST",
    body: JSON.stringify(settings),
  });
  document.getElementById('saved').style.display = "block";
}


// CHANGE TOP 20 OR TOP 10 WORLD GOLF RANKING
function setTop20() {
  let top20 = document.getElementById("golf-ranking-number").value;
  fetch("/setTop20or10", {
    method: "POST",
    body: JSON.stringify(top20),
  });
}


let theIndexOfMsg = null

// get custom message values
function getCustomMsg(value) {
  let messaged = value;
  const the_thing = document.getElementById("inputText13");
  const the_msg = document.getElementById("inputText14");
  const t_color = document.getElementById("inputScrollSpeed16");
  const b_color = document.getElementById("inputScrollSpeed19BG");
  const t_size = document.getElementById("inputScrollSpeed17");
  the_thing.value = messaged;

  fetch("/fetchCustomMsg", {
    method: "POST",
    body: JSON.stringify(messaged),
  })
  .then(response => response.json())
  .then(data => {
    // Update the elements with the retrieved information
    the_msg.value = data.text;
    t_color.value = data.text_colour;
    b_color.value = data.background_colour;
    t_size.value = data.size;
    theIndexOfMsg = data.index;
  })
  .catch(error => {
    console.error('Error:', error);
  });
}



// get custom message values
function updateSelectedMsg(){
  const msg_name = document.getElementById("inputText13").value;
  const msg_text = document.getElementById("inputText14").value;

  if ((msg_name !== '') && (msg_text !== '')) {
    const text_color = document.getElementById("inputScrollSpeed16").value;
    const background_color = document.getElementById("inputScrollSpeed19BG").value;
    const text_size = document.getElementById("inputScrollSpeed17").value;
    document.getElementById('demo4').style.display = "none";
    document.getElementById('demo5').style.display = "none";
    fetch("/updateSelectedMsg", {
      method: "POST",
      body: JSON.stringify({'name': msg_name, 'text': msg_text, 'text_colour': text_color, 'size': text_size, 'background_colour': background_color, 'index':theIndexOfMsg}),
    });
    
    const ulElement = document.getElementById("messages-features");
    const activeListItem = ulElement.querySelector("li.active");
    activeListItem.innerText = msg_name;
    activeListItem.classList.remove("active");
    theIndexOfMsg = null;
    document.getElementById('updated-message-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('updated-message-p').style.display = "none";
    }, 5000);

  }
  else {
    customMsgValidate();
  }
}



// get stock portfolio values
function getStockSymbol(value) {
  let stock_symbol = value;
  const stock_thing = document.getElementById("inputText3");
  const stock_shares = document.getElementById("inputText8");
  const stock_cost = document.getElementById("inputText9");
  const stock_date = document.getElementById("inputText10");
  const stock_portfolio_check = document.getElementById("flexCheckChecked4");
  stock_thing.value = stock_symbol;

  if (stock_portfolio_check.checked) {
  fetch("/fetchStockPortfolio", {
     method: "POST",
     body: JSON.stringify(stock_symbol),
  })
  .then(response => response.json())
  .then(data => {
    if (JSON.stringify(data) !== '{}') {
    // Update the elements with the retrieved information
    stock_shares.value = data.shares;
    stock_cost.value = data.cost;
    stock_date.value = data.day;
   } else {
     stock_shares.value = '';
     stock_cost.value = '';
     stock_date.value = '';
    }
   })
   .catch(error => {
    console.error('Error:', error);
   });
}}


// get crypto portfolio values
function getCryptoSymbol(value) {
  let crypto_symbol = value;
  const crypto_thing = document.getElementById("inputText4");
  const crypto_shares = document.getElementById("cryptoshares");
  const crypto_cost = document.getElementById("cryptocost");
  const crypto_date = document.getElementById("cryptodate");
  const crypto_portfolio_check = document.getElementById("crypto_portfolio_checkbox");

  crypto_thing.value = crypto_symbol;

  if (crypto_portfolio_check.checked) {
  fetch("/fetchCryptoPortfolio", {
    method: "POST",
    body: JSON.stringify(crypto_symbol),
  })
  .then(response => response.json())
  .then(data => {
    if (JSON.stringify(data) !== '{}') {
    // Update the elements with the retrieved information
    crypto_shares.value = data.shares;
    crypto_cost.value = data.cost;
    crypto_date.value = data.day;
  } else {
    crypto_shares.value = '';
    crypto_cost.value = '';
    crypto_date.value = '';
   }
  })
  .catch(error => {
    console.error('Error:', error);
  });
}}



// remove stock portfolio position
function removeStockPorftolio() {
  
  let remove_stock_symbol = document.getElementById('inputText3').value;
  
  if (remove_stock_symbol !== '') {
    document.getElementById('inputText9').value = '';
    document.getElementById('inputText8').value = '';
    document.getElementById('inputText10').value = '';
    
    fetch("/deletePortfolioPosition", {
      method: "POST",
      body: JSON.stringify(remove_stock_symbol),
    });
    
    document.getElementById('stockremoved-p').innerHTML = 'Stock Position Removed!';
    document.getElementById('removed-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-stock-p').style.display = "none";
    }, 5000);
  } 
  
  else {
    document.getElementById('stockremoved-p').innerHTML = 'No symbol selected.';
    document.getElementById('removed-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-stock-p').style.display = "none";
    }, 5000);
  }
  
}


// update stock portfolio position with new values
function updateStockPorftolio() {

  let update_stock_cost = document.getElementById('inputText9').value;
  let update_stock_shares = document.getElementById('inputText8').value;
  let update_symbol = document.getElementById('inputText3').value;
  let update_stock_days = document.getElementById('inputText10').value;

  let update_stock_settings = {
    shares:update_stock_shares,
    cost:update_stock_cost,
    symbol:update_symbol,
    days:update_stock_days,
  };

  if ((update_symbol === '') || (update_symbol === ' ')) {
    document.getElementById('stockremoved-p').innerHTML = 'No symbol selected.';
    document.getElementById('removed-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-stock-p').style.display = "none";
    }, 5000);
  }
  else if ((update_stock_cost === ' ') || (update_stock_shares === ' ') || (update_stock_days === ' ')) {
    document.getElementById('stockremoved-p').innerHTML = 'No spaces.';
    document.getElementById('removed-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-stock-p').style.display = "none";
    }, 5000);
  }
  else if ((isNaN(update_stock_cost)) || (isNaN(update_stock_shares))) {
    document.getElementById('stockremoved-p').innerHTML = 'No text characters, only numbers.';
    document.getElementById('removed-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-stock-p').style.display = "none";
    }, 5000);
  }
  else if ((!update_stock_days.includes('-')) && (update_stock_days !== '')) {
    document.getElementById('stockremoved-p').innerHTML = 'Incorrect date format, it should be YYYY-MM-DD';
    document.getElementById('removed-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-stock-p').style.display = "none";
    }, 5000);
  }
  else if (((update_stock_shares !== '') || (update_stock_cost !== '') || (update_stock_days !== '')) && ((update_stock_shares === '') || (update_stock_cost === '') || (update_stock_days === ''))) {
    document.getElementById('stockremoved-p').innerHTML = 'Some fields are empty.';
    document.getElementById('removed-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-stock-p').style.display = "none";
    }, 5000);
  }
  else {
    fetch("/savePortfolioSettings", {
    method: "POST",
    body: JSON.stringify(update_stock_settings),
    });

    document.getElementById('updated-stock-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('updated-stock-p').style.display = "none";
    }, 5000);
  }
}


// remove crypto portfolio position
function removeCryptoPorftolio() {
  
  let remove_crypto_symbol = document.getElementById('inputText4').value;
  
  if (remove_crypto_symbol !== '') {
    document.getElementById('cryptoshares').value = '';
    document.getElementById('cryptocost').value = '';
    document.getElementById('cryptodate').value = '';
    
    fetch("/deletePortfolioPositionCrypto", {
      method: "POST",
      body: JSON.stringify(remove_crypto_symbol),
    });
    
    document.getElementById('cryptoremoved-p').innerHTML = 'Crypto Position Removed!';
    document.getElementById('removed-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-crypto-p').style.display = "none";
    }, 5000);
  } 
  
  else {
    document.getElementById('cryptoremoved-p').innerHTML = 'No symbol selected.';
    document.getElementById('removed-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-crypto-p').style.display = "none";
    }, 5000);
  }
  
}


// update crypto portfolio position with new values
function updateCryptoPorftolio() {

  let update_crypto_cost = document.getElementById('cryptocost').value;
  let update_crypto_shares = document.getElementById('cryptoshares').value;
  let update_crypto_symbol = document.getElementById('inputText4').value;
  let update_crypto_days = document.getElementById('cryptodate').value;

  let update_crypto_settings = {
    shares:update_crypto_shares,
    cost:update_crypto_cost,
    symbol:update_crypto_symbol,
    days:update_crypto_days,
  };

  if ((update_crypto_symbol === '') || (update_crypto_symbol === ' ')) {
    document.getElementById('cryptoremoved-p').innerHTML = 'No symbol selected.';
    document.getElementById('removed-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-crypto-p').style.display = "none";
    }, 5000);
  }
  else if ((update_crypto_cost === ' ') || (update_crypto_shares === ' ') || (update_crypto_days === ' ')) {
    document.getElementById('cryptoremoved-p').innerHTML = 'No spaces.';
    document.getElementById('removed-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-crypto-p').style.display = "none";
    }, 5000);
  }
  else if ((isNaN(update_crypto_cost)) || (isNaN(update_crypto_shares))) {
    document.getElementById('cryptoremoved-p').innerHTML = 'No text characters, only numbers.';
    document.getElementById('removed-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-crypto-p').style.display = "none";
    }, 5000);
  }
  else if ((!update_crypto_days.includes('-')) && (update_crypto_days !== '')) {
    document.getElementById('cryptoremoved-p').innerHTML = 'Incorrect date format, it should be YYYY-MM-DD';
    document.getElementById('removed-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-crypto-p').style.display = "none";
    }, 5000);
  }
  else if (((update_crypto_shares !== '') || (update_crypto_cost !== '') || (update_crypto_days !== '')) && ((update_crypto_shares === '') || (update_crypto_cost === '') || (update_crypto_days === ''))) {
    document.getElementById('cryptoremoved-p').innerHTML = 'Some fields are empty.';
    document.getElementById('removed-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('removed-crypto-p').style.display = "none";
    }, 5000);
  }
  else {
    fetch("/savePortfolioCryptoSettings", {
    method: "POST",
    body: JSON.stringify(update_crypto_settings),
    });

    document.getElementById('updated-crypto-p').style.display = "block";
    setTimeout(function hideElement() {
      document.getElementById('updated-crypto-p').style.display = "none";
    }, 5000);
  }
}



// SAVE FEATURES TO DISPLAY PROMPT FUNCTIONS
var savePromptTimeout;
var isSavePromptRunning = false;
function displaySavePrompt() {
  // Check if the function is already running
  if (isSavePromptRunning) {
    return;
  }
  isSavePromptRunning = true;
  document.getElementById('save-prompt-message').style.display = "block";
  var savePrompt = document.getElementById('save-prompt-p');  
  // Store the original color
  var originalColor = savePrompt.style.color;
  // Set the new color for the transition effect
  savePrompt.style.color = "yellow";
  // Clear any existing timeout
  clearTimeout(savePromptTimeout);
  // Add a delay before reverting back to the original color
  savePromptTimeout = setTimeout(function() {
    savePrompt.style.color = originalColor;
    isSavePromptRunning = false;
  },300); // 0.3 seconds
}

function closeSavePrompt() {
  document.getElementById('save-prompt-message').style.display = "none";
}

function savePrompt() {
  saveSettings();
  document.getElementById('save-prompt-message').style.display = "none";
  setTimeout(
      function() {
        document.getElementById('saved-msg-feedback').style.display = "block";
        fetch("/savePromptStartStop", {
          method: "PUT",
        });
      }, 100);
  setTimeout(
      function() {
        document.getElementById('saved-msg-feedback').style.display = "none";
      }, 3000);
}


// SAVE FEATURE SETTINGS PROMPT FUNCTIONS
var savePromptTimeout2;
var isSavePromptRunning2 = false;
function displaySavePrompt2() {
  // Check if the function is already running
  if (isSavePromptRunning2) {
    return;
  }
  isSavePromptRunning2 = true;
  document.getElementById('save-feature-prompt-message').style.display = "block";
  var savePrompt2 = document.getElementById('save-feature-prompt-p');  
  // Store the original color
  var originalColor2 = savePrompt2.style.color;
  // Set the new color for the transition effect
  savePrompt2.style.color = "yellow";
  // Clear any existing timeout
  clearTimeout(savePromptTimeout2);
  // Add a delay before reverting back to the original color
  savePromptTimeout2 = setTimeout(function() {
    savePrompt2.style.color = originalColor2;
    isSavePromptRunning2 = false;
  },300); // 0.3 seconds
}

function closeFeatureSavePrompt() {
  document.getElementById('save-feature-prompt-message').style.display = "none";
}

function featureSavePrompt() {
  saveSettings();
  document.getElementById('save-feature-prompt-message').style.display = "none";
  setTimeout(
      function() {
        document.getElementById('saved-feature-msg-feedback').style.display = "block";
      }, 100);
  setTimeout(
      function() {
        document.getElementById('saved-feature-msg-feedback').style.display = "none";
      }, 3000);
}



const pageIDs = ['Page1', 'Page2', 'Page3', 'Page4', 'Page5', 'Page6', 'Page7', 'Page8', 'Page9', 'Page10', 'Page11', 'Page12', 'Page13',
  'Page14', 'Page15', 'Page16', 'Page17', 'Page18', 'Page19', 'Page20', 'Page21', 'Page22'];

for (const pageID of pageIDs) {
  // Select the parent div
  const parentDiv = document.getElementById(pageID);
  // Add event listeners to select menus
  const excludedIds = ['base-select', 'quote-select', 'commodities-items', 'indices-items', 'inputTransition73', 
    'inputTransition83', 'inputTransition93', 'inputTransition103', 'inputTransition2222', 'jokes-categories', 'golf-ranking-number', 
    'inputScrollSpeed16', 'inputScrollSpeed17', 'inputScrollSpeed19BG', 'market-categories', 'sector-categories', 'place-categories'];
 
  const selectMenus = parentDiv.querySelectorAll('select');
  selectMenus.forEach(selectMenu => {
    const id = selectMenu.id;
    if (!excludedIds.includes(id)) {
      selectMenu.addEventListener('change', function(event) {
        displaySavePrompt2();
      });
    }
  });
  // Add event listeners for input text fields specifically for page22 (r/place)
  if (pageID === 'Page22') {
    const inputForms = parentDiv.querySelectorAll('input[type="text"]');
    inputForms.forEach(inputForm => {
      inputForm.addEventListener('input', function(event) {
        displaySavePrompt2();
      });
    });
  }
  // Add event listeners for sliders specifically for page22 (r/place)
  if (pageID === 'Page22') {
    const slider = parentDiv.querySelector('#myRange');
    slider.addEventListener('input', function(event) {
      displaySavePrompt2();
    });
  }
  // Add event listeners to input checkboxes
  const inputForms = parentDiv.querySelectorAll('input[type="checkbox"]');
  inputForms.forEach(inputForm => {
    inputForm.addEventListener('input', function(event) {
      displaySavePrompt2();
    });
  }); 
}



// for drop down menu, change feature settings prompt text

var selectMenu = document.getElementById("drop");
var pElement = document.getElementById("save-feature-prompt-p");
var pElement2 = document.getElementById("saved-feature-msg-feedback");
// Add an event listener for the "change" event
selectMenu.addEventListener("change", function() {
  document.getElementById('save-feature-prompt-message').style.display = "none";
  var selectedOption = selectMenu.selectedOptions[0];
  var selectedValue = selectedOption.textContent;
  pElement.textContent = selectedValue + " Settings - Changes detected.";
  pElement2.innerHTML = selectedValue + " Settings -" + "<br>" + " Saved!";
});


// load selected network item into ssid input
function sendNetworkToSSID(element) {
  var networksList = document.getElementById('networks-list');
  var lis = networksList.querySelectorAll("li");
  var ssid_input = document.getElementById('wifi-ssid-input');
  var value = element.innerText;
  lis.forEach(function(li) {
    li.classList.remove("active");
  });
  ssid_input.value = value;
  element.classList.add("active");
}


// scan nearby networks
function scanNetworks() {
  var networksListReset = document.getElementById("networks-list");
  networksListReset.innerHTML = "";
  var listItem2 = document.createElement("li");
  listItem2.textContent = "Scanning networks...";
  networksListReset.appendChild(listItem2);
  fetch("/scanNetworks", {
    method: "PUT",
  })
    .then(response => response.text())
    .then(data => {
      // Parse the response data as JSON
      var networks = JSON.parse(data);
      networksListReset.innerHTML = "";
      // Iterate over the networks object and create list items
      for (var ssid in networks) {
        var listItem = document.createElement("li");
        listItem.textContent = ssid;
        listItem.onclick = function() {
          sendNetworkToSSID(this);
        };
        networksListReset.appendChild(listItem);
      }
    })
    .catch(error => console.log(error));

}


// UPLOAD CUSTOM STOCK LOGO
function uploadStockLogo() {
  const fileInput_stocks = document.getElementById("stocks-logo-upload-browse");
  if (fileInput_stocks.value !== "") {
    const stock_file = fileInput_stocks.files[0];
    const stock_upload_msg = document.getElementById("stocklogoupload");

    const formData_stocks = new FormData();
    formData_stocks.append('file', stock_file)
    fetch('/upload_stocks', {
      method: 'POST',
      body: formData_stocks
    })
    stock_upload_msg.style.display = "block";
    setTimeout(function hideElement() {
      stock_upload_msg.style.display = "none";
    }, 5000);
    fileInput_stocks.value = "";
  }
}

// UPLOAD CUSTOM CRYPTO LOGO
function uploadCryptoLogo() {
  const fileInput_crypto = document.getElementById("crypto-logo-upload-browse");
  if (fileInput_crypto.value !== "") {
    const crypto_file = fileInput_crypto.files[0];
    const crypto_upload_msg = document.getElementById("cryptologoupload");

    const formData_crypto = new FormData();
    formData_crypto.append('file', crypto_file);
    fetch('/upload_crypto', {
      method: 'POST',
      body: formData_crypto
    });
    crypto_upload_msg.style.display = "block";
    setTimeout(function hideElement() {
      crypto_upload_msg.style.display = "none";
    }, 5000);
    fileInput_crypto.value = "";
  }
}



// TO GET SLIDER VALUE FOR IMAGE WIDTH IN R/PLACE
var slider = document.getElementById("myRange");
var output = document.getElementById("slider-value");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
}


// save screensaver settings
function saveScreensaverSettings() {
  let clock1_timecolor = document.getElementById("clock1-timecolor").value;
  let clock1_weekdaycolor = document.getElementById("clock1-weekdaycolor").value;
  let clock1_datecolor = document.getElementById("clock1-datecolor").value;
  let clock1_timezone = document.getElementById("clock1-timezone").value;
  let clock1_brightness = document.getElementById("clock1-brightness").value;
  let clock1_displaypm = document.getElementById("clock1-displaypm").checked;
  let clock1_displayseconds = document.getElementById("clock1-displayseconds").checked;
  let clock1_12hour = document.getElementById("clock1-12hour").checked;

  let clock2_timecolor = document.getElementById("clock2-timecolor").value;
  let clock2_datecolor = document.getElementById("clock2-datecolor").value;
  let clock2_timezone = document.getElementById("clock2-timezone").value;
  let clock2_brightness = document.getElementById("clock2-brightness").value;
  let clock2_displaypm = document.getElementById("clock2-displaypm").checked;
  let clock2_12hour = document.getElementById("clock2-12hour").checked;

  let worldclock_citycolor = document.getElementById("worldclock-citycolor").value;
  let worldclock_brightness = document.getElementById("worldclock-brightness").value;
  let worldclock_displaypm = document.getElementById("worldclock-displaypm").checked;
  let worldclock_displayseconds = document.getElementById("worldclock-displayseconds").checked;
  let worldclock_12hour = document.getElementById("worldclock-12hour").checked;

  let settings = {
    clock1_timecolor: clock1_timecolor,
    clock1_weekdaycolor: clock1_weekdaycolor,
    clock1_datecolor: clock1_datecolor,
    clock1_timezone: clock1_timezone,
    clock1_brightness: clock1_brightness,
    clock1_displaypm: clock1_displaypm,
    clock1_displayseconds: clock1_displayseconds,
    clock1_12hour: clock1_12hour,
    clock2_timecolor: clock2_timecolor,
    clock2_datecolor: clock2_datecolor,
    clock2_timezone: clock2_timezone,
    clock2_brightness: clock2_brightness,
    clock2_displaypm: clock2_displaypm,
    clock2_12hour: clock2_12hour,
    worldclock_citycolor: worldclock_citycolor,
    worldclock_brightness: worldclock_brightness,
    worldclock_displaypm: worldclock_displaypm,
    worldclock_displayseconds: worldclock_displayseconds,
    worldclock_12hour: worldclock_12hour,
  };

  console.log(settings);
  fetch("/saveScreensaverSettings", {
    method: "POST",
    body: JSON.stringify(settings),
  });
  document.getElementById('screensaver-saved').style.display = "block";
}