// waiting for al of the element on the page to load
    document.addEventListener('DOMContentLoaded', () => {
      const geModal = document.querySelector('.ge-modal');
      const geOverlay = document.querySelector('.ge-switcher-overlay');
      const geOpenModalBtn = document.querySelectorAll('.ge-btn-open');
      const geCloseModalBtn = document.querySelector('.ge-btnClose');
      const geSubmitBtn = document.querySelector('.localization-button--submit');
      const geForm = document.querySelector('.localization-form');
      const geCountrySelector = document.querySelector('.geSelectedCountry');
      const geCancelBtn = document.querySelector('.ge-btnCancel');

      // Help function to add click event, takes 2 argument the element we want to click on and the function to run
      const addClickEventListener = (elm, func) => {
        elm.addEventListener('click', func);
      };

      // Help function - Sorting the dropdown options array alpahbetically
      const sortSelect = (selElem) => {
        var tmpAry = new Array();
        for (var i = 0; i < selElem.options.length; i++) {
          tmpAry[i] = new Array();
          tmpAry[i][0] = selElem.options[i].text;
          tmpAry[i][1] = selElem.options[i].value;
        }
        tmpAry.sort();
        while (selElem.options.length > 0) {
          selElem.options[0] = null;
        }
        for (var i = 0; i < tmpAry.length; i++) {
          var op = new Option(tmpAry[i][0], tmpAry[i][1]);
          selElem.options[i] = op;
        }
        return;
      };

      // open modal function
      const geOpenModal = () => {
        sortSelect(geCountrySelector);
        try {
          let country = Shopify.country;
          for (let i = 0; i < geCountrySelector.options.length; i++) {
            if (geCountrySelector.options[i].value == country) {
              geCountrySelector.options[i].selected = true;
            }
          }
        } catch (e) {
          console.log(e.message);
        }

        geModal.classList.remove('ge-hidden');
        geOverlay.classList.remove('ge-hidden');
        geModal.style.display = 'flex';
        geOverlay.style.display = 'block';
      };

      // close modal function
      const geCloseModal = () => {
        geModal.classList.add('ge-hidden');
        geOverlay.classList.add('ge-hidden');
        geModal.style.display = 'none';
        geOverlay.style.display = 'none';
      };

      // Submitting the form handler function
      const onFormSubmit = (e) => {
        e.preventDefault();

        /* UNCOMMENT THE BELOW CODE WHEN THERE ARE OTHER STORES TO REDIRECT INTO */

        /*****************************************************************************/
        //for example
        /* let countriesStores = [
          {
            countryCode: "DE",
            href: "https://www.some-site-url.de" 
          },
        ];

        for (let i = 0; i < countriesStores.length; i++) {
          if (geCountrySelector.value === countriesStores[i].countryCode) {
            window.location.href = countriesStores[i].href;
            return;
          }
        }
      */

        /*****************************************************************************/
        geForm ? geForm.submit() : null;
      };

      // Close modal when the Esc key is pressed
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !modal.classList.contains('ge-hidden')) {
          geCloseModal();
        }
      });

      // Adding eventListeners
      for (let geBtn of geOpenModalBtn) {
        addClickEventListener(geBtn, geOpenModal);
      }
      addClickEventListener(geCloseModalBtn, geCloseModal);
      addClickEventListener(geOverlay, geCloseModal);
      addClickEventListener(geCancelBtn, geCloseModal);
      addClickEventListener(geSubmitBtn, onFormSubmit);
    });