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 allFeaturesList = [
  stocksFeatures,
  cryptoFeatures,
  forexFeatures,
  currentWeatherFeatures,
  dailyForecastFeatures,
  newsFeatures,
  upcomingGamesFeatures,
  pastGamesFeatures,
  liveGamesFeatures,
  teamStatsFeatures,
  imagesFeatures,
  gifsFeatures,
  messagesFeatures,
  commoditiesFeatures,
  indicesFeatures,
  moviesFeatures,
  ipoFeatures,
  economicFeatures,
];

// 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 allFeaturesRemoveBtns = [
  stocksRemoveBtn,
  cryptoRemoveBtn,
  forexRemoveBtn,
  currentWeatherRemoveBtn,
  dailyForecastRemoveBtn,
  newsRemoveBtn,
  upcomingGamesRemoveBtn,
  pastGamesRemoveBtn,
  liveGamesRemoveBtn,
  teamStatsRemoveBtn,
  imagesRemoveBtn,
  gifsRemoveBtn,
  messagesRemoveBtn,
  commoditiesRemoveBtn,
  indicesRemoveBtn,
  moviesRemoveBtn,
  ipoRemoveBtn,
  economicRemoveBtn,
];
// 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 allFeaturesIncreaseBtns = [
  stocksincreaseBtn,
  cryptoincreaseBtn,
  forexincreaseBtn,
  currentWeatherincreaseBtn,
  dailyForecastincreaseBtn,
  newsincreaseBtn,
  upcomingGamesincreaseBtn,
  pastGamesincreaseBtn,
  liveGamesincreaseBtn,
  teamStatsincreaseBtn,
  imagesincreaseBtn,
  gifsincreaseBtn,
  messagesincreaseBtn,
  commoditiesincreaseBtn,
  indicesincreaseBtn,
  moviesincreaseBtn,
  ipoincreaseBtn,
  economicincreaseBtn,
];

// 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 allFeaturesDecreaseBtns = [
  stocksDecreaseBtn,
  cryptoDecreaseBtn,
  forexDecreaseBtn,
  currentWeatherDecreaseBtn,
  dailyForecastDecreaseBtn,
  newsDecreaseBtn,
  upcomingGamesDecreaseBtn,
  pastGamesDecreaseBtn,
  liveGamesDecreaseBtn,
  teamStatsDecreaseBtn,
  imagesDecreaseBtn,
  gifsDecreaseBtn,
  messagesDecreaseBtn,
  commoditiesDecreaseBtn,
  indicesDecreaseBtn,
  moviesDecreaseBtn,
  ipoDecreaseBtn,
  economicDecreaseBtn,
];

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");
  
  allFeaturesList = [
    stocksFeatures,
    cryptoFeatures,
    forexFeatures,
    currentWeatherFeatures,
    dailyForecastFeatures,
    newsFeatures,
    upcomingGamesFeatures,
    pastGamesFeatures,
    liveGamesFeatures,
    teamStatsFeatures,
    imagesFeatures,
    gifsFeatures,
    messagesFeatures,
    commoditiesFeatures,
    indicesFeatures,
    moviesFeatures,
    ipoFeatures,
    economicFeatures,
  ];
};

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();
      }
    }
  });

  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();
      }
    }
  });

  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();
      }
    }
  });

  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();
      }
    }
  });
};

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("inputScrollSpeed19");
            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", "");
    }
  }
});

// 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", "");
    }
  }
});

// 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", "");
      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", "");
      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),
          });  
      }
      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),
          });  
      }
      else if (item.getAttribute("class") == "active") {
          item.remove();
          uploaded_images = [];
          uploaded_GIFs = [];
      }
    }
  });
});

// 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", "");
      }
    }
  });
});

// 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", "");
        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 allFeatures = [
  stocks,
  crypto1,
  forex,
  currentWeather,
  dailyForecast,
  news,
  upcomingGames,
  pastGames,
  liveGames,
  teamStats,
  images,
  gifs,
  messages,
  commodities,
  indices,
  movies,
  ipos,
  economics,
];

// 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 allFeaturesSelectBox = [
  null,
  null,
  null,
  null,
  null,
  newsSelect,
  upcomingGamesSelect,
  pastGamesSelect,
  liveGamesSelect,
  teamStatsSelect,
  null,
  null,
  null,
  null,
  null,
  moviesSelect,
  null,
  economicSelect,
];

// 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 allFeaturesSelectAddBtn = [
  null,
  null,
  null,
  null,
  null,
  newsAddBtn,
  upcomingGamesAddBtn,
  pastGamesAddBtn,
  liveGamesAddBtn,
  teamStatsAddBtn,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  economicAddBtn,
];

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();
    });
  }
});

// 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,
];
// 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,
];

// 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,
];

// 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,
];


var allFeaturesLimit = [
  200,
  100,
  100,
  20,
  20,
  null,
  null,
  null,
  null,
  null,
  20,
  20,
  20,
  30,
  40,
  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("inputScrollSpeed19").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();
            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();
            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",
  ];
  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;
  }
  
  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;
    settings = {
      percent: percent,
      point: point,
      logos: no_logos,
      title: title,
      symbols: symbols,
      chart: portfolio,
    };
  }
  else if (whatFeature == 1) {
    let prepost = page.querySelectorAll(".prepost-select")[0].checked;
    let portfolio = page.querySelectorAll(".portfolio-select")[0].checked;
    settings = {
      prepost: prepost,
      percent: percent,
      point: point,
      logos: no_logos,
      title: title,
      symbols: symbols,
      chart: portfolio,
    };    
  }
  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",
  ];
  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",
  ];
  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();
    });
  }
});

//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;
}


// 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";
    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";
    });
  }
});


// 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 <= 18; 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";
  }
}





// 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("inputScrollSpeed19");
  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("inputScrollSpeed19").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('removed-stock-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('removed-stock-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_stock_shares !== '') && (update_stock_cost !== '') && (update_stock_days !== '') && (update_symbol !== '')) {
    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);

  } else {
    stockValidate();
  }
}



// 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_shares !== '') && (update_crypto_cost !== '') && (update_crypto_days !== '') && (update_crypto_symbol !== '')) {
    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);

  } else {
    cryptoValidate();
  }
}