if(Debug.debug)
  console.log("[popup.js] loading popup script!");

document.getElementById("uw-version").textContent = browser.runtime.getManifest().version;

var Menu = {};
// Menu.noVideo    = document.getElementById("no-videos-display");
Menu.extensionSettings = document.getElementById('_menu_settings_ext');
Menu.siteSettings      = document.getElementById('_menu_settings_site');
Menu.videoSettings     = document.getElementById('_menu_settings_video');
Menu.about             = document.getElementById('_menu_about')

var MenuTab = {};
MenuTab.extensionSettings = document.getElementById('_menu_tab_settings_ext');
MenuTab.siteSettings      = document.getElementById('_menu_tab_settings_site');
MenuTab.videoSettings     = document.getElementById('_menu_tab_settings_video');
MenuTab.about             = document.getElementById('_menu_tab_about')

//#region ExtPanel
var ExtPanel = {};
ExtPanel.extOptions = {};
ExtPanel.extOptions.blacklist = document.getElementById("_ext_global_options_blacklist");
ExtPanel.extOptions.whitelist = document.getElementById("_ext_global_options_whitelist");
ExtPanel.extOptions.disabled  = document.getElementById("_ext_global_options_disabled");
ExtPanel.arOptions = {};
ExtPanel.arOptions.blacklist   = document.getElementById("_ar_global_options_blacklist");
ExtPanel.arOptions.whitelist  = document.getElementById("_ar_global_options_whitelist");
ExtPanel.arOptions.disabled    = document.getElementById("_ar_global_options_disabled");
ExtPanel.alignment = {};
ExtPanel.alignment.left       = document.getElementById("_align_ext_left");
ExtPanel.alignment.center     = document.getElementById("_align_ext_center");
ExtPanel.alignment.right      = document.getElementById("_align_ext_right");
ExtPanel.stretch = {};
ExtPanel.stretch['0']         = document.getElementById("_stretch_global_none");
ExtPanel.stretch['1']         = document.getElementById("_stretch_global_basic");
ExtPanel.stretch['2']         = document.getElementById("_stretch_global_hybrid");
ExtPanel.stretch['3']         = document.getElementById("_stretch_global_conditional");
//#endregion
//#region SitePanel
var SitePanel = {};
SitePanel.extOptions = {};
SitePanel.extOptions.enabled   = document.getElementById("_ext_site_options_whitelist");
SitePanel.extOptions.default   = document.getElementById("_ext_site_options_default");
SitePanel.extOptions.disabled  = document.getElementById("_ext_site_options_blacklist");
SitePanel.arOptions = {};
SitePanel.arOptions.disabled   = document.getElementById("_ar_site_options_disabled");
SitePanel.arOptions.enabled    = document.getElementById("_ar_site_options_enabled");
SitePanel.arOptions.default    = document.getElementById("_ar_site_options_default");
SitePanel.alignment = {};
SitePanel.alignment.left       = document.getElementById("_align_site_left");
SitePanel.alignment.center     = document.getElementById("_align_site_center");
SitePanel.alignment.right      = document.getElementById("_align_site_right");
SitePanel.alignment.default    = document.getElementById("_align_site_default");
SitePanel.stretch = {};
SitePanel.stretch['-1']        = document.getElementById("_stretch_site_default")
SitePanel.stretch['0']         = document.getElementById("_stretch_site_none")
SitePanel.stretch['1']         = document.getElementById("_stretch_site_basic")
SitePanel.stretch['2']         = document.getElementById("_stretch_site_hybrid")
SitePanel.stretch['3']         = document.getElementById("_stretch_site_conditional")
//#endregion
//#region VideoPanel
var VideoPanel = {};
VideoPanel.alignment = {};
VideoPanel.alignment.left   = document.getElementById("_align_video_left");
VideoPanel.alignment.center = document.getElementById("_align_video_center");
VideoPanel.alignment.right  = document.getElementById("_align_video_right");

