From 76b5f6eca1bf112b91e1fd92d56554774440ae40 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Sun, 16 Sep 2018 14:14:16 +0200
Subject: [PATCH] Fixed switching menus

---
 js/conf/ExtensionConf.js |   9 +
 js/lib/Settings.js       |   7 +
 res/popup/js/popup.js    | 354 +++++++++++++++++++++------------------
 res/popup/popup.html     |  55 +++---
 4 files changed, 239 insertions(+), 186 deletions(-)

diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js
index 816d5d3..e809fe4 100644
--- a/js/conf/ExtensionConf.js
+++ b/js/conf/ExtensionConf.js
@@ -201,6 +201,15 @@ var ExtensionConf = {
   //    status: <option>              // should extension work on this site?
   //    arStatus: <option>            // should we do autodetection on this site?
   //    statusEmbedded: <option>      // reserved for future... maybe
+  //    
+  //    ar?: <ratio>                  // automatically apply this aspect ratio on this side. Use extension defaults if undefined.
+  //    stretch? <stretch mode>       // automatically stretch video on this site in this manner
+  //    videoAlignment? <left|center|right>
+  //
+  //    type: <official|community|user>  // 'official' — blessed by Tam. 
+  //                                     // 'community' — blessed by reddit.
+  //                                     // 'user' — user-defined (not here)
+  //    override: <true|false>           // override user settings for this site on update
   // } 
   //  
   // Veljavne vrednosti za možnosti 
diff --git a/js/lib/Settings.js b/js/lib/Settings.js
index f4d7e89..9f1bc3d 100644
--- a/js/lib/Settings.js
+++ b/js/lib/Settings.js
@@ -215,6 +215,13 @@ class Settings {
     }
   }
 
