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

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

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

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

  allFeaturesList = [
    stocksFeatures,
    cryptoFeatures,
    forexFeatures,
    currentWeatherFeatures,
    dailyForecastFeatures,
    newsFeatures,
    upcomingGamesFeatures,
    pastGamesFeatures,
    liveGamesFeatures,
    teamStatsFeatures,
    imagesFeatures,
    gifsFeatures,
    messagesFeatures,
  ];
};

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];
      if (item.getAttribute("class") == "active") {
        if (item.parentElement.getAttribute("id") == "images-features") {
          let getImages = JSON.parse(localStorage.getItem("customImages"));

          let filter = getImages.filter(
            (value) => value.fileName !== item.innerText
          );
          localStorage.setItem("customImages", JSON.stringify(filter));
        } else if (item.parentElement.getAttribute("id") == "gifs-features") {
          let getGifs = JSON.parse(localStorage.getItem("customGifs"));

          let filter = getGifs.filter(
            (value) => value.fileName !== item.innerText
          );
          localStorage.setItem("customGifs", JSON.stringify(filter));
        } else if (
          item.parentElement.getAttribute("id") == "messages-features"
        ) {
          let getMsgs = JSON.parse(localStorage.getItem("customMsg"));

          let filter = getMsgs.filter(
            (value) => value.messageName !== item.innerText
          );
          localStorage.setItem("customMsg", JSON.stringify(filter));
        }
        item.remove();
      }
    }
  });
});

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

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

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

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

// features input text
var stocksText = document.getElementById("inputText3");
var cryptoText = document.getElementById("inputText4");
var forexText = document.getElementById("inputText5");
var currentWeatherText = document.getElementById("inputText6");
var dailyForecastText = document.getElementById("inputText7");
var messagesText = document.getElementById("inputText13");

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

// 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 allFeaturesTextAddBtn = [
  stocksTextAddBtn,
  cryptoTextAddBtn,
  forexTextAddBtn,
  currentWeatherTextAddBtn,
  dailyForecastTextAddBtn,
  null,
  null,
  null,
  null,
  null,
  null,
  null,
  messagesTextAddBtn,
];

allFeaturesTextAddBtn.map((value, index) => {
  if (value !== null) {
    value.addEventListener("click", () => {
      if (value == messagesTextAddBtn) {
        // 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");
          tag.innerHTML = allFeaturesText[index].value;
          allFeatures[index].appendChild(tag);
        }
        changeVarValue();
        addEventOnFeaturesList();
      } else {
        var tag = document.createElement("li");
        tag.innerHTML = allFeaturesText[index].value;
        allFeatures[index].appendChild(tag);
        changeVarValue();
        addEventOnFeaturesList();
      }
    });
  }
});

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

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



var stopButton = document.getElementById("screensaver-btn");
stopButton.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;
}

// toggle professional
dispFormatButton.addEventListener("click", () => {
  opt = getSelected(displayFormats);
  fetch("/display_format", {
    method: "PUT",
    body: JSON.stringify(opt),
  });
});


// 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",
  ];
  let pageNum = features.indexOf(feature) + 1;
  let pageSelector = "Page" + pageNum.toString();

  let page = document.getElementById(pageSelector);

  // these common to all settings
  let speed = getSelected(page.querySelectorAll(".speed-select")[0]);
  let animation = getSelected(page.querySelectorAll(".animation-select")[0]);

  var settings = { feature: feature, speed: speed, 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;
  }
  
  //send uploaded images and gifs
  if (pageNum == 11) {
    var data = new FormData();

    for (var i = 0; i < uploaded_images.length; i++) {
      data.append(uploaded_images[i].name, uploaded_images[i]);
    }

    fetch("/upload", {
      method: "POST",
      body: data,
    });
  } else if (pageNum == 12) {
    var data = new FormData();

    for (var i = 0; i < uploaded_GIFs.length; i++) {
      data.append(uploaded_GIFs[i].name, uploaded_GIFs[i]);
    }

    fetch("/upload", {
      method: "POST",
      body: data,
    });
  }
 
  settings = { ...settings, ...s }; // merge both sets of settings

  return settings;
}


function saveSettings() {
  
  displaying = getDisplaying();
  feature_settings = getFeatureSettings();
  console.log(displaying)
  fetch("/save", {
    method: "PUT",
    body: JSON.stringify({'displaying': displaying, 'feature_settings': feature_settings}),
  });

  
}


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

// gets the stock, crypto or forex specific settings
function getTradingSettings(page) {
  // get all the tick boxes
  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 chart = page.querySelectorAll(".chart-select")[0].checked;
  let title = page.querySelectorAll(".title-select")[0].checked;

  let symbols_el = page.querySelectorAll(".symbol-list")[0];
  let symbols = getListItems(symbols_el);

  let settings = {
    percent: percent,
    point: point,
    logos: no_logos,
    chart: chart,
    title: title,
    symbols: symbols,
  };

  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 colour = getSelected(page.querySelectorAll(".colour-select")[0]);
  let city_colour = getSelected(
    page.querySelectorAll(".city-colour-select")[0]
  );
  let title = page.querySelectorAll(".title-select")[0].checked;

  settings = {
    temp: temp,
    wind_speed: speed,
    colour: colour,
    city_colour: city_colour,
    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;

  return settings;
}

function getNewsSettings(page) {
  let country = getSelected(page.querySelectorAll(".country-select")[0]);
  let category = getSelected(page.querySelectorAll(".category-select")[0]);
  let title = page.querySelectorAll(".title-select")[0].checked;
  let use_sources = page.querySelectorAll(".sources-select")[0].checked;

  let sources_el = page.querySelectorAll(".sources-list")[0];
  let sources = getListItems(sources_el);
  settings = {
    country: country,
    category: category,
    title: title,
    use_sources: use_sources,
    sources: sources,
  };
  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);
        }
      }

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

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

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

// 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;
  localStorage.setItem("displayFormat", 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";
    });
  }
});

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

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