// labels on buttons
VideoPanel.buttonLabels = {};
VideoPanel.buttonLabels.crop = {};
VideoPanel.buttonLabels.crop['auto-ar'] = document.getElementById("_b_changeAr_auto-ar_key");
VideoPanel.buttonLabels.crop.reset      = document.getElementById("_b_changeAr_reset_key");
VideoPanel.buttonLabels.crop['219']     = document.getElementById("_b_changeAr_219_key");
VideoPanel.buttonLabels.crop['189']     = document.getElementById("_b_changeAr_189_key");
VideoPanel.buttonLabels.crop['169']     = document.getElementById("_b_changeAr_169_key");
VideoPanel.buttonLabels.crop.custom     = document.getElementById("_b_changeAr_custom_key");
VideoPanel.buttonLabels.zoom = {};

// buttons: for toggle, select
VideoPanel.buttons = {};
VideoPanel.buttons.zoom = {};
VideoPanel.buttons.zoom.showShortcuts = document.getElementById("_zoom_b_show_shortcuts");
VideoPanel.buttons.zoom.hideShortcuts = document.getElementById("_zoom_b_hide_shortcuts");
VideoPanel.buttons.changeAr = {};
VideoPanel.buttons.changeAr.showCustomAr = document.getElementById("_changeAr_b_show_customAr");
VideoPanel.buttons.changeAr.hideCustomAr = document.getElementById("_changeAr_b_hide_customAr");

// inputs (getting values)
VideoPanel.inputs = {};
VideoPanel.inputs.customCrop       = document.getElementById("_input_custom_ar");
VideoPanel.inputs.zoomSlider       = document.getElementById("_input_zoom_slider");
VideoPanel.inputs.allowPan         = document.getElementById("_input_zoom_site_allow_pan");

// various labels
VideoPanel.labels = {};
VideoPanel.labels.zoomLevel        = document.getElementById("_label_zoom_level");

// misc stuff
VideoPanel.misc = {};
VideoPanel.misc.zoomShortcuts      = document.getElementById("_zoom_shortcuts");
VideoPanel.misc.customArChanger    = document.getElementById("_changeAr_customAr");

//#endregion

var selectedMenu = "";
var hasVideos = false;

var _config; 
var _changeAr_button_shortcuts = { "autoar":"none", "reset":"none", "219":"none", "189":"none", "169":"none", "custom":"none" }

var comms = new Comms();
var settings = new Settings(undefined, () => updateConfig());

var site = undefined;

var port = browser.runtime.connect({name: 'popup-port'});
port.onMessage.addListener( (m,p) => processReceivedMessage(m,p));


async function processReceivedMessage(message, port){
  if (Debug.debug) {
    console.log("[popup.js] received message", message)
  }

  if(message.cmd === 'set-current-site'){
    if (site !== message.site) {
      port.postMessage({cmd: 'get-current-zoom'});
    }
    site = message.site;
    loadConfig(message.site);
  } else if (message.cmd === 'set-current-zoom') {
    setCurrentZoom(message.zoom);
  }
}

async function updateConfig() {
  if (Debug.debug) {
    console.log("[popup.js] settings changed. updating popup if site exists. Site:", site);
  }

  if (site) {
    loadConfig(site);
  }
}

async function setCurrentZoom(scale) {
  if(Debug.debug) {
    console.log("[popup.js::setCurrentZoom] we're setting zoom:", scale);
  }

  VideoPanel.inputs.zoomSlider.value = Math.log2(scale);
  VideoPanel.labels.zoomLevel.textContent = (scale * 100).toFixed();
}

function hideWarning(warn){
  document.getElementById(warn).classList.add("hidden");
}

function stringToKeyCombo(key_in){
  var keys_in = key_in.split("_");
  var keys_out = "";
  
  for(key of keys_in){
    if(key == "ctrlKey")
      keys_out += "ctrl + ";
    else if(key == "shiftKey")
      keys_out += "shift + ";
    else if(key == "altKey")
      keys_out += "alt + ";
    else
      keys_out += key;
  }
  
  return keys_out;
}