+  extensionEnabled(){
+    return this.active.extensionMode !== 'disabled'
+  }
+
+  extensionEnabledForSite(site) {
+    return this.canStartExtension(site);
+  }
 
   canStartAutoAr(site) {
     if (!site) {
diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js
index 3b84ed0..c82a184 100644
--- a/res/popup/js/popup.js
+++ b/res/popup/js/popup.js
@@ -17,38 +17,66 @@ MenuTab.videoSettings     = document.getElementById('_menu_tab_settings_video');
 MenuTab.about             = document.getElementById('_menu_tab_about')
 
 var ExtPanel = {};
-ExtPanel.globalOptions = {};
-ExtPanel.globalOptions.blacklist = document.getElementById("_ext_global_options_blacklist");
-ExtPanel.globalOptions.whitelist = document.getElementById("_ext_global_options_whitelist");
-ExtPanel.globalOptions.disabled  = document.getElementById("_ext_global_options_disabled");
-ExtPanel.siteOptions = {};
-ExtPanel.siteOptions.disabled = document.getElementById("_ext_site_options_blacklist");
-ExtPanel.siteOptions.enabled  = document.getElementById("_ext_site_options_whitelist");
-ExtPanel.siteOptions.default  = document.getElementById("_ext_site_options_default");
+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.disabled   = document.getElementById("_ar_global_options_blacklist");
+ExtPanel.arOptions.enabled    = document.getElementById("_ar_global_options_whitelist");
+ExtPanel.arOptions.default    = document.getElementById("_ar_global_options_default");
+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");
 
-var AutoArPanel = {};
-AutoArPanel.globalOptions = {};
-AutoArPanel.globalOptions.blacklist = document.getElementById("_ar_global_options_blacklist");
-AutoArPanel.globalOptions.whitelist = document.getElementById("_ar_global_options_whitelist");
-AutoArPanel.globalOptions.disabled  = document.getElementById("_ar_global_options_disabled");
-AutoArPanel.siteOptions = {};
-AutoArPanel.siteOptions.disabled = document.getElementById("_ar_site_options_disabled");
-AutoArPanel.siteOptions.enabled  = document.getElementById("_ar_site_options_enabled");
-AutoArPanel.siteOptions.default  = document.getElementById("_ar_site_options_default");
+var SitePanel = {};
+SitePanel.extOptions = {};
+SitePanel.extOptions.blacklist = document.getElementById("_ext_site_options_blacklist");
+SitePanel.extOptions.whitelist = document.getElementById("_ext_site_options_whitelist");
+SitePanel.extOptions.disabled  = document.getElementById("_ext_site_options_disabled");
+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_ext_left");
+SitePanel.alignment.center     = document.getElementById("_align_ext_center");
+SitePanel.alignment.right      = document.getElementById("_align_ext_right");
 
-var ArPanel = {};
-ArPanel.alignment = {};
-ArPanel.alignment.left   = document.getElementById("_align_left");
-ArPanel.alignment.center = document.getElementById("_align_center");
-ArPanel.alignment.right  = document.getElementById("_align_right");
-ArPanel.autoar = {};
 
-var StretchPanel = {};
-StretchPanel.global = {};
-StretchPanel.global.none        = document.getElementById("_stretch_global_none");
-StretchPanel.global.basic       = document.getElementById("_stretch_global_basic");
-StretchPanel.global.hybrid      = document.getElementById("_stretch_global_hybrid");
-StretchPanel.global.conditional = document.getElementById("_stretch_global_conditional");
+var VideoPanel = {};
+VideoPanel.alignment = {};
+VideoPanel.alignment.left   = document.getElementById("_align_left");
+VideoPanel.alignment.center = document.getElementById("_align_center");
+VideoPanel.alignment.right  = document.getElementById("_align_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")
+
+// 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");
 
 
 var selectedMenu = "";
@@ -101,121 +129,93 @@ function stringToKeyCombo(key_in){
   return keys_out;
 }
 
-async function loadConfig(site){
+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);
 
-  if(Debug.debug)
-    console.log("[popup.js::loadConfig] loading config. conf object:", settings.active, "\n\n\n\n\n\n\n\n-------------------------------------");
-  
-  // -----------------------
-  //#region tab-disabled
-  //
-  // if extension is disabled on current site, we can't do shit. Therefore, the following tabs will be disabled:
-  //      * AutoAR options
-  //      * Crop settings
-  //      * Stretch settings
-  var canStartExtension = settings.canStartExtension(site);
+  MenuTab.siteSettings.classList.add('disabled');
 
-  if (canStartExtension) {
-    MenuTab.arSettings.classList.remove('disabled');
-    MenuTab.autoAr.classList.remove('disabled');
-    MenuTab.stretchSettings.classList.remove('disabled');
+  if (extensionEnabledForSite) {
+    MenuTab.videoSettings.classList.remove('disabled');
+  }
+  if (extensionEnabled) {
+    MenuTab.videoSettings.classList.remove('disabled');
+  }
 
-    // only switch when popup is being opened for the first time
-    if(! selectedMenu) {
-      openMenu('arSettings');
+  if (! extensionEnabledForSite) {
+    MenuTab.videoSettings.classList.add('disabled');
+    if (! extensionEnabled) {
+      MenuTab.siteSettings.classList.add('disabled');
+      if (!selectedMenu) {
+        openMenu('extensionSettings');
+      }
+    } else {
+      MenuTab.siteSettings.classList.remove('disabled');
+      if (!selectedMenu) {
+        openMenu('siteSettings');
+      }
     }
   } else {
-    MenuTab.arSettings.classList.add('disabled');
-    MenuTab.autoAr.classList.add('disabled');
-    MenuTab.stretchSettings.classList.add('disabled');
+    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('thisSite');
+    if (!selectedMenu) {
+      openMenu('videoSettings');
     }
   }
+}
 
-  //#endregion
-  //
-  // ----------------------
-  //#region extension-basics - SET BASIC EXTENSION OPTIONS
-  if(Debug.debug)
-    console.log("EXT: site is:", site, "|settings for this site: ", (site && settings.active.sites[site]) ? settings.active.sites[site] : "default site")
-
-
-  for(var button in ExtPanel.globalOptions) {
-    ExtPanel.globalOptions[button].classList.remove("selected");
+function configureGlobalTab() {
+  for(var button in ExtPanel.extOptions) {
+    ExtPanel.extOptions[button].classList.remove("selected");
   }
-  for(var button in ExtPanel.siteOptions) {
-    ExtPanel.siteOptions[button].classList.remove("selected");
+  try{
+  for(var button in ExtPanel.arOptions) {
+    ExtPanel.arOptions[button].classList.remove("selected");
+  }
+  } catch (e) {};
+  for(var button in ExtPanel.alignment) {
+    ExtPanel.alignment[button].classList.remove("selected");
   }
 
-  ExtPanel.globalOptions[settings.active.extensionMode].classList.add("selected");
-  if(site && settings.active.sites[site]) {
-    ExtPanel.siteOptions[settings.active.sites[site].status].classList.add("selected");
-  } else {
-    ExtPanel.siteOptions.default.classList.add("selected");
+  ExtPanel.extOptions[settings.active.extensionMode].classList.add("selected");
+  console.log("ExtPanel", ExtPanel, "spaghett:", settings.active.arDetect.mode);
+  try {
+  ExtPanel.arOptions[settings.active.arDetect.mode].classList.add("selected");
+  }catch(e) {}
+  ExtPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
+}
+
+function configureSitesTab(site) {
+  function configureGlobalTab() {
+    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");
+    }
+  
+    SitePanel.extOptions[settings.active.sites[site].status].classList.add("selected");
+    SitePanel.arOptions[settings.active.sites[site].arStatus].classList.add("selected");
+    // SitePanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
   }
+}
 
-  //#endregion extension-basics
-  //
-  // ------------
-  //#region autoar - SET AUTOAR OPTIONS
-  // if(Debug.debug)
-    // console.log("Autodetect mode?", settings.active.arDetect.mode, "| site & site options:", site, ",", (site && settings.active.sites[site]) ? settings.active.sites[site].arStatus : "fucky wucky?" );
-  // document.getElementById("_autoAr_disabled_reason").textContent = settings.active.arDetect.DisabledReason;
-  document.getElementById("_input_autoAr_timer").value = settings.active.arDetect.timer_playing;
-
-
-  for(var button in AutoArPanel.globalOptions) {
-    AutoArPanel.globalOptions[button].classList.remove("selected");
-  }
-  for(var button in AutoArPanel.siteOptions) {
-    AutoArPanel.siteOptions[button].classList.remove("selected");
-  }
-
-
-  AutoArPanel.globalOptions[settings.active.arDetect.mode].classList.add("selected");
-  if(site && settings.active.sites[site]) {
-    AutoArPanel.siteOptions[settings.active.sites[site].arStatus].classList.add("selected");
-  } else {
-    AutoArPanel.siteOptions.default.classList.add("selected");
-  }
-  //#endregion
-
-  // process video alignment:
-  if(settings.active.miscFullscreenSettings.videoFloat){
-    for(var button in ArPanel.alignment)
-      ArPanel.alignment[button].classList.remove("selected");
-    
-    ArPanel.alignment[settings.active.miscFullscreenSettings.videoFloat].classList.add("selected");
-  }
-
-  //#region - SET STRETCH
-
-  // set stretching
-  for (var button in StretchPanel.global) {
-    StretchPanel.global[button].classList.remove("selected");
-  }
-  if (settings.active.stretch.initialMode === 0) {
-    StretchPanel.global.none.classList.add("selected");
-  } else if (settings.active.stretch.initialMode === 1) {
-    StretchPanel.global.basic.classList.add("selected");
-  } else if (settings.active.stretch.initialMode === 2) {
-    StretchPanel.global.hybrid.classList.add("selected");
-  } else if (settings.active.stretch.initialMode === 3) {
-    StretchPanel.global.conditional.classList.add("selected");
-  }
-  //#endregion
-
-  // process keyboard shortcuts:
+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') {
@@ -247,12 +247,13 @@ async function loadConfig(site){
       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;
-      }
     }
+
+    // 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]})`;
@@ -262,6 +263,47 @@ async function loadConfig(site){
       }
     }
   }
+
+  
+  // 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();
+  });
+}
+
+async function loadConfig(site){
+
+  if(Debug.debug)
+    console.log("[popup.js::loadConfig] loading config. conf object:", settings.active, "\n\n\n\n\n\n\n\n-------------------------------------");
+  
+  configurePopupTabs(site);
+  configureGlobalTab();
+  configureSitesTab(site);
+  configureVideoTab();
+
+  //#region - SET STRETCH
+  //
+  // // set stretching
+  // for (var button in StretchPanel.global) {
+  //   StretchPanel.global[button].classList.remove("selected");
+  // }
+  // if (settings.active.stretch.initialMode === 0) {
+  //   StretchPanel.global.none.classList.add("selected");
+  // } else if (settings.active.stretch.initialMode === 1) {
+  //   StretchPanel.global.basic.classList.add("selected");
+  // } else if (settings.active.stretch.initialMode === 2) {
+  //   StretchPanel.global.hybrid.classList.add("selected");
+  // } else if (settings.active.stretch.initialMode === 3) {
+  //   StretchPanel.global.conditional.classList.add("selected");
+  // }
+  //#endregion
+
+
   
 
   if(Debug.debug)
@@ -274,39 +316,23 @@ async function getSite(){
 
 function openMenu(menu){
   if(Debug.debug){
-    console.log("[popup.js::openMenu] trying to open menu", menu, "| element: ", Menu[menu]);
+    console.log("[popup.js::openMenu] trying to open menu", menu, "\n element: ", Menu[menu]);
   }
   
   for(var m in Menu){
-    if(Menu[m] === null)
-      continue; //todo: remove menus that are no longer there
-    
-    Menu[m].classList.add("hidden");
+    if(Menu[m])
+      Menu[m].classList.add("hidden");
   }
   for(var m in MenuTab){
     if(MenuTab[m])
       MenuTab[m].classList.remove("selected");
   }
   
-  if(menu == "arSettings" || menu == "cssHacks" ){
-    // if(!hasVideos)
-    //   Menu.noVideo.classList.remove("hidden");
-    // else{
-      Menu[menu].classList.remove("hidden");
-      if(Debug.debug){
-        console.log("[popup.js::openMenu] unhid", menu, "| element: ", Menu[menu]);
-      }
-    // }
-  }
-  else{
-    Menu[menu].classList.remove("hidden");
-    if(Debug.debug){
-      console.log("[popup.js::openMenu] unhid", menu, "| element: ", Menu[menu]);
-    }
-  }
-  
-  selectedMenu = menu;
+  Menu[menu].classList.remove("hidden"); 
   MenuTab[menu].classList.add("selected");
+
+  selectedMenu = menu;
+
 }
 
 
@@ -376,24 +402,20 @@ document.addEventListener("click", (e) => {
       return;
     
     if(e.target.classList.contains("menu-item")){
-      if(e.target.classList.contains("_menu_this_site")){
-        openMenu("thisSite");
+
+      if(Debug.debug) {
+        console.log("[popup.js::eventListener] clicked on a tab. Class list:", e.target.classList);
       }
-      else if(e.target.classList.contains("_menu_aspectratio")){
-        openMenu("arSettings");
-      }
-      else if(e.target.classList.contains("_menu_stretch")){
-        openMenu("stretchSettings");
-      }
-      else if(e.target.classList.contains("_menu_hacks")){
-        openMenu("cssHacks");
-      }
-      else if(e.target.classList.contains("_menu_about")){
+
+      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");
       }
-      else if(e.target.classList.contains("_menu_autoar")){
-        openMenu("autoAr");
-      }
       
       // don't send commands
       return;
diff --git a/res/popup/popup.html b/res/popup/popup.html
index 430d814..96fc879 100644
--- a/res/popup/popup.html
+++ b/res/popup/popup.html
@@ -21,10 +21,10 @@
       <div id="_menu_tab_settings_ext" class="menu-item _menu_tab_settings_ext">
         Extension settings
       </div>
-      <div id="_menu_tab_settings_site" class="menu-item _menu_tab_settings_ext">
+      <div id="_menu_tab_settings_site" class="menu-item _menu_tab_settings_site">
         Site settings
       </div>
-      <div id="_menu_tab_settings_video" class="menu-item _menu_tab_settings_ext">
+      <div id="_menu_tab_settings_video" class="menu-item _menu_tab_settings_video">
         Video settings
         <span class="menu-item-inline-desc"><br/>Crop & stretch options for current video</span>
       </div>
@@ -72,6 +72,16 @@
             <a id="_stretch_global_conditional" class="button _stretch _ar_stretch_global _conditional w24">Thin borders<br/><span id="_b_stretch_default_conditional_key" class="smallcaps small darker"></span></a>
           </div>
         </div>
+
+        <!-- VIDEO ALIGNMENT -->
+        <div class="row">
+          <span class="label">Video alignment:</span>
+          <div class="button-row">
+            <a id="_align_ext_left"   class="button _align _align_ext_left">left</a>
+            <a id="_align_ext_center" class="button _align _align_ext_center">center</a>
+            <a id="_align_ext_right"  class="button _align _align_ext_right">right</a>
+          </div>
+        </div>
       </div>
 
 
@@ -94,6 +104,16 @@
           </div>
         </div>
         <!-- TODO: default aspect ratio, default settings -->
+
+        <!-- VIDEO ALIGNMENT -->
+        <div class="row">
+          <span class="label">Video alignment:</span>
+          <div class="button-row">
+            <a id="_align_site_left"   class="button _align _align_site_left">left</a>
+            <a id="_align_site_center" class="button _align _align_site_center">center</a>
+            <a id="_align_site_right"  class="button _align _align_site_right">right</a>
+          </div>
+        </div>
       </div>
 
 
@@ -134,20 +154,22 @@
             min, max and value need to be implemented in js as this slider 
             should use logarithmic scale
           -->
-          <input id="_zoom_slider" class="w100"
+          <input id="_input_zoom_slider" class="w100"
                  type="range"
+                 step="any"
                  />
           <div style="overflow: auto">
             <div class="inline-block float-left medium-small x-pad-1em">
-              Zoom: <span id="zoom_level">100</span>%
+              Zoom: <span id="_label_zoom_level">100</span>%
             </div>
             <div class="inline-block float-right medium-small">
               <a class="_zoom_show_shortcuts x-pad-1em">show shortcuts</a><a class="_zoom_hide_shortcuts hidden x-pad-1em">show shortcuts</a><a class="_zoom_reset x-pad-1em">reset</a>
             </div> 
           </div>
           <div class="m-t-0-33em w100 display-block">
-            <input  type="checkbox" 
-                    />
+            <input id="_input_zoom_site_allow_pan"
+                   type="checkbox" 
+                   />
             Pan with mouse
           </div>
           <!-- <small>Keyboard shortcuts:<ul><li>Z: zoom</li><li>U: unzoom</li><li>P: toggle pan</li><li>shift: hold to enable/prevent pan</li></ul></small> -->
@@ -159,7 +181,7 @@
         </p>
         <span class="label">Stretching mode</span>
         <div class="button-row">
-          <a class="button _stretch _ar_stretch_none w24">Never<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
+          <a class="button _stretch _ar_stretch_none w24">Normal<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
           <a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_stretch_basic_key" class="smallcaps small darker"></span></a>            
           <a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_stretch_hybrid_key" class="smallcaps small darker"></span></a>
           <a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_stretch_conditional_key" class="smallcaps small darker"></span></a>
@@ -169,23 +191,16 @@
         <div class="row">
           <span class="label">Video alignment:</span>
           <div class="button-row">
-            <a id="_align_left"   class="button _align _align_left">left</a>
-            <a id="_align_center" class="button _align _align_center">center</a>
-            <a id="_align_right"  class="button _align _align_right">right</a>
+            <a id="_align_video_left"   class="button _align _align_video_left">left</a>
+            <a id="_align_video_center" class="button _align _align_video_center">center</a>
+            <a id="_align_video_right"  class="button _align _align_video_right">right</a>
           </div>
         </div>
       </div>
 
-      <div id="autoar-basic-settings" class="suboption hidden">
-          <!-- <p><small class="color_warn" id="_autoAr_disabled_reason"></small><br/> -->
-        <p>Check every <input id="_input_autoAr_timer" class="_autoAr _autoAr_timer" type="number" min="5" max="10000"> ms — <span id="_b_autoar_save_autoar_timer" class="button _save_autoAr_timer _autoAr">Save</span></p>
-      </div>
-
-      <div id="css-hacks-settings" class="suboption hidden">
-        <p>If zoomed in video doesn't align properly, try enabling or disabling certain CSS rules below:</p>
-      </div>
-      
-      <div id="panel-about" class="suboption hidden">
+    
+      <!-- ABOUT -->
+      <div id="_menu_about" class="suboption hidden">
         <div class="row">
           <span class="label">Ultrawidify version:</span><br/> <span id="uw-version"></span>
         </div>