function configurePopupTabs(site) {
  // Determine which tabs can we touch.
  // If extension is disabled, we can't touch 'site settings' and 'video settings'
  // If extension is enabled, but site is disabled, we can't touch 'video settings'
  var extensionEnabled = settings.extensionEnabled();
  var extensionEnabledForSite = settings.extensionEnabledForSite(site);

  MenuTab.siteSettings.classList.add('disabled');

  if (extensionEnabledForSite) {
    MenuTab.videoSettings.classList.remove('disabled');
  }
  if (extensionEnabled) {
    MenuTab.videoSettings.classList.remove('disabled');
  }

  // we assume that these two can be shown. If extension or site are disabled, we'll
  // add 'disabled' class later down the line:
  document.getElementById("_site_only_when_site_enabled").classList.remove("disabled");
  document.getElementById("_ext_only_when_ext_enabled").classList.remove("disabled");

  if (! extensionEnabledForSite) {
    MenuTab.videoSettings.classList.add('disabled');

    // also disable extra settings for site
    document.getElementById("_site_only_when_site_enabled").classList.add("disabled");

    if (! extensionEnabled) {
      MenuTab.siteSettings.classList.add('disabled');
      
      // also disable extra settings for extension
      document.getElementById("_ext_only_when_ext_enabled").classList.add("disabled");
      if (!selectedMenu) {
        openMenu('extensionSettings');
      }
    } else {
      MenuTab.siteSettings.classList.remove('disabled');
      if (!selectedMenu) {
        openMenu('siteSettings');
      }
    }
  } else {
    MenuTab.videoSettings.classList.remove('disabled');
    MenuTab.siteSettings.classList.remove('disabled');

    // if popup isn't being opened for the first time, there's no reason to switch
    // we're already in this tab
    if (!selectedMenu) {
      openMenu('videoSettings');
    }
  }
}

function configureGlobalTab() {
  if (Debug.debug) {
    console.log("[popup.js] Configuring global tab (ExtPanel).",
    "\nextension mode:  ", settings.active.extensionMode,
    "\narDetect mode:   ", settings.active.arDetect.mode,
    "\nvideo float mode:", settings.active.miscFullscreenSettings.videoFloat,
    "\nstretch mode:    ", settings.active.stretch.initialMode,
    "\n..")
  }


  for(var button in ExtPanel.extOptions) {
    ExtPanel.extOptions[button].classList.remove("selected");
  }
  for(var button in ExtPanel.arOptions) {
    ExtPanel.arOptions[button].classList.remove("selected");
  }
  for(var button in ExtPanel.alignment) {
    ExtPanel.alignment[button].classList.remove("selected");
  }
  for(var button in ExtPanel.stretch) {
    ExtPanel.stretch[button].classList.remove("selected");
  }

  ExtPanel.extOptions[settings.active.extensionMode].classList.add("selected");
  ExtPanel.arOptions[settings.active.arDetect.mode].classList.add("selected");
  ExtPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
  ExtPanel.stretch[settings.active.stretch.initialMode].classList.add("selected");
}

function configureSitesTab(site) {
  if (Debug.debug) {
    console.log("[popup.js] Configuring sites tab (SitePanel).",
    "\nsite:            ", site,
    "\nextension mode:    ", settings.active.sites[site] ? settings.active.sites[site].status : 'no site-special settings for this site',
    "\narDetect mode:   ", settings.active.sites[site] ? settings.active.sites[site].arStatus : 'no site-special settings for this site',
    "\nvideo float mode:", settings.active.sites[site] ? settings.active.sites[site].videoFloat : 'no site-special settings for this site',
    "\ndefault ar:      ", settings.active.sites[site] ? settings.active.sites[site].ar : 'no site-special settings for this site',
    "\nstretch mode:    ", settings.active.sites[site] ? settings.active.sites[site].stretch : 'no site-special settings for this site',
    "\n...")
  }

  for(const button in SitePanel.extOptions) {
    SitePanel.extOptions[button].classList.remove("selected");
  }
  for(const button in SitePanel.arOptions) {
    SitePanel.arOptions[button].classList.remove("selected");
  }
  for(const button in SitePanel.alignment) {
    SitePanel.alignment[button].classList.remove("selected");
  }
  for(const button in SitePanel.stretch) {
    SitePanel.stretch[button].classList.remove("selected");
  }

  if (settings.active.sites[site] && settings.active.sites[site]) {
    console.log("settings for", site, "exist!")
    SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
    SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
  } else {
    SitePanel.extOptions.default.classList.add("selected");
    SitePanel.arOptions.default.classList.add("selected");
  }

  // optional settings:
  if (settings.active.sites[site] && settings.active.sites[site].videoAlignment) {
    SitePanel.alignment[settings.active.sites[site].videoAlignment].classList.add("selected");
  } else {
    SitePanel.alignment.default.classList.add('selected');
  }

  if(settings.active.sites[site] && settings.active.sites[site].stretch !== undefined) {  // can be 0
    SitePanel.stretch[settings.active.sites[site].stretch].classList.add("selected");
  } else {
    SitePanel.stretch['-1'].classList.add("selected");
  }
}

function configureVideoTab() {
  // process keyboard shortcuts for crop settings
  if(settings.active.keyboard.shortcuts){
    for(var key in settings.active.keyboard.shortcuts){
      var shortcut = settings.active.keyboard.shortcuts[key];
      var keypress = stringToKeyCombo(key);
      
      try{
        if(shortcut.action == "crop"){
          if (key == 'q') {
            _changeAr_button_shortcuts["custom"] = keypress;
          }
          else if(shortcut.arg == 2.0){
            _changeAr_button_shortcuts["189"] = keypress;
          }
          else if(shortcut.arg == 2.39){
            _changeAr_button_shortcuts["219"] = keypress;
          }
          else if(shortcut.arg == 1.78){
            _changeAr_button_shortcuts["169"] = keypress;
          }
          else if(shortcut.arg == "fitw") {
            _changeAr_button_shortcuts["fitw"] = keypress;
          }
          else if(shortcut.arg == "fith") {
            _changeAr_button_shortcuts["fith"] = keypress;
          }
          else if(shortcut.arg == "reset") {
            _changeAr_button_shortcuts["reset"] = keypress;
          }
        }
        else if(shortcut.action == "auto-ar") {
            _changeAr_button_shortcuts["auto-ar"] = keypress;
        }
      }
      catch(Ex){
        //do nothing if key doesn't exist
      }
    }

    // fill in custom aspect ratio
    if (settings.active.keyboard.shortcuts.q) {
      document.getElementById("_input_custom_ar").value = settings.active.keyboard.shortcuts.q.arg;
    }

    for(var key in _changeAr_button_shortcuts){
      try{
        document.getElementById(`_b_changeAr_${key}_key`).textContent = `(${_changeAr_button_shortcuts[key]})`;
      }
      catch(ex){
        
      }
    }
  }

  
  // todo: get min, max from settings
  VideoPanel.inputs.zoomSlider.min = Math.log2(0.5);
  VideoPanel.inputs.zoomSlider.max = Math.log2(8);
  VideoPanel.inputs.zoomSlider.value = 0;

  VideoPanel.inputs.zoomSlider.addEventListener('input', (event) => {
    var newZoom = Math.pow(2, VideoPanel.inputs.zoomSlider.value);
    // TODO: send new zoom value to current tab
    VideoPanel.labels.zoomLevel.textContent = (newZoom * 100).toFixed();

    var command = {
      cmd: 'set-zoom',
      zoom: newZoom
    };

    port.postMessage(command);
  });
}

async function loadConfig(site){

  console.log("NEW CONFIG!")

  if (Debug.debug) {
    console.log("\n\n-------------------------------------\n[popup.js::loadConfig] loading config. conf object:", settings.active);
  }

  document.getElementById("_menu_tab_settings_site_site_label").textContent = site;


  configurePopupTabs(site);
  configureGlobalTab();
  configureSitesTab(site);
  configureVideoTab();

  if (Debug.debug) {
    console.log("[popup.js::loadConfig] config loaded\n-----------------------\n\n");
  }
}

async function getSite(){
  if (Debug.debug) {
    console.log("[popup.js] requesting current site");
  }
  
  port.postMessage({cmd: 'get-current-site'});
}

function openMenu(menu){
  if(Debug.debug){
    console.log("[popup.js::openMenu] trying to open menu", menu, "\n element: ", Menu[menu]);
  }
  
  for(var m in Menu){
    if(Menu[m])
      Menu[m].classList.add("hidden");
  }
  for(var m in MenuTab){
    if(MenuTab[m])
      MenuTab[m].classList.remove("selected");
  }
  
  Menu[menu].classList.remove("hidden"); 
  MenuTab[menu].classList.add("selected");

  selectedMenu = menu;

}


function getCustomAspectRatio() {
  var textBox_value = document.getElementById("_input_custom_ar").value.trim();
  // validate value - this spaghett will match the following stuff
  //   [int]/[int]
  //   1:[float]
  //   [float]
  if (! /(^[0-9]+\/[0-9]+$|^(1:)?[0-9]+\.?[0-9]*$)/.test(textBox_value)) {
    return false; // validation failed!
  }

  if (! isNaN(parseFloat(textBox_value))) {
    return parseFloat(textBox_value);
  }
  if (/\//.test(textBox_value)) {
    const vars = textBox_value.split('/');
    return parseInt(vars[0])/parseInt(vars[1]); // non-ints shouldn't make it past regex
  }
  if (/:/.test(textBox_value)) {
    const vars = textBox_value.split(':');
    return parseFloat(vars[1]);
  }

   // we should never come this far. 
   // If we do, then there's something wrong with the input and our regex
  return false;
}

function validateCustomAr(){
  const valid = getCustomAspectRatio() !== false;
  const inputField = document.getElementById("_input_custom_ar");
  const valueSaveButton = document.getElementById("_b_changeAr_save_custom_ar");

  if (valid) {
    inputField.classList.remove("invalid-input");
    valueSaveButton.classList.remove("disabled-button");
  } else {
    inputField.classList.add("invalid-input");
    valueSaveButton.classList.add("disabled-button");
  }
}

function validateAutoArTimeout(){
  const inputField = document.getElementById("_input_autoAr_timer");
  const valueSaveButton = document.getElementById("_b_autoar_save_autoar_timer");

  if (! isNaN(parseInt(inputField.value.trim().value()))) {
    inputField.classList.remove("invalid-input");
    valueSaveButton.classList.remove("disabled-button");
  } else {
    inputField.classList.add("invalid-input");
    valueSaveButton.classList.add("disabled-button");
  }
}

document.addEventListener("click", (e) => {
  
  
  function getcmd(e){
    var command = {};
    command.sender = "popup";
    command.receiver = "uwbg";
    
    if(e.target.classList.contains("disabled"))
      return;
    
    if(e.target.classList.contains("menu-item")){

      if(Debug.debug) {
        console.log("[popup.js::eventListener] clicked on a tab. Class list:", e.target.classList);
      }

      if(e.target.classList.contains("_menu_tab_settings_ext")){
        openMenu("extensionSettings");
      } else if(e.target.classList.contains("_menu_tab_settings_site")){
        openMenu("siteSettings");
      } else if(e.target.classList.contains("_menu_tab_settings_video")){
        openMenu("videoSettings");
      } else if(e.target.classList.contains("_menu_tab_about")){
        openMenu("about");
      }
      
      // don't send commands
      return;
    }
    if(e.target.classList.contains("_ext")) {
      var command = {};
      if(e.target.classList.contains("_ext_global_options")){
        if (e.target.classList.contains("_blacklist")) {
          settings.active.extensionMode = "blacklist";
        } else if (e.target.classList.contains("_whitelist")) {
          settings.active.extensionMode = "whitelist";
        } else {
          settings.active.extensionMode = "disabled";
        }
        settings.save();
        return;
      } else if (e.target.classList.contains("_ext_site_options")) {
        var mode; 
        if(e.target.classList.contains("_blacklist")){
          mode = "disabled";
        } else if(e.target.classList.contains("_whitelist")) {
          mode = "enabled";
        } else {
          mode = "default";
        }
        
        if(settings.active.sites[site]) {
          settings.active.sites[site].status = mode;
          settings.active.sites[site].statusEmbedded = mode;
        } else {
          settings.active.sites[site] = {
            status: mode,
            statusEmbedded: mode,
            arStatus: 'default',
            type: 'user-defined'
          }
        }
        settings.save();
        return;
      }
    }
    if(e.target.classList.contains("_changeAr")){
      if(e.target.classList.contains("_ar_auto")){
        command.cmd = "autoar-start";
        command.enabled = true;
        return command;
      }
      if(e.target.classList.contains("_ar_reset")){
        command.cmd = "set-ar";
        command.ratio = "reset";
        return command;
      }
      if(e.target.classList.contains("_ar_fitw")){
        command.cmd = "set-ar";
        command.ratio = "fitw";
        return command;
      }
      if(e.target.classList.contains("_ar_fitw")){
        command.cmd = "set-ar";
        command.ratio = "fith";
        return command;
      }
      if(e.target.classList.contains("_ar_219")){
        command.cmd = "set-ar";
        command.ratio = 2.39;
        return command;
      }
      if(e.target.classList.contains("_ar_189")){
        command.cmd = "set-ar";
        command.ratio = 2.0;
        return command;
      }
      if(e.target.classList.contains("_ar_169")){
        command.cmd = "set-ar";
        command.ratio = 1.78;
        return command;
      }
      if(e.target.classList.contains("_ar_1610")){
        command.cmd = "set-ar";
        command.ratio = 1.6;
        return command;
      }
      if(e.target.classList.contains("_ar_custom")){
        ratio = getCustomAspectRatio();
        command.cmd = "set-ar";
        command.ratio = ratio;
        return ratio !== false ? command : null;
      }
      if(e.target.classList.contains("_ar_save_custom_ar")){
        ratio = getCustomAspectRatio();
        command.cmd = "set-custom-ar";
        command.ratio = ratio;
        return ratio !== false ? command : null; // this validates input
      }
    }
    if(e.target.classList.contains("_stretch")){
      // stretch, global
      if (e.target.classList.contains("_ar_stretch_global")) {
        if (e.target.classList.contains("_none")) {
          settings.active.stretch.initialMode = 0;
        } else if (e.target.classList.contains("_basic")) {
          settings.active.stretch.initialMode = 1;
        } else if (e.target.classList.contains("_hybrid")) {
          settings.active.stretch.initialMode = 2;
        } else if (e.target.classList.contains("_conditional")) {
          settings.active.stretch.initialMode = 3;
        }
        settings.save();
        return;
      }

      // stretch, site
      if (e.target.classList.contains("_ar_stretch_site")) {
        if (e.target.classList.contains("_none")) {
          settings.active.sites[site].stretch = 0;
        } else if (e.target.classList.contains("_basic")) {
          settings.active.sites[site].stretch = 1;
        } else if (e.target.classList.contains("_hybrid")) {
          settings.active.sites[site].stretch = 2;
        } else if (e.target.classList.contains("_conditional")) {
          settings.active.sites[site].stretch = 3;
        } else {
          delete(settings.active.sites[site].stretch);
        }
        settings.save();
        return;
      }

      if(e.target.classList.contains("_ar_stretch_none")) {
        command.cmd = "set-stretch";
        command.mode = "NO_STRETCH";
      } else if(e.target.classList.contains("_ar_stretch_basic")) {
        command.cmd = "set-stretch";
        command.mode = "BASIC";
      } else if(e.target.classList.contains("_ar_stretch_hybrid")) {
        command.cmd = "set-stretch";
        command.mode = "HYBRID";
      } else if(e.target.classList.contains("_ar_stretch_conditional")) {
        command.cmd = "set-stretch";
        command.mode = "CONDITIONAL";
      }
      return command;
    }
    if(e.target.classList.contains("_autoAr")){
      if(e.target.classList.contains("_ar_global_options")){
        if (e.target.classList.contains("_blacklist")) {
          settings.active.arDetect.mode = "blacklist";
        } else if (e.target.classList.contains("_whitelist")) {
          settings.active.arDetect.mode = "whitelist";
        } else {
          settings.active.arDetect.mode = "disabled";
        }
        settings.save();
        return;
      } else if (e.target.classList.contains("_save_autoAr_timer")) {
        var value = parseInt(document.getElementById("_input_autoAr_timer").value.trim());
        
        if(! isNaN(value)){
          var timeout = parseInt(value);
          settings.active.arDetect.timer_playing = timeout;
          settings.save();
        }
        return;
      } else if (e.target.classList.contains("_ar_site_options")) {
        var mode;
        if(e.target.classList.contains("_disabled")){
          mode = "disabled";
        } else if(e.target.classList.contains("_enabled")) {
          mode = "enabled";
        } else {
          mode = "default";
        }

        if(settings.active.sites[site]) {
          settings.active.sites[site].arStatus = mode;
        } else {
          settings.active.sites[site] = {
            status: settings.active.extensionMode,
            statusEmbedded: settings.active.extensionMode,
            arStatus: mode,
            type: 'user-defined'
          }
        }
        settings.save();
        return;
      }
    }
    

    if (e.target.classList.contains("_align_ext")) {
      if (e.target.classList.contains("_align_ext_left")) {
        settings.active.miscFullscreenSettings.videoFloat = 'left';
      } else if (e.target.classList.contains("_align_ext_center")) {
        settings.active.miscFullscreenSettings.videoFloat = 'center';
      } else if (e.target.classList.contains("_align_ext_right")) {
        settings.active.miscFullscreenSettings.videoFloat = 'right';
      }
    }
    if (e.target.classList.contains("_align_site")) {
      if (!site) {
        return;
      }
      if (e.target.classList.contains("_align_site_left")) {
        settings.active.sites[site].videoAlignment = 'left';
      } else if (e.target.classList.contains("_align_site_center")) {
        settings.active.sites[site].videoAlignment = 'center';
      } else if (e.target.classList.contains("_align_site_right")) {
        settings.active.sites[site].videoAlignment = 'right';
      } else {
        // default case — remove this object
        delete(settings.active.sites[site].videoAlignment);
      }

      settings.save();
      return;
    }
    if (e.target.classList.contains("_align")) {
      command.cmd = "set-alignment";

      if (e.target.classList.contains("_align_left")) {
        command.mode = 'left';
      } else if (e.target.classList.contains("_align_center")) {
        command.mode = 'center';
      } else if (e.target.classList.contains("_align_right")) {
        command.mode = 'right';
      }
      
      return command;
    }

    //#region zoom buttons
    if (e.target.classList.contains("_zoom_show_shortcuts")) {
      VideoPanel.misc.zoomShortcuts.classList.remove("hidden");
      VideoPanel.buttons.zoom.hideShortcuts.classList.remove("hidden");
      VideoPanel.buttons.zoom.showShortcuts.classList.add("hidden");
      return;
    }
    if (e.target.classList.contains("_zoom_hide_shortcuts")) {
      VideoPanel.misc.zoomShortcuts.classList.add("hidden");
      VideoPanel.buttons.zoom.hideShortcuts.classList.add("hidden");
      VideoPanel.buttons.zoom.showShortcuts.classList.remove("hidden");
      return;
    }
    if (e.target.classList.contains("_zoom_reset")) {
      VideoPanel.labels.zoomLevel.textContent = 100;
      VideoPanel.inputs.zoomSlider.value = 0;         // log₂(1)
      command.cmd = 'set-zoom';
      command.zoom = 1;
      return;
    }
    //#endregion
    //#region show/hide custom ar
    if (e.target.classList.contains("_changeAr_show_customAr")) {
      VideoPanel.misc.customArChanger.classList.remove("hidden");
      VideoPanel.buttons.changeAr.showCustomAr.classList.add("hidden");
      VideoPanel.buttons.changeAr.hideCustomAr.classList.remove("hidden");
      return;
    }
    if (e.target.classList.contains("_changeAr_hide_customAr")) {
      VideoPanel.misc.customArChanger.classList.add("hidden");
      VideoPanel.buttons.changeAr.showCustomAr.classList.remove("hidden");
      VideoPanel.buttons.changeAr.hideCustomAr.classList.add("hidden");
      return;
    }
    //#endregion
  }
  
  var command = getcmd(e);  
  if(command)
    port.postMessage(command);
  
  return true;
});




async function sleep(t) {
  return new Promise( (resolve,reject) => {
    setTimeout(() => resolve(), t);
  });
}

async function popup_init() {
  // let's init settings and check if they're loaded
  await settings.init();

  if (Debug.debug) {
    console.log("[popup] Are settings loaded?", settings)
  }


  const customArInputField = document.getElementById("_input_custom_ar");
  const autoarFrequencyInputField = document.getElementById("_input_autoAr_timer");

  customArInputField.addEventListener("blur", (event) => {
    validateCustomAr();
  });
  customArInputField.addEventListener("mouseleave", (event) => {
    validateCustomAr();
  });

  // autoarFrequencyInputField.addEventListener("blur", (event) => {
  //   validateAutoArTimeout();
  // });
  // autoarFrequencyInputField.addEventListener("mouseleave", (event) => {
  //   validateAutoArTimeout();
  // });

  hideWarning("script-not-running-warning");
  while (true) {
    console.log("GETTING SITE")
    getSite();
    await sleep(5000);
  }
}

popup_init();