Supercharged Local Directory File Browser

Makes file:/// directory ("Index of...") pages (and many server-generated index pages) actually useful. Adds navigation links, file preview pane, keyboard navigation, user-defined shortcuts, filtering, more.
当前为 2018-09-30 提交的版本，查看最新版本。
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name              Supercharged Local Directory File Browser
// @version           2.7.0
// @description       Makes file:/// directory ("Index of...") pages (and many server-generated index pages) actually useful. Adds navigation links, file preview pane, keyboard navigation, user-defined shortcuts, filtering, more.
// @author            Gaspar Schott (Michael Schrauzer) mshroud@gmail.com
// @license           GPL-3.0-or-later
// @homepageURL       https://openuserjs.org/scripts/gaspar_schot/Supercharged_Local_Directory_File_Browser
// @contributionURL   https://paypal.me/mschrauzer
// @include           file://*/
// @include           file://*/?*
// @include          *!localhost*/
// @require      http://code.jquery.com/jquery-latest.min.js
 
// NOTE: This script was developed in Vivaldi, running on Mac OS High Sierra. It has been tested in various Chrome and Gecko-based browsers.
// It has been minimally tested on Windows and not at all on other OSes. It should work, but please report any issues.
// The script does not work in Safari because Safari does not allow local directories to be browsed.
 
// NOTE: By default, Greasemonkey and Tampermonkey will not run scripts on file:/// urls, so for this script to work, you will have to enable it first.
// For Tampermonkey, go to Chrome extension page, and tick the 'Allow access to file URLs' checkbox at the Tampermonkey extension section.
// For Greasemonkey, open about:config and change greasemonkey.fileIsGreaseable to true.
 
// @namespace https://greasyfork.org/users/16170
// ==/UserScript==
 
(function() {
    'use strict';
    var $ = jQuery;
 
    // ***** USER SETTINGS ***** //
 
    const $settings = {
 
        // Paste your exported settings between the two lines below:
        //--------------------------------------------------------//
 
        shortcuts:            // N.B.: Directory links must end with "/", file links must not.
                              // You may add as many menus and links as you like. Just copy the curly-bracketed example and edit.
                              [
                                  {
                                  "menu_title":"My Sample Menu",
                                  "links":
                                      [
                                          { "link_name":"My Directory Link 1", "link":"file:///Path/To/My/Directory/" },
                                          { "link_name":"My Directory Link 2", "link":"file:///Path/To/My/Directory_2/" },
                                          { "link_name":"My Directory Link 3", "link":"file:///Path/To/My/Directory_3/" },
                                          { "link_name":"My File Link 1", "link":"file:///Path/To/My/File.ext" },
                                      ]
                                  },
                              ],
 
        ignore_files:         // If true (default), ignored files (see below) will be greyed-out (default) in the file list and will not be loaded in the content pane when selected;
           					  // If false, they will be treated as normal files, so if they are selected, the browser will attempt to download any file types it can't handle (which makes keyboard navigation inconvenient).
							  true,
        hide_ignored_files:   // If true, ignored files will be completely hidden from the file list;
           					  // If false (default), ignored files will appear greyed-out.
							  false,
        hide_invisibles:      // Un*x/Mac OS only: If true (default), files or directories beginning with a "." will be hidden.
							  true,
        hide_details:         // If true (default), hide file and directory details; if false, show them.
							  true,
        default_sort:         // Choose from: 'name', 'size', 'date', 'kind', 'ext', 'default'.
                              // default = Chrome sorting: dirs on top, files alphabetical.
                              'default',
        dirs_on_top:          // If true, directories will always be listed firs except when sorting by "name" (since otherwise sorting by "name" would equal "default").
                              // If false (default), directories and files will be sorted together. (In practice, dirs will typically still be separated when sorting by size, kind, and extension.)
                              false,
        apps_as_dirs:         // Un*x/Mac OS only: if true, treat apps as directories; allows app contents to be browsed. This is the default behavior for Chrome.
            				  // If false (default), treat apps as ignored files.
					  		  false,
        dark_theme:            // If true (default: false), gives the content pane a dark background, and inverts html and text content.
							  false,
        grid_image_size:      // Default = 150
                              150,
        grid_font_size:       // Default = 1
                              1,
        autoload_index_files: // If true (default: false), automatically select first "index.ext" file found in directory.
                              false,
        autoload_audio:       // If true, the first audio file found in a directory will be automatically selected and loaded for playback.
                              // If true, use left/right arrows to select audio files, use up/down arrows to select non-audio files (including video) only.
                              // If false (default), audio files will be treated like any other file for navigation purposes (i.e., up and down arrows will select them too).
                              // Note: if false, using up/down arrows will automatically begin playback of selected audio files; left/right arrows will select audio files without playing them.
                              false,
        use_custom_icons:   // if true (default), use custom icons for dirs and files
                              // if false, use browser/server default icons
                              true
 
        //--------------------------------------------------------//
        // Paste your exported settings between the above two lines.
 
    };
 
    // ***** END USER SETTINGS ***** //
 
    // KEYBINDINGS:
    // Arrow Up/Down: Navigate up and down directory items
    // Cmd/Ctrl + Arrow Up: Go to parent directory
    // Arrow Left/Right: Navigate to prev/next image, font, or audio file, skipping other files, when files of these types are selected.
    // Opt/Alt + Arrow Left/Right: Skip audio ±10s
    // Shift + Opt/Alt + Arrow Left/Right: Skip audio ±30s
    // Arrow Right: Open selected directory.
    // Space: Pause/Play audio
    // Return: Open selected directory.
    // Cmd/Ctrl + D: Toggle file details (size, date modified) in some index page types.
    // Cmd/Ctrl + G: Show or Reset Grids
    // Cmd/Ctrl + I: Toggle Invisibles
    // Cmd/Ctrl + Shift + O: Open selected item in new window/tab
    // Cmd/Ctrl + R: Reload previewed content, reset scaled images/fonts.
    // Cmd/Ctrl + W: Close previewed content (not available in Firefox), or close window if no content is being previewed.
    // Cmd/Ctrl + Shift + </>: Scale preview items and grids.
 
        //• Fixed: Ignored files weren't being sorted properly.
 
 
    // CHANGELOG HISTORY:
 
    //• 2.7.0: New features and user settings. Please export your user_settings before updating and note the changes mentioned below.
    //• NEW (and experimental): Display a standard index of the selected sidebar directory in the preview pane.
    //       This is very handy for browsing directories from the sidebar.
    //       Clicking files and directories directly in the preview pane works as you'd expect, but it can be a little weird,
    //       since you can navigate up and down the directory structure in the preview pane independently from the sidebar.
    //• NEW: Added URL query strings to remember directory selection history and various temporary UI settings between directory changes:
    //       sort order, show/hide details, default/dark mode, sidebar width, and previously selected directory.
    //• NEW: Navigate to files and directories by typed string.
    //• Improved: Converted user shortcut settings to JSON for greater flexibility.
    //            Now you can create and name your own shortcut menu categories.
    //            IMPORTANT: You must re-enter your old shortcuts in the new settings format.
    //• Added: Menu item to reset/delete query strings and return to the default user_settings in the script.
    //• Added: New user setting to show/hide details by default. (Don't know why it took so long to add this.)
    //• Added: User customizable file kinds for sorting.
    //         You may add or remove file kind categories and file extensions to suit your own files:
    //         See "$row_types" in code below, at the beginning of "General Setup" and just after the Changelog, to add your own.
    //• Removed "ignore_file_types" from the user_settings, because the list of ignored file extensions has been moved:
    //           See "$row_settings" in code below, at the beginning of "General Setup" and just after the Changelog, to add your own.
    //• Removed "user_name" from the user_settings, because it is no longer needed.
    //• Improved: File shortcuts work much more reliably now, and thanks to query strings, you can now bookmark more than one file in a directory.
    //• Improved: Various small UI changes.
    //• Fixed: Toggle sidebar wasn't working.
    //• Fixed: Ignored files weren't being sorted.
    //• Internals: Abstracted a bunch of functions, removed some unneeded variables and functions. More to be done.
    //• If you like this script, please consider making a donation. See the "Donate" menu item. Thanks!
 
    //• 2.6.5
    //• Fixed: First and last audio files would repeat when ended instead of going to next track in some circumstances.
    //• Fixed: Various issues with file navigation.
 
    //• 2.6.4
    //• Added: Nice custom icons for dirs and various file types. Other minor UI tweaks.
    //• Added: New user setting to use default file icons instead the new custom ones, in case you don't like them.
    //• Added: Separate close button for audio player, since there was no way to close it while leaving other previewed content open.
    //• Fixed: Really, really fixed reload button and reload shortcut not working (I hope).
    //• Fixed: Yet more issues with arrow navigation.
    //• Fixed: Various UI issues with Firefox.
    //• Improved: Sidebar resizing should be more reliable (drag event was interacting with sidebar).
    //• Other: Abstracted some styles and cleaned up code.
    //• Many other bug fixes.
 
    //• 2.6.3: Minor UI improvements and bugfixes.
    //• Changed: Open dirs on double-click. (You can still open them by selecting and pressing "Return" or the Right Arrow Key.)
    //• Changed: Removed autoplay_audio preference.
    //• Fixed: Reload button and reload shortcut weren't working correctly.
    //• Fixed: Clicking audio file name didn't pause/play file.
    //• Fixed: Sidebar height didn't reset when changing sort order.
    //• Fixed: Directories with a "." in the name were being sorted as if the trailing text was an extension.
    //• Fixed: Corrected some code that prevented the script from working in Safari; while Safari still doesn't allow local directories to be browsed, the script will work on server-generated pages.
    //• Other: Removed some unneeded styles and functions, simplified arrow navigation code.
 
    //• 2.6.2: Fixes for a few more pesky bugs. Just when you think you're safe.... Apologies.
    //• Fixed: Reload and Close buttons and keyboard combinations now work for audio files.
    //• Fixed: Preview pane titlebar wasn't showing in some circumstances.
 
    //• 2.6.1: Hopefully fixed a bug when navigating folders containing audio files. Sorry about that!
 
    //• 2.6.0: Sorting, new user settings, and much more! This is a pretty substantial update.
    //• Added: Donate link (paypal.me/mschrauzer) to the main shortcuts menu. If you like this script, please support its development. Thank you!
    //• Added: Support for additional common server-generated index types. The script should now work on index pages structured as unordered lists, "<pre>" text, and html tables.
    //• Added: Sorting by name, size, date modified, kind, file extension, and default Chrome sorting (i.e., dirs on top, files alphabetical).
       //• Click the "Details" button (or Cmd/Ctrl + D) to show the available sort options.
       //• Note: Some server configurations don't provide size or date information; on such sites, these sorting options will not be available.
       //• Note: Sorting by kind is based on the file extension, so it is rather coarse (at least for now); many non-image/audio/pdf files will simply be categorized as generic "Files".
    //• Added: Added "Sort by..." menu item in the main shortcuts menu.
    //• Added: New User Settings (gives you control over some behavior added in the last update):
              //• default_sort: Choose default sort method: by name, size, date, kind, extension, or Chrome default (dirs on top, files alphabetical).
              //• dirs_on_top: Choose whether directories should be sorted separately from files.
              //• autoload_index_files: If true (default false), autoload first index.[ext] file found in directory.
              //• autoload_audio:
                 //• If false (default), treat audio files like other files for navigation purposes. Use up and down arrows as normal, only show audio controls when an audio file is selected.
                 //• (Note that when false, only one file in the directory at a time can be selected.)
                 //• If true, autoload first audio file in directory (and cover art, if any) and navigate audio with left and right arrows, other files with up and down arrows. This was the previous behavior of the script.
    //• Added: Alert reminder to add your computer user account name to the settings.
    //• Enhancement: UI: Added flyout submenus to main shortcuts menu.
    //• Enhancement: Added .aiff, .ape, .m4a to recognized audio format types.
    //• Enhancement: Added .svg to recognized image format types (they now are shown in an <image> element instead of an <iframe>).
    //• Enhancement: Moved the user settings to top of the code for easier access.
    //• Changed: Since the browser can't tell if an mp4 file is video or audio only, all mp4 files will load in the main preview area, not the audio player.
    //• Fixed an issue with image zoom.
    //• Fixed an issue with previewed content not being removed when content of another type was previewed.
    //• Internals: The script now converts server-generated index pages to the default Chrome table structure. Conversion happens in memory, so performance should be improved.
    //• Todo: Better video file handling.
 
    // 2.5.0
    // A whole bunch of small and not-so-small additions, changes, bug fixes, and enhancements.
    // Added: Automatically load /index.[ext] files in the preview pane, if one exists in the directory.
    // Added: Initial support for AMMPS index pages; added "localhost" to @include rules.
    // Added: New user setting for external (non-local) shortcuts. Don't delete this item when pasting in your exported settings.
    // Added: Show/Hide sidebar. Hidden sidebar can still be navigated by the arrow keys.
    // Added: (Shift +) Alt/Option + Left/Right Arrows to skip audio ±10 or 30 secs.
    // Added: Also use the Prev and Next arrows to navigate font previews.
    // Added: Checkboxes for video files. Video file handling is still a bit of mess when audio files are also present in the directory; I will address this in a future update.
    // Added: Images can now be scaled (instead of just zoomed by clicking) with the +/– buttons and the scale keybindings.
    // Improved: Better scaling overall for images, fonts, and grids (use geometric instead of arithmetic scaling -- duh!).
    // Improved: Auto-file selection from user file shortcut list. First file found is loaded; user file shortcuts take precedence over autoloading index files.
    // Enhancement: Reload button also resets size of scaled images, fonts, and grids.
    // Fixed: Some lingering issues with arrow navigation and audio files selection.
    // Please read the updated list of keybindings in the description.
 
    // 2.4.2
    // More audio file enhancements:
    // Added: Checkboxes to play or skip specific audio files. (Such a seemingly small thing, such a pain to implement.)
    // Added: Start/stop play by clicking file name.
    // Added: Use Reload button and reload keybinding (Cmd/Ctr-R) to return audio to beginning of track.
    // Changed: Don't autoplay audio when using left and right arrows to navigate tracks.
    // Fixed: Various issues with shuffle play.
    // Fixed: Completely rewrote autoload cover art code so that it actually works.
    // Fixed: Ignored files weren't being ignored in list-based index pages.
    // Many other bug fixes.
    // Minor UI adjustments (e.g., better prev and next track buttons).
 
    // 2.4.1
    // Added: Loop and shuffle playback for audio files.
    // Added: Wrap-around keyboard navigation for audio tracks.
    // Added: Default background image for audio directories containing no image files.
    // Fixed some scrollIntoView issues.
    // Fixed auto-cover image selection issue in Firefox.
    // Bug-fixes. Yep, bug-fixes.
 
    // 2.4.0
    // Major update for audio files!
    // New: Play all audio files in a directory.
    // New: Autoload cover art files (if available) in the preview pane. The script will look in the directory for image files titled "cover.[ext]" or "front.[ext]"; if they are not found, it will load the first image file it finds.
    // New: Audio file keyboard controls: Left/Right Arrows to navigate tracks, ignoring other files in the directory. Up/Down Arrows to navigate and preview all non-audio files in the directory (e.g., cover art or lyrics). Space bar to pause/play. (Note: grid-view is available in directories containing audio files, but the left/right arrow keys will not select grid items.)
    // New user setting: autoplay audio files. Default is false, but if true, the first audio file will start playing as soon as the directory is loaded. Again, don't delete it when pasting in exported settings.
    // Some code cleanup and bugfixes.
 
    // 2.3.0
    // Added: New user settings: default grid image and font sizes. Don't delete them when pasting in your old exported settings!
    // Added: Scale grid image items.
    // Improved: Better image zooming. Zoomed images now scroll to the area clicked.
    // Fixed: Keybinding to toggle invisibles wasn't working.
    // Fixed: Image zoom not working.
    // Fixed: Hovered background for grid items in dark mode.
    // Fixed: Font scaling in dual grids.
 
    // 2.2.0
    // Added: Export settings menu item. This will make it easier to save your user settings before updating the script. (Remember, scripts running on local files cannot set cookies or use localStorage, which would make it possible to save user settings automatic.) Unfortunately, there is no mechanism for importing the settings: you'll still have to open the script editor and paste in the exported data.
    // Fixed: File extensions were case sensitive, so some valid files wouldn't load if the extension contained capital letters.
    // Fixed: File and Dir names were also being lowercased.
 
    // v. 2.1.1
    // Fixed: Can't type "r" in font previews.
    // Other minor bug fixes.
 
    // v. 2.1.0
    // Added: Toggle Default/Dark modes menu item while browsing current directory; mode reverts to saved setting on dir change.
    // Added: White background for images so that images with transparency are visible against the grey background
    // Removed trailing "/" from directory display names.
    // Fixed an issue where font and image grid display got confused about what content to display.
    // Fixed directory names display in dark mode in server pages that use lists instead of tables.
    // Better styling for grid button.
    // Better styling for grid items in dark mode.
    // Bug fixes.
    // Remember to copy your user settings before updating!
 
    // v. 2.0.2
    // Various fixes suggested by "Zorg":
    // Dark mode now ignores html files (and media files), but inverts all plain text files. This solution is not perfect: there is a flash of inverted content when navigating from an html or media file to a non-html or media file; will look for a fix.
    // Fixed display of non-Latin characters in sidebar header.
    // Add support for linux "home" directory for user profile shortcuts
    // Made entire up directory button clickable.
 
    // v. 2.0.1
    // Fixed wonky font preview scaling.
 
    // v. 2.0
    // NEW! Not just for local directories anymore! Added support for *many* server-generated directory index pages (It's impossible to check every server configuration, needless to say, so it might not work in every case; let me know if you encounter problems.// NEW! Preview font files (otf, ttf, woff, woff2). Great for designers: preview fonts without installing them. Hint: To install previewed fonts, just type Cmd/Ctrl + O or right-click the link and save it to your fonts folder. Font preview pane is content-editable.
    // NEW! Preview font files (otf, ttf, woff, woff2). Great for designers: preview fonts without installing them. Hint: To install previewed fonts, just type Cmd/Ctrl + Shift + O or right-click the link and save it to your fonts folder. Font preview pane is content-editable.
    // Added: Now use the Left and Right arrow keys to navigate through images and fonts in a folder, skipping other files. Use up and down arrow keys to navigate all files normally.
    // Added: Basic dark mode user setting.
    // Added: Wrap-around keyboard navigation.
    // Added: Cmd/Ctr-D to toggle details.
    // Added: Cmd/Ctr-Shift-. and Cmd/Ctr-Shift-, to scale font previews text size.
    // Changed: Moved dynamically-added in-line styles to appended stylesheet.
    // Changed: Extensive refactoring of code for better separation of concerns. (More needs to be done.... Sigh.)
    // Removed: ScrollIntoView for Grid views. Scrolling didn't work reliably when the sidebar was also being scrolled. Will restore when bug fixed.
    // Many small bug fixes.
 
    // v. 1.4
    // Added: Initial support for Firefox. Tested in Firefox 59, Waterfox 56.
    // Changed: Use SVG for menu icons
    // Changed: Code cleanup, reorganization
    // Renamed script to "Supercharged Local Directory File Browser"
 
    // v. 1.3
    // Fixed: Keyboard navigation of ignored or invisible items fails if "Hide Invisibles" is toggled off after loading a directory.
    // Added: Also hide ignored files if "Hide Invisibles" is checked.
    // Added: Content reload button.
    // Changed: Reorganized settings to reduce confusion about how ignored files are treated.
 
    // v. 1.2
    // Click to show menus instead of hover.
    // Added Cmd/Crl+Shift+O keybinding to open selected item in new window
    // Arrow navigation bugfixes
 
    //TODO:
    // Update parents links with queries --> delete history/selected
    // Remove Gecko styles
    // Fix grid scrollIntoView
    // Preload next audio track to prevent gaps
 
 
    // ***** GENERAL SETUP ***** //
 
    // $ROW_TYPES:
    // Add file extensions for sorting and custom icon display.
    // You can also add your own new row_type categories.
    // Note: no leading "." for extensions.
    // Note: Do not add an extension to more than one row_type category; only the last one will be used.
    const $row_types = {
        // myCategory: ['ext1','ext2',],
        dir:      ['/'],
        app:      ['app/','app','exe','msi'],
        archive:  ['zip','rar','cbr','7z','tar','gz','dmg','pkg','archive'],
        audio:    ['mp3','mp4','m4a','aac','aif','aiff','ape','flac','ogg','wav','webm'],
        font:     ['otf','ttf','woff','woff2','afm','pfb','pfm','tfm'],
        graphics: ['indd','idml','indt','icml','ai','eps','pages','qxp','qxb','qxd','mif','sla','dtp','pmd','pub','fm','book','inx'],
        htm:      ['htm','html','xhtm','xhtml'],
        image:    ['jpg','jpeg','png','apng','gif','bmp','webp','svg','tif','tiff','psd','raw','dng','cr2','nef','arw'],
        office:   ['doc','docx','epub','xls','xlsx','xlm','odt','odf','rtf'],
        pdf:      ['pdf'],
        text:     ['txt','log','md','nfo'],
        code:     ['c','conf','css','h','ini','js','json','jsx','less','list','lock','php','plist','py','sass','strings','xml'],
        video:    ['mpeg','mov','m4v','webm'],
    }
    // $ROW_SETTINGS
    const $row_settings = {
        // Files with these extensions will not be loaded if selected in the sidebar (prevents the browser from attempting to download the file).
        ignore: ['exe','doc','docx','xls','xlsx','odt','odp','csv','msi','dll','indd','idml','pages','tif','tiff','raw','dng','cr2','nef','arw','eps','psd','ai','afm','pfb','pfm','tfm','zip','pkg','swf','pls','ics','DS_Store','ds_store','ds_store','alias','dmg','gz','qxp','icon.jpg','thumbs.db','ape','srf','epub'],
        // Files with these exensions will not be inverted in dark mode
        exclude: ['htm','html','xhtm','xhtml','mp3','m4a','m4v','mp4','ogg','ogm','oga','webm','wav','mpeg','flac'],
    }
 
    // ************************************ //
    // DON'T EDIT ANYTHING BELOW THIS LINE. //
    // ************************************ //
 
    // Styles for iFrame Directory Index pages
    if ( window.frameElement !== null || window.top != window.self && window.location.href.endsWith('/') ) {
 
        $('html').css({'margin':'0','padding':'0','width':'100%','max-width':'100%','height':'100%','background':'#CCCCCC','box-sizing':'border-box','font-size':'12px'});
        $('body').css({'width':'100%','max-width':'100%','min-width':'100%','height':'auto','margin':'0','padding':'0','background':'#CCCCCC','border':'0','border-radius':'0','box-sizing':'border-box','font-family':'lucidagrande,"fira sans",helvetica,sans-serif','font-size':'12px'});
        $('body > h1').css({'display':'none'});
        $('body > div').css({'margin':'1em','padding':'0','font-size':'1rem'});
        $('body p').css({'margin':'1rem','font-size':'1rem'});
        $('body > table').css({'width':'100%','border-collapse':'collapse','border-top':'solid 1px #888888','font-size':'1rem'});
        $('thead').css({'font-size':'1em'});
        $('thead th:first-of-type').css({'width':'50%','text-align':'left'});
        $('body table tr').css({'outline':'0'});
        $('body > table > tbody > tr > td:first-of-type, body > table > thead > tr > th:first-of-type, body > ul > li').css({'padding':'3px 0 3px 1em'})
        $('body > ul').css({'padding-left':'0','list-style':'none'})
        $('body > table > tbody > tr > td:last-of-type').css({'padding-right':'1em'})
        $('body > table > thead th').css({'padding-top':'6px'});
        $('body > table > tbody > tr, body > ul > li:not(:contains("Parent Directory"))').hover( function() {
            $(this).css({'background-color':'#ABABAB'});
        }, function() {
            $(this).css({'background-color':'transparent'});
        });
        $('a').css({'color':'#333','text-decoration':'none','display':'block'});
        $('address').remove();
        $('body > ul > li:contains("Parent Directory")').css({'font-weight':'bold','margin-bottom':'1em','padding':'3px 0 1em 1em','border-bottom':'solid 1px #888888'})
 
        return;
    }
 
    // Experimental: Don't run script in previewed contentEditable text and html files.
    if ( window.location.pathname.slice(-1) != '/') {
        // $('body').attr('contentEditable','true');
        return;
    }
 
    const $userAgent = navigator.userAgent;
 
    var $font_family_arr = [];
 
    $('head').prepend('<meta charset="utf-8">');
 
    const $body = $('body');
          $body.attr('lang','en').find('> h1:contains("Index of"),> #parentDirLinkBox,> #UI_goUp,#UI_showHidden').remove();
 
    // PATHS
    var $location = decodeURIComponent(window.location);
        $location = $location.slice(0,$location.lastIndexOf('/?') + 1 ); // remove query string
    var $protocol = window.location.protocol;
    var $path_name = window.location.pathname;
    var $location_arr = $path_name.split('/');
 
    var $current_dir_path = $protocol + $path_name.replace(/%20/g,' ').replace(/\//g,'/<wbr>').replace(/_/g,'_<wbr>').replace(/—/g,'—<wbr>').replace(/\\/g,'/');
    var $current_dir_name = $protocol + $path_name.replace(/%20/g,' ').slice(0,-1);
        $current_dir_name = $current_dir_name.slice($current_dir_name.lastIndexOf('/') + 1);
 
    // URL QUERIES
    var getQueryPrefs = function() {
        return new URLSearchParams( window.location.search );
    }
    var $query_prefs = getQueryPrefs();
 
    var $UI_pref_width = $query_prefs.get('width') == null ? '25' : (Math.round(100*($query_prefs.get('width'))/window.innerWidth)).toString(); // number string
    var $UI_pref_theme = $query_prefs.get('dark_theme') == null ? $settings.dark_theme : JSON.parse( $query_prefs.get('dark_theme') ); // bool
    var $UI_pref_details = $query_prefs.get('hide_details') == null ? $settings.hide_details : JSON.parse( $query_prefs.get('hide_details') );
    var $UI_pref_sort = $query_prefs.get('sort') == null ? $settings.default_sort.toLowerCase() : $query_prefs.get('sort');
    var $UI_pref_file = $query_prefs.get('file') == null ? '' : $query_prefs.get('file');
    var $UI_pref_selected = $query_prefs.get('selected') == null ? '' : JSON.parse( $query_prefs.get('selected') );
    var $UI_pref_history = $query_prefs.get('history') == null ? '' : $query_prefs.get('history');
    var $UI_pref_history_arr;
 
    function toggleQuery(key) {
	    var value;
        $query_prefs = getQueryPrefs();
        value = $query_prefs.has(key) ? JSON.parse( $query_prefs.get(key) ) : $settings[key];
        value === true ? $query_prefs.set( key, 'false' ) : $query_prefs.set( key, 'true' );
        updateQuery();
    }
 
    function updateQuery() {
        $query_prefs = decodeURIComponent($query_prefs);
        window.history.replaceState({}, document.title, window.location.pathname +'?'+ $query_prefs);
    }
 
    // Globals
    var e, i, j, n;
 
    // ***** BUILD UI ELEMENTS ***** //
 
    // ***** SIDEBAR ELEMENTS ***** //
    const $parent_dir_menu =    $('<nav id="parent_dir_menu"><a href="">&nbsp;</a></nav>');
    const $parents_dir_menu =   $('<nav id="parents_dir_menu"><div></div></nav><ul class="menu"></ul>');
    const $divider =            $('<li><hr></li>');
    const $shortcuts_menu =     $('<nav id="shortcuts_menu"><div>&nbsp;</div></nav><ul id="shortcuts" class="menu"></ul>');
    const $details_btn =        $('<button id="details_btn" tabindex="-1"><span>Show details</span><span>Hide details</span></button>');
    const $inv_checkbox =       $('<label ><input type="checkbox" id="inv_checkbox" for="inv_checkbox" name="inv_checkbox" tabindex="-1" />Hide Invisibles</label>');
    const $grid_btn =           $('<div id="grid_btn" tabindex="-1" title="Show Grid"><ul class="menu"><li id="show_image_grid">Show Image Grid</li><li id="show_font_grid">Show Font Grid</li></ul></div>');
    const $sidebar_header =     $('<table id="sidebar_header"><thead><tr><th colspan="3">INDEX OF</th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td colspan="3"></td></tr></tbody></table>');
    const $dir_list_head =      $('<thead id="thead"><tr id="theader" class="header"><th id="name" class="name"><input id="play_toggle" type="checkbox" tabindex="-1" checked="true" />Name</th><th id="size" class="details">Size</th><th id="date" class="details">Date</th><th id="kind" class="details">Kind</th><th id="ext" class="details">Ext</th><th id="default" class="details">Default</th></tr></thead>');
    const $dir_list_body =      $('<tbody id="tbody"></tbody>');
    const $dir_list =           $('<table id="dir_list"></table>');
    const $dir_list_wrapper =   $('<div id="dir_list_wrapper"></div>');
    const $sidebar =            $('<div id="sidebar"></div>');
    const $handle =             $('<div id="handle"></div>');
    const $sidebar_wrapper =    $('<td id="sidebar_wrapper"></td>');
    const $toggle_sidebar =     $('<div id="toggle_sidebar"></div>');
 
	// ***** CONTENT PANE ELEMENTS ***** //
    const $sidebar_overlay =    $('<div id="sidebar_overlay""></div>');
    const $content_overlay =    $('<div id="content_overlay""></div>');
    const $content_grid =       $('<div id="content_grid" data-grid-scale-factor="0"></div>');
    const $image_grid_item_el = $('<div class="image_grid_item"><a href=""><img src="/" /></a></div>');
    const $font_grid_item_el =  $('<div class="font_grid_item"></div>');
    const $content_scale =      $('<div id="scale"><span id="increase"></span><span id="decrease"></span></div>');
    const $sample_string =      'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />0123456789 [(!@#$%^&*;:)]';
    const $lorem_string =       'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
    const $specimen =           $('<div class="specimen" style="font-size:3em;">'+ $sample_string +'</div><hr><div class="lorem first" style="font-size:1em;">'+ $lorem_string +'</div><div class="lorem" style="font-size:1em;">'+ $lorem_string +'</div><div class="lorem" style="font-size:1em;">'+ $lorem_string +'</div>');
    const $content_font =       $('<div id="content_font" spellcheck="false" contenteditable="true"></div>');
    const $image =              $('<img src="/" class="" />');
    const $content_image =      $('<div id="content_image" data-image-scale-factor="1"></div>');
    const $content_embed =      $('<embed id="content_embed" name="plugin" type="application/pdf" tabindex="0"></embed>');
    const $content_iframe =     $('<iframe id="content_iframe" sandbox="allow-scripts allow-same-origin allow-modals" tabindex="0"></iframe>');
    const $content_media =      $('<td id="content_media" colspan="3"></td>');
    const $prev_track =         $('<div id="prev_track"></div>');
    const $next_track =         $('<div id="next_track"></div>');
    const $audio =              $('<audio id="audio" preload="auto" tabindex="0" controls><source id="sound_src" src="/" type="audio/mpeg"><source type="audio/mp3" src="/">Sorry, your browser does not support HTML5 audio.</audio>');
    const $loop =               $('<label><input type="checkbox" id="loop" for="loop" name="loop" tabindex="0" />Loop</label>');
    const $shuffle =            $('<label><input type="checkbox" id="shuffle" for="shuffle" name="shuffle" tabindex="0" />Shuffle</label>');
    const $close_audio =        $('<div id="close_audio"></div>');
    const $checkbox_cont =      $('<div id="checkbox_div"></div>');
    const $content_reload_btn = $('<td><button id="reload_btn" tabindex="-1">Reload</button></td>');
    const $content_title =      $('<td id="content_title"></td>');
    const $content_close_btn =  $('<td><button id="close_btn" tabindex="-1">Close</button></td>');
    const $content_header =     $('<header id="content_header"><table><tbody><tr></tr><tr></tr></tbody></table></header>');
    const $prev_btn =           $('<div id="prev_btn"></div>');
    const $next_btn =           $('<div id="next_btn"></div>');
    const $content_container =  $('<section id="content_container"></section>');
    const $content_pane =       $('<td id="content_pane"></td>');
 
    // SVG UI ICONS
    const $svg_prefix = 'url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' ';
    const $up_arrow =                $svg_prefix + 'width=\'12.728px\' height=\'7.779px\' viewBox=\'0 0 12.728 7.779\' enable-background=\'new 0 0 12.728 7.779\' xml:space=\'preserve\'><path fill=\'%23444444\' d=\'M6.364,2.828l4.95,4.949l1.414-1.414L6.364,0l0,0L0,6.363l1.413,1.416L6.364,2.828\'/></svg>")';
    const $up_arrow_inv =            $svg_prefix + 'width=\'12.728px\' height=\'7.779px\' viewBox=\'0 0 12.728 7.779\' enable-background=\'new 0 0 12.728 7.779\' xml:space=\'preserve\'><path fill=\'%23CCCCCC\' d=\'M6.364,2.828l4.95,4.949l1.414-1.414L6.364,0l0,0L0,6.363l1.413,1.416L6.364,2.828\'/></svg>")';
    const $svg_arrow =               $svg_prefix + 'width=\'11px\' height=\'16px\' viewBox=\'234.5 248 11 16\' enable-background=\'new 234.5 248 11 16\' xml:space=\'preserve\'><path d=\'M245.5,261l-3,3l-8-8l8-8l3,3l-5,5L245.5,261z\'/></svg>")';
    const $toggle =                  $svg_prefix + 'width=\'13.779px\' height=\'12.729px\' viewBox=\'2.474 -2.475 13.779 12.729\' enable-background=\'new 2.474 -2.475 13.779 12.729\' xml:space=\'preserve\'> <path fill=\'%23444444\' d=\'M5.302,3.889l4.949-4.95L8.838-2.475L2.474,3.889l0,0l6.363,6.364l1.416-1.413L5.302,3.889\'/> <path fill=\'%23444444\' d=\'M11.302,3.889l4.949-4.95l-1.414-1.414L8.474,3.889l0,0l6.363,6.364l1.416-1.413L11.302,3.889\'/> </svg>")';
    const $check_mark =              $svg_prefix + 'width=\'17px\' height=\'14px\' viewBox=\'250.182 490.01 17 14\' enable-background=\'new 250.182 490.01 16.971 14.143\' xml:space=\'preserve\'><polygon fill=\'%23444444\' points=\'255.839,498.495 253.011,495.667 250.182,498.496 255.839,504.152 267.152,492.838 264.323,490.01 \'/></svg>")';
    const $check_mark_inv =          $svg_prefix + 'width=\'17px\' height=\'14px\' viewBox=\'250.182 490.01 17 14\' enable-background=\'new 250.182 490.01 16.971 14.143\' xml:space=\'preserve\'><polygon fill=\'%23CCCCCC\' points=\'255.839,498.495 253.011,495.667 250.182,498.496 255.839,504.152 267.152,492.838 264.323,490.01 \'/></svg>")';
    const $menu_arrow =              $svg_prefix + 'width=\'24px\' height=\'16px\' viewBox=\'0 0 24 16\' enable-background=\'new 0 0 24 16\' xml:space=\'preserve\'> <polygon fill=\'%23444444\' points=\'0,0 13.873,8.008 0.001,16.017 \'/> </svg>")';
    const $menu_arrow_inv =          $svg_prefix + 'width=\'24px\' height=\'16px\' viewBox=\'0 0 24 16\' enable-background=\'new 0 0 24 16\' xml:space=\'preserve\'> <polygon fill=\'%23CCCCCC\' points=\'0,0 13.873,8.008 0.001,16.017 \'/> </svg>")';
    const $menu_icon =               $svg_prefix + 'width=\'13px\' height=\'10px\' viewBox=\'0 0 13 10\' enable-background=\'new 0 0 13 10\' xml:space=\'preserve\'><rect fill=\'%23444444\' width=\'13\' height=\'2\'/><rect y=\'4\' fill=\'%23444444\' width=\'13\' height=\'2\'/><rect y=\'8\' fill=\'%23444444\' width=\'13\' height=\'2\'/></svg>")';
    const $grid_icon =               $svg_prefix + 'width=\'16px\' height=\'16px\' viewBox=\'0 0 16 16\' enable-background=\'new 0 0 16 16\' xml:space=\'preserve\'><g><path fill=\'%23666666\' d=\'M5,2v3H2V2H5 M7,0H0v7h7V0L7,0z\'/></g><g><path fill=\'%23666666\' d=\'M14,2v3h-3V2H14 M16,0H9v7h7V0L16,0z\'/></g><g><path fill=\'%23666666\' d=\'M5,11v3H2v-3H5 M7,9H0v7h7V9L7,9z\'/></g><g><path fill=\'%23666666\' d=\'M14,11v3h-3v-3H14 M16,9H9v7h7V9L16,9z\'/></g></svg>")';
    const $plus_sign =               $svg_prefix + 'width=\'16px\' height=\'16px\' viewBox=\'0 0 16 16\' xml:space=\'preserve\'><polygon points=\'16,6.5 9.5,6.5 9.5,0 6.5,0 6.5,6.5 0,6.5 0,9.5 6.5,9.5 6.5,16 9.5,16 9.5,9.5 16,9.5 \'/></svg>")';
    const $minus_sign =              $svg_prefix + 'width=\'16px\' height=\'16px\' viewBox=\'0 0 16 16\' xml:space=\'preserve\'> <rect x=\'1\' y=\'6.499\' width=\'14\' height=\'3.001\'/> </svg>")';
    const $next_track_arrow =        $svg_prefix + 'width=\'12.8px\' height=\'14px\' viewBox=\'-2 0 12.8 14\' enable-background=\'new -2 0 12.8 14\' xml:space=\'preserve\'><polygon fill=\'%23464547\' points=\'10.873,14.017 0,7.01 10.872,0 \'/><rect x=\'-2\' y=\'0\' fill=\'%23464547\' width=\'2\' height=\'14\'/></svg>")';
    const $next_track_arrow_gecko =  $svg_prefix + 'width=\'12.8px\' height=\'14px\' viewBox=\'-2 0 12.8 14\' enable-background=\'new -2 0 12.8 14\' xml:space=\'preserve\'><polygon fill=\'white\' points=\'10.873,14.017 0,7.01 10.872,0 \'/><rect x=\'-2\' y=\'0\' fill=\'white\' width=\'2\' height=\'14\'/></svg>")';
    const $next_track_arrow_gecko_hover = $svg_prefix + 'width=\'12.8px\' height=\'14px\' viewBox=\'-2 0 12.8 14\' enable-background=\'new -2 0 12.8 14\' xml:space=\'preserve\'><polygon fill=\'%236bb5ff\' points=\'10.873,14.017 0,7.01 10.872,0 \'/><rect x=\'-2\' y=\'0\' fill=\'%236bb5ff\' width=\'2\' height=\'14\'/></svg>")';
    const $music =                        $svg_prefix + 'width=\'143.717px\' height=\'199.404px\' viewBox=\'0 0 143.717 199.404\' enable-background=\'new 0 0 143.717 199.404\' xml:space=\'preserve\'><g opacity=\'0.2\'> <path fill=\'%23757679\' d=\'M143.717,143.82c0,10.033-4.573,18.425-13.717,25.183c-8.394,6.143-17.776,9.211-28.149,9.211 c-6.074,0-11.056-1.432-14.943-4.297c-4.301-3.275-6.45-7.849-6.45-13.719c0-9.279,4.403-17.438,13.204-24.466 c8.326-6.616,17.266-9.93,26.82-9.93c8.052,0,13.922,1.605,17.606,4.812V25.487L63.26,45.654v119.354 c0,10.03-4.573,18.427-13.717,25.181c-8.394,6.142-17.778,9.215-28.148,9.215c-6.077,0-11.055-1.437-14.947-4.302 C2.151,191.827,0,187.253,0,181.386c0-9.282,4.401-17.436,13.206-24.465c8.323-6.615,17.262-9.929,26.817-9.929 c8.051,0,13.921,1.605,17.606,4.812V23.237L143.717,0V143.82z\'/></g></svg>")';
    //SVG FILE ICONS
    // Chrome default icons
    const $file_icon_dir_default =   'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ")';
    const $file_icon_file_default =  'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ")';
    // Custom file icons
    const $svg_icon_prefix = 'url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' width=\'14px\' height=\'14px\' viewBox=\'0 0 14 14\' enable-background=\'new 0 0 14 14\' xml:space=\'preserve\'> ';
    const $file_icon_dir =           $svg_icon_prefix + '<polygon fill=\'%233399FF\' points=\'6.1,2.7 4.8,1 0,1 0,13 14,13 14,2.7 \'/> <rect x=\'1.5\' y=\'4.2\' fill=\'%2399CCFF\' width=\'11\' height=\'7.3\'/> </svg> ")';
    const $file_icon_dir_invisible = $svg_icon_prefix + '<polygon fill=\'%23888888\' points=\'6.1,2.7 4.8,1 0,1 0,13 14,13 14,2.7 \'/> <rect x=\'1.5\' y=\'4.2\' fill=\'%23BBBBBB\' width=\'11\' height=\'7.3\'/> <circle fill=\'%23888888\' cx=\'7\' cy=\'7.9\' r=\'1\'/> </svg> ")';
    const $file_icon_app =           $svg_icon_prefix + '<g> <polygon style=\'fill:%230066FF;\' points=\'14,0 0,0 0,14 14,14 \'/> </g> <path style=\'fill:%23FFFFFF;\' d=\'M6.466,3.696L5.854,3.421c-0.175-0.078-0.381,0.003-0.455,0.18L5.086,4.348l1.241,0.578l0.315-0.791 C6.71,3.965,6.632,3.771,6.466,3.696z\'/> <polygon style=\'fill:%23FFFFFF;\' points=\'4.955,4.663 2.755,9.922 4.091,10.544 6.201,5.243 \'/> <polygon style=\'fill:%23FFFFFF;\' points=\'2.625,10.237 2.563,12.166 3.955,10.856 \'/> <polygon style=\'fill:%23FFFFFF;\' points=\'9.998,6.663 10.569,8.027 13.143,8.027 13.143,6.663 \'/> <path style=\'fill:%23FFFFFF;\' d=\'M9.838,7.164L7.594,1.797C7.52,1.619,7.314,1.538,7.139,1.616L6.527,1.893 C6.36,1.968,6.282,2.16,6.35,2.329l2.17,5.449L9.838,7.164z\'/> <polygon style=\'fill:%23FFFFFF;\' points=\'9.97,7.479 8.646,8.096 9.021,9.035 10.367,8.43 \'/> <path style=\'fill:%23FFFFFF;\' d=\'M10.479,8.753l-1.3,0.585L9.178,9.339c-0.041,0.311-0.073,0.736,0.073,1.07 c0.35,0.798,1.045,1.264,0.923,1.959c0,0,0.887-1.152,0.989-1.896C11.286,9.579,10.82,9.05,10.479,8.753z\'/> <polygon style=\'fill:%23FFFFFF;\' points=\'5.459,8.027 8.251,8.027 7.708,6.663 6.003,6.663 \'/> <polygon style=\'fill:%23FFFFFF;\' points=\'3.749,6.663 0.857,6.663 0.857,8.027 3.178,8.027 \'/> </svg> ")';
    const $file_icon_file =          $svg_icon_prefix + '<g> <polygon fill=\'%23888888\' points=\'8.3,0 1.5,0 1.5,14 12.5,14 12.5,4.2 \'/> <polygon fill=\'%23FFFFFF\' points=\'11,12.5 3,12.5 3,1.5 6.8,1.5 6.8,5.7 11,5.7 \'/> <polygon fill=\'%23FFFFFF\' points=\'8.3,4.2 10.2,4.2 8.3,2.2 \'/> </g> </svg> ")';
    const $file_icon_text =          $svg_icon_prefix + '<g> <polygon style=\'fill:%238888AA;\' points=\'14,0 0,0 0,14 14,14 \'/> </g> <g> <rect x=\'2.155\' y=\'2.187\' style=\'fill:%23FFFFFF;\' width=\'9.69\' height=\'1.14\'/> </g> <g> <rect x=\'2.155\' y=\'5.036\' style=\'fill:%23FFFFFF;\' width=\'9.69\' height=\'1.14\'/> </g> <g> <rect x=\'2.155\' y=\'7.886\' style=\'fill:%23FFFFFF;\' width=\'9.69\' height=\'1.141\'/> </g> <g> <rect x=\'2.155\' y=\'10.736\' style=\'fill:%23FFFFFF;\' width=\'6.555\' height=\'1.14\'/> </g> </svg> ")';
    const $file_icon_image =         $svg_icon_prefix + '<g id=\'Layer_2\'> </g> <circle fill=\'%23FFEE22\' cx=\'5.5\' cy=\'3.2\' r=\'1.5\'/> <g> <path fill=\'%23FFFFFF\' d=\'M5.6,7.5L3.8,6L0.2,8.7c0.1,0.6,0.6,1.5,0.5,1.3l3-2.4L5.6,9l4.7-4l3.6,3.2l0,0C14,7.8,14,7.4,14,7 c0-0.1,0-0.3,0-0.4l-3.6-3.2L5.6,7.5z\'/> </g> <path fill=\'%2399AADD\' d=\'M3.8,6l1.8,1.5l4.8-4.1L14,6.6C13.8,2.9,10.7,0,7,0C3.1,0,0,3.1,0,7c0,0.6,0.1,1.2,0.2,1.7L3.8,6z\'/> <path fill=\'%233366CC\' d=\'M10.3,5L5.6,9L3.7,7.6l-3,2.4c1.1,2.4,3.5,4,6.3,4c3.4,0,6.3-2.5,6.9-5.8L10.3,5z\'/> <circle fill=\'%23FFE650\' cx=\'5.5\' cy=\'3.2\' r=\'1.5\'/> </svg> ")';
    const $file_icon_pdf =           $svg_icon_prefix + '<g> <polygon style=\'fill:%23D84444;\' points=\'14,0 0,0 0,14 14,14 14,0 \'/> </g> <path style=\'fill:%23FFFFFF;\' d=\'M12.634,9.094c-0.074,0.047-0.288,0.075-0.423,0.075c-0.439,0-0.981-0.202-1.745-0.529 c0.294-0.022,0.562-0.031,0.803-0.031c0.441,0,0.569,0,1.002,0.108C12.7,8.824,12.705,9.047,12.634,9.094z M4.99,9.162 c0.17-0.3,0.345-0.616,0.521-0.952c0.435-0.822,0.712-1.469,0.914-1.997c0.409,0.742,0.917,1.37,1.51,1.876 C8.011,8.151,8.09,8.212,8.174,8.276C6.962,8.519,5.914,8.809,4.99,9.162z M6.404,1.383c0.241,0,0.38,0.606,0.391,1.179 c0.011,0.568-0.12,0.965-0.287,1.265c-0.14-0.441-0.203-1.129-0.203-1.581C6.305,2.245,6.295,1.383,6.404,1.383z M1.663,12.3 c0.14-0.374,0.68-1.113,1.479-1.771c0.051-0.037,0.175-0.155,0.289-0.263C2.596,11.603,2.033,12.133,1.663,12.3z M12.864,8.31 c-0.24-0.238-0.781-0.363-1.599-0.373c-0.555-0.008-1.218,0.041-1.923,0.138C9.03,7.893,8.707,7.697,8.451,7.459 c-0.683-0.64-1.25-1.524-1.606-2.497c0.021-0.094,0.044-0.171,0.062-0.253c0,0,0.383-2.186,0.28-2.925 c-0.015-0.104-0.021-0.131-0.05-0.21L7.104,1.486c-0.103-0.241-0.31-0.497-0.633-0.483L6.283,0.997H6.28 c-0.358,0-0.654,0.184-0.729,0.456c-0.233,0.864,0.007,2.15,0.444,3.818L5.882,5.544c-0.312,0.76-0.704,1.527-1.048,2.203 L4.787,7.836c-0.362,0.71-0.693,1.315-0.99,1.825l-0.31,0.165c-0.021,0.014-0.551,0.292-0.675,0.367 c-1.053,0.628-1.752,1.343-1.868,1.91c-0.037,0.179-0.009,0.41,0.178,0.52l0.299,0.148c0.129,0.064,0.269,0.096,0.406,0.096 c0.75,0,1.621-0.931,2.817-3.023c1.387-0.452,2.965-0.828,4.347-1.035c1.052,0.595,2.346,1.006,3.163,1.006 c0.146,0,0.271-0.013,0.373-0.042c0.155-0.04,0.288-0.129,0.369-0.254c0.156-0.235,0.191-0.563,0.146-0.901 C13.032,8.519,12.95,8.395,12.864,8.31z\'/> </svg> ")';
    const $file_icon_font =          $svg_icon_prefix + '<g><polygon style=\'fill:%23770099;\' points=\'14,0 0,0 0,14 14,14 	\'/></g><g><path style=\'fill:%23FFFFFF;\' d=\'M4.599,11.321h1.44V2.774H3.334v1.088H1.83V1.222h10.34v2.641h-1.505V2.774H7.977v8.547h1.393v1.457 H4.599V11.321z\'/></g></svg>")';
    const $file_icon_code =          $svg_icon_prefix + '<g> <polygon style=\'fill:%237722DD;\' points=\'14,0 0,0 0,14 14,14 \'/> </g> <g> <path style=\'fill:%23FFFFFF;\' d=\'M5.892,12.965c-1.049,0-1.784-0.161-2.209-0.48c-0.425-0.317-0.638-0.82-0.638-1.503V8.915 c0-0.446-0.146-0.764-0.438-0.95C2.315,7.777,1.898,7.684,1.351,7.684V6.316c0.547,0,0.967-0.094,1.259-0.28s0.438-0.5,0.438-0.938 V3.006c0-0.675,0.217-1.172,0.65-1.491C4.13,1.195,4.862,1.036,5.893,1.036v1.312c-0.401,0.01-0.718,0.09-0.952,0.24 c-0.233,0.15-0.348,0.426-0.348,0.827V5.4c0,0.876-0.511,1.396-1.532,1.559v0.083c1.021,0.154,1.532,0.67,1.532,1.544v1.997 c0,0.41,0.116,0.688,0.349,0.835c0.233,0.146,0.55,0.223,0.951,0.232L5.892,12.965L5.892,12.965z\'/> <path style=\'fill:%23FFFFFF;\' d=\'M8.045,12.965v-1.313c0.392-0.009,0.706-0.089,0.944-0.239c0.236-0.15,0.355-0.426,0.355-0.829 V8.588c0-0.867,0.511-1.382,1.531-1.545V6.959C9.855,6.795,9.345,6.28,9.345,5.413V3.416c0-0.41-0.116-0.688-0.349-0.834 C8.764,2.436,8.447,2.358,8.045,2.349V1.036c1.049,0,1.785,0.159,2.21,0.479c0.423,0.319,0.637,0.821,0.637,1.505v2.065 c0,0.447,0.146,0.765,0.438,0.951c0.292,0.187,0.711,0.28,1.257,0.28v1.367c-0.546,0.012-0.967,0.107-1.259,0.287 C11.035,8.153,10.89,8.47,10.89,8.915v2.08c0,0.674-0.217,1.172-0.65,1.491C9.808,12.805,9.075,12.965,8.045,12.965z\'/> </g> </svg>")';
    const $file_icon_html =          $svg_icon_prefix + '<path style=\'fill:%23FFFFFF;\' d=\'M7,14c-3.9,0-7-3.1-7-7C0,3.2,3.1,0,7,0H7C8.9,0,10.6,0.7,12,2C13.3,3.4,14,5.1,14,7 c0,1.9-0.7,3.6-2,5C10.7,13.3,8.9,14,7,14C7,14,7,14,7,14z\'/> <g> <path style=\'fill:%23EE7700;\' d=\'M5.3,1.1C4.7,1.9,4.2,2.6,3.8,3.5C3.4,3.3,3,3.1,2.6,2.8C3.3,2.1,4.2,1.5,5.3,1.1z M2,3.6 c0.5,0.3,1,0.6,1.5,0.8C3.3,5,3.2,5.6,3.1,6.3c0,0.1,0,0.2,0,0.3H0.9C1,5.4,1.4,4.4,2,3.6z M2,10.4c-0.6-0.9-1-1.9-1.1-3h2.1 c0,0.8,0.2,1.5,0.4,2.2C2.9,9.9,2.5,10.1,2,10.4z M2.6,11.2c0.4-0.3,0.8-0.5,1.2-0.6c0.3,0.8,0.8,1.5,1.4,2.2c0,0,0.1,0.1,0.1,0.1 C4.2,12.5,3.3,11.9,2.6,11.2z M6.5,12.9c-0.2-0.2-0.5-0.5-0.7-0.7c-0.5-0.6-0.9-1.3-1.2-1.9C5.3,10,5.9,9.9,6.5,9.9V12.9z M6.5,9 C5.8,9,5,9.1,4.3,9.4C4.1,8.7,4,8.1,4,7.5h2.6V9z M6.5,6.5H4c0-0.1,0-0.1,0-0.2c0.1-0.6,0.2-1.2,0.3-1.7C5.1,4.9,5.8,5,6.5,5V6.5z M6.5,4.1C5.9,4.1,5.3,4,4.7,3.8c0.4-1,1.1-1.9,1.9-2.6V4.1z M12,3.6c0.6,0.9,1,1.9,1.1,3h-2.2c0-0.8-0.2-1.5-0.4-2.2 C11,4.1,11.5,3.9,12,3.6z M11.3,2.7c0,0,0.1,0.1,0.1,0.1c-0.4,0.3-0.8,0.5-1.2,0.7C9.9,2.7,9.4,2,8.8,1.3C8.8,1.3,8.7,1.2,8.7,1.1 C9.7,1.4,10.6,2,11.3,2.7z M7.5,1.2c0.2,0.2,0.5,0.5,0.7,0.7C8.6,2.5,9,3.1,9.3,3.8C8.7,4,8.1,4.1,7.5,4.1V1.2z M7.5,5 c0.7,0,1.5-0.2,2.2-0.4C9.9,5.3,10,5.9,10,6.5H7.5V5z M7.5,7.5H10c0,0.1,0,0.2,0,0.2c0,0.6-0.2,1.1-0.3,1.7C9,9.1,8.2,9,7.5,9V7.5z M7.5,12.9v-3c0.6,0,1.3,0.1,1.9,0.3C8.9,11.2,8.3,12.1,7.5,12.9z M11.3,11.3c-0.7,0.7-1.6,1.3-2.6,1.5c0.6-0.7,1.1-1.5,1.5-2.3 c0.4,0.2,0.8,0.4,1.2,0.6C11.4,11.2,11.4,11.2,11.3,11.3z M10.5,9.7c0.2-0.6,0.3-1.2,0.4-1.9c0-0.1,0-0.2,0-0.3h2.2 c-0.1,1.1-0.4,2.1-1.1,3C11.5,10.1,11,9.9,10.5,9.7z M7,0C3.1,0,0,3.1,0,7s3.1,7,7,7s7-3.1,7-7S10.9,0,7,0z\'/> </g> </svg>")';
    const $file_icon_ignored =       $svg_icon_prefix + '<path fill=\'%23888888\' d=\'M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0L7,0z\'/><path fill=\'%23BBBBBB\' d=\'M7,2c2.8,0,5,2.2,5,5s-2.2,5-5,5c-2.8,0-5-2.2-5-5S4.2,2,7,2\'/><rect x=\'0.8\' y=\'5.9\' transform=\'matrix(0.7071 -0.7071 0.7071 0.7071 -2.8818 7.0063)\' fill=\'%23888888\' width=\'12.5\' height=\'2.3\'/></svg>")';
    const $file_icon_invisible =     $svg_icon_prefix + '<g> <polygon fill=\'%23888888\' points=\'8.3,0 1.5,0 1.5,14 12.5,14 12.5,4.2 \'/> <polygon fill=\'%23BBBBBB\' points=\'11,12.5 3,12.5 3,1.5 6.8,1.5 6.8,5.7 11,5.7 \'/> <polygon fill=\'%23BBBBBB\' points=\'8.3,4.2 10.2,4.2 8.3,2.2 \'/> </g> <circle fill=\'%23777777\' cx=\'7\' cy=\'9\' r=\'1\'/> </svg>")';
//    const $file_icon_video = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><style type=\'text/css\'>.st0{fill:%23FFFFFF;}.st1{fill:%23EF6F2E;}</style><rect class=\'st0\' width=\'100\' height=\'100\'/><path class=\'st1\' d=\'M100 100H0V0h100V100zM9.7 90h80.7V10H9.7\'/><path class=\'st1\' d=\'M21 26.4v47.1h58V26.4H21zM31.9 69.9h-7.2v-7.2h7.2V69.9zM31.9 59.1h-7.2v-7.2h7.2V59.1zM31.9 48.2h-7.2v-7.2h7.2V48.2zM31.9 37.3h-7.2v-7.2h7.2V37.3zM42.8 62.7V37.3L60.9 50 42.8 62.7zM75.4 69.9h-7.2v-7.2h7.2V69.9zM75.4 59.1h-7.2v-7.2h7.2V59.1zM75.4 48.2h-7.2v-7.2h7.2V48.2zM75.4 37.3h-7.2v-7.2h7.2V37.3z\'/></svg>")';
//    const $file_icon_audio = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><style type=\'text/css\'>.st0{fill:%23FFFFFF;}.st1{fill:%230E3693;}.st2{fill:%23003399;}</style><rect class=\'st0\' width=\'100\' height=\'100\'/><path class=\'st1\' d=\'M100 100H0V0h100V100zM9.7 90h80.7V10H9.7\'/><polyline class=\'st2\' points=\'32.5 37.5 23.5 37.5 23.5 62.5 32.5 62.5 53.6 77 53.6 23 32.5 37.5 \'/><path class=\'st2\' d=\'M71.9 50c0 6.8-3.7 12.7-9.1 15.8l2.8 4.9c7.1-4.1 11.9-11.8 11.9-20.7 0-8.8-4.8-16.6-11.9-20.7l-2.8 4.9C68.2 37.3 71.9 43.2 71.9 50z\'/><path class=\'st2\' d=\'M62.1 50c0 3.2-1.7 5.9-4.3 7.4l2.7 4.7c4.2-2.4 7-6.9 7-12.1 0-5.2-2.8-9.7-7-12.1l-2.7 4.7C60.4 44.1 62.1 46.8 62.1 50z\'/></svg>")';
//    const $file_icon_archive = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><style type=\'text/css\'>.st0{fill:%23FFFFFF;}.st1{fill:%23D8A13F;}</style><rect class=\'st0\' width=\'100\' height=\'100\'/><path class=\'st1\' d=\'M100 100H0V0h100V100zM9.7 90h80.7V10H9.7\'/><path class=\'st1\' d=\'M72.4 38.5h-7.9v-7.9L72.4 38.5zM51.1 30.6v28.8h21.4v-19h-9.9v-9.9H51.1zM54.4 23H30.8v5.6h9.3l-5.9 4.5v4.8l8.6-6.6v-2.7h30.1v-2.3L54.4 23zM42.9 35.1l-8.6 6.6v4.8l8.6-6.6V35.1zM34.2 55.1l8.6-6.6v-4.8l-8.6 6.6V55.1zM42.9 57.1v-4.8l-8.6 6.6v2.6h-3.4v5.6h5.3v3.8H33c-0.6-1-1.6-1.6-2.8-1.6 -1.8 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c1.2 0 2.2-0.6 2.8-1.6h3.1V77h4.8v-2.9H44c0.6 1 1.6 1.6 2.8 1.6 1.8 0 3.2-1.4 3.2-3.2s-1.4-3.2-3.2-3.2c-1.2 0-2.2 0.6-2.8 1.6h-3.1v-3.8h13.5l18.5-3.3v-2.3H37.1L42.9 57.1z\'/></svg>")';
 
 
    function assembleUIElements() {
//        setParentLink();
 
	    $parents_dir_menu.find('div').append( $current_dir_path );
        $sidebar_header.find('thead th').append($toggle_sidebar);
	    $sidebar_header.find('tbody tr').first().find('td').first().append( $parent_dir_menu ).next().append( $parents_dir_menu ).next().append( $shortcuts_menu );
	    $sidebar_header.find('tbody tr:last-child td').append( $details_btn, $inv_checkbox, $grid_btn );
 
        $dir_list.append($dir_list_head, $dir_list_body);
        $sidebar.append($sidebar_header, $dir_list);
	    $sidebar_wrapper.append( $sidebar, $sidebar_overlay, $handle );
 
        $content_image.append( $image );
        $checkbox_cont.append( $loop, $shuffle );
        $content_media.append( $prev_track, $next_track, $audio, $checkbox_cont, $close_audio );
        $content_font.append( $specimen );
        $content_header.find('tr').first().append( $content_reload_btn, $content_title, $content_close_btn );
        $content_header.find('tr').last().append( $content_media );
	    $content_container.append( $content_header, $content_scale, $content_overlay, $content_grid, $content_image, $content_embed, $content_iframe, $content_font );
        $content_pane.append( $content_container, $prev_btn, $next_btn );
    }
    assembleUIElements();
 
    // ***** STYLES ***** //
 
    // DEFINE STYLES
    var $styles = '';
 
    $styles += 'html, body, :root { margin:0; padding:0; max-width:100%; height:100%; font-family:lucidagrande,"fira sans",helvetica,sans-serif; font-size:13px !important; hyphens:auto; overflow:hidden; border-radius:0; box-sizing:border-box; }';
    $styles += 'table { width:100%; border-collapse:collapse; }';
 
 
    // SIDEBAR
    $styles += '#sidebar_wrapper { width:'+ $UI_pref_width +'%; min-width:220px; will-change:width; padding:0; position:relative; border:0; background:lightgray; }';
 
    $styles += '#sidebar ul { margin:0; padding:0; -webkit-margin-before:0em !important; -webkit-margin-after:0em !important; -webkit-padding-start:0em; position:absolute; right:0; left:0; text-align:left; text-indent:0; list-style-type:none; background:lightgray; border:solid 1px gray; box-shadow: 0px 2px 3px -2px #888; display:none; }';
    $styles += '#sidebar li { display:block; }';
    $styles += '#sidebar a { text-decoration:none; }';
 
    $styles += '#sidebar { background-color:lightgray; height:'+ window.innerHeight +'px; min-height:100%; overflow-wrap:break-word; box-sizing:border-box; border-right:solid 1px gray; font-size:0.875em; color:#333; }';
    $styles += '#handle { width:8px; position:absolute; top:0; right:-4px; bottom:0; z-index:1000; cursor:col-resize; }';
    // SIDEBAR: Header
    $styles += '#sidebar_header { height:auto; position:relative; border:0; user-select:none; font-size:0.875rem; z-index:2000; }';
    $styles += '#sidebar_header thead tr, #sidebar_header tbody tr:first-of-type { border-bottom:solid 1px grey; background-color:#BBB; }';
    $styles += '#sidebar_header thead th { padding:4px; font-weight:normal; font-size:0.875em; letter-spacing:0.5em; cursor:default; }';
    $styles += '#sidebar_header tbody tr, #sidebar_header tbody tr:first-of-type td:first-of-type, #sidebar_header tbody tr:last-of-type td { position:relative; }';
    $styles += '#sidebar_header tbody tr td { padding:0; }';
    $styles += '#sidebar_header tbody tr:first-of-type td:hover { cursor:pointer; }';
    $styles += '#sidebar_header tbody tr:first-of-type td:nth-of-type(odd) { width:24px; max-width:24px; min-width:24px; }';
    $styles += '#sidebar_header tbody tr:first-of-type td:nth-of-type(even) { width:100%; border-left:solid 1px grey; border-right:solid 1px grey; }';
    $styles += '#sidebar_header tbody tr:last-of-type td { padding:6px 0; vertical-align:middle; white-space:normal; }';
    // SIDEBAR: Menu Parent
    $styles += '#parent_dir_menu { margin:0; padding:0; display:block; position:absolute; top:0; right:0; bottom:0; left:0; }';
    $styles += '#parent_dir_menu a { width:100%; height:100%; padding:0; display:block; text-align:center; vertical-align:middle; background:' + $up_arrow + 'center no-repeat; }';
    // SIDEBAR: Menu Parents
    $styles += '#parents_dir_menu { margin:0; padding:0; height:auto; text-align:center; }';
    $styles += '#parents_dir_menu div { padding:4px 6px; height:auto; display:inline-block; text-align:center; vertical-align:middle; overflow:hidden; cursor:pointer; hyphens:none; white-space:normal; }';
    $styles += '#parents_dir_menu + ul { z-index:100; border-right:0; border-left:0; }';
    $styles += '#parents_dir_menu + ul li a, #shortcuts_menu + ul li a, #shortcuts_menu + ul li > span { margin:0; padding:6px 8px; display:block; text-indent:0; color:#333; white-space:normal; }';
    // SIDEBAR: Menu Shortcuts
    $styles += '#shortcuts_menu { margin:0; padding:0; overflow:hidden; }';
    $styles += '#shortcuts_menu div { width:6em; display:table-cell; text-align:center; vertical-align:middle; font-size:18px; cursor:pointer; opacity:0.7; background:'+ $menu_icon + 'center no-repeat; }';
    $styles += '#shortcuts_menu + ul { z-index:9999; border-right:0; border-left:0; }';
    $styles += '#shortcuts_menu + ul > li.has_submenu { position:relative; background:'+ $menu_arrow +' right no-repeat; background-size: 12px; }';
    $styles += '#shortcuts_menu + ul > li.has_submenu:hover { background:#BBB '+ $menu_arrow +' right no-repeat; background-size: 12px;  }';
    $styles += '#shortcuts_menu + ul > li.has_submenu.ruled { border-bottom:solid 1px #999; }';
    $styles += '#sort_by, #donate { border-top:solid 1px #999; }';
    $styles += '#shortcuts_menu + ul > li > ul { width:100%; top:-1px; left:100%; }';
    $styles += '#shortcuts_menu div, #parent_dir_menu, #prev_btn, #next_btn { opacity:0.7; }';
    // SIDEBAR: Menu Shortcuts Sort
    $styles += '#sort_menu li span { padding-left: 2em !important; }';
    $styles += '#sort_menu li.checked span { background:'+ $check_mark +' 4px center no-repeat; background-size:12px; }';
    $styles += '#sort_menu .disabled span, #dir_list .disabled { color:#999 !important; cursor:default; }';
    // SIDEBAR: Menu Shortcuts Other items
    $styles += '#dark_theme { display:block; }';
    // SIDEBAR: Details Button
    $styles += '#details_btn { margin:0 0.5em; padding:2px 6px; border:solid 1px #333; border-radius: 3px; }';
    // SIDEBAR: Grid Button
    $styles += '#grid_btn { margin:0; width:28px; height:18px; float:right; cursor:pointer; outline:0; background:'+ $grid_icon +' center no-repeat;  }';
    $styles += '#grid_btn .menu { padding-right:29px; padding-left:0; top:-1px; right:0; left:0; border:solid grey; border-width: 1px 0 1px 1px; }';
    $styles += '#grid_btn .menu li { width:100%; padding:4px 6px; background:#CCC; display:block; clear:both; text-align:right; list-style:none; border-right:solid 1px grey; box-sizing:border-box; white-space:pre;}';
    $styles += '#grid_btn .menu li:first-of-type { border-bottom:solid 1px grey; }';
    $styles += '#grid_btn.has_images, #grid_btn.has_fonts { display:inline-block; }';
    // SIDEBAR: Toggle Sidebar
    $styles += '#toggle_sidebar { width:16pt; height:14pt; position:absolute; top:1px; right:2px; z-index:9999; background:'+ $toggle +' center no-repeat; background-size:12px; opacity:0.7; }';
    $styles += 'body.has_hidden_sidebar #toggle_sidebar { left:0; transform:rotate(180deg); }';
    $styles += 'body.has_hidden_sidebar #sidebar_header { z-index:unset; }';
    $styles += 'body.has_hidden_sidebar #sidebar_wrapper { width:0%; top:2px; left:3px; position:absolute; }';
    $styles += 'body.has_hidden_sidebar #content_pane { width:100%; }';
    $styles += 'body.has_hidden_sidebar #reload_btn { margin-left: 16pt; }';
 
    // DIR_LIST
    $styles += '#dir_list { min-wdth:100px; border:0; position:relative; overflow:hidden; table-layout:fixed; font-size:0.875rem; }';
    // DIR_LIST: tHead, tbody
    $styles += '#dir_list thead { white-space:pre-wrap; }';
    $styles += '#dir_list thead, #dir_list tbody { width:100%; position:absolute; left:0; right:0; text-align:left; }';
    // DIR_LIST: Sorting
    $styles += '#dir_list thead th { padding:0 24px 6px; cursor:pointer; }';
    $styles += '#dir_list thead th:last-of-type { margin-right:1em; }';
    $styles += '#dir_list thead th.details { padding-bottom: 9px !important; }';
    $styles += '#dir_list thead th.checked { margin-left:0 !important; margin-right:0 !important; background:'+ $check_mark +' 10px 2px no-repeat; position:relative; background-size:10px; }';
    $styles += '#dir_list thead th.checked:after { content:""; width:2em; height:8px; top:2px; display:inline-block; position:absolute; background:'+ $up_arrow +' center no-repeat; background-size:10px; }';
    $styles += '#dir_list thead th.checked:not(.up):after { transform:rotate(180deg); }';
    $styles += '#dir_list thead .name, #default { padding-left:2em; display:block; }';
    // DIR_LIST: tBody
    $styles += '#dir_list tbody { bottom:0; overflow-y:auto; border-top:solid 1px grey; outline:0; background-color:#DFDFDF; }';
    $styles += '#dir_list tbody .name { display:block; clear:right; text-align:left;}';
    $styles += '#dir_list tbody tr { padding-right:12px; display:block; margin-inline-start:0; clear:both; background:transparent; }';
    $styles += '#dir_list tbody a { margin:0; display:block; background-size:auto 13px; -webkit-padding-start:2m; padding: 4px 6px 4px 26px; color:#333; outline:none; overflow:hidden; background-position:6px 4px; white-space:normal; }';
    $styles += '#dir_list td.icon { height:16px; padding-left: 6px; }';
    $styles += '#dir_list .icon + td.name a { -webkit-padding-start:1em; padding-left:6px; }';
    $styles += '#dir_list .details { padding:0 0 4px 24px !important; font-size:0.875em; text-align:left; vertical-align:top; }';
    $styles += '#dir_list .details a { padding: 0; }';
    $styles += '#dir_list.show_details .details:not(.ext), body.is_gecko #dir_list.show_details #tbody > tr > td:not(:first-of-type) { display:inline-block; }';
    $styles += 'body.is_dirs_on_top #dir_list tbody tr.sorted:not(:last-of-type) { padding-bottom:2px; border-bottom:solid 1px #999; }';
    $styles += '#dir_list tbody tr.dir ~ tr:not(.dir,.invisible,.ignore) { border-top: solid 1px #999; }';
    // DIR_LIST: Audio/Video files
    $styles += 'body.has_audio #dir_list input { margin-top:1px; margin-right:8px; margin-bottom:1px; }';
    $styles += 'body.has_audio #dir_list thead input { display:inline-block; }';
    $styles += '#dir_list .audio a, #dir_list .video a { padding-left:4px; background:none; }';
    // DIR_LIST: Selected and Playing items
    $styles += '#dir_list .selected, #dir_list .selected.audio, #dir_list .playing { background:lightsteelblue; }';
    $styles += '#dir_list .selected a, #dir_list .playing a { font-weight:bold; color:#333; }';
    // DIR_LIST: Invisible and Ignored items
    $styles += '#dir_list tr.ignore a, #dir_list tr.ignore.app a, #dir_list tr.ignore td.details { color:#777; position:relative; }';
    // SIDEBAR: Hover styles
    $styles += '#grid_btn:hover, #sidebar_header tbody tr:first-of-type td:last-of-type:hover div, #parent_dir_menu:hover, #prev_btn:hover, #next_btn:hover, #toggle_sidebar:hover { opacity:1; }';
    $styles += '#shortcuts_menu + ul > li:hover > ul, #shortcuts_menu + ul > li > ul:hover, #grid_btn.has_images.has_fonts:hover ul.menu { display:block !important; }';
    $styles += '#parents_dir_menu + ul li:hover, #shortcuts_menu + ul li:not(.has_submenu):hover, #grid_btn.has_images.has_fonts:hover ul.menu li:hover, #dir_list tbody tr:hover, #dir_list .hovered { background:#BBB; }';
    // SIDEBAR: Hide stuff
    $styles += '#default_theme, #details_btn span:last-of-type, #grid_btn, #grid_btn .menu, #dir_list thead .name input, #dir_list .details { display:none; }';
    $styles += 'body.has_hidden_sidebar #handle, #dir_list thead th.checked:before, #dir_list thead td.icon, #dir_list tr:empty, #dir_list .audio td.icon, #dir_list .video td.icon, body.hide_invisibles .invisible, body.hide_ignored .ignore { content:""; display:none !important; }';
 
    // ***** CONTENT PANE STYLES ***** //
    $styles += '#content_pane { width:'+ (100 - $UI_pref_width).toString() +'%; will-change:width; padding:0; border:0; background:#FFF; position:relative; }';
    $styles += '#content_container { width:100%; height:100%; top:0; overflow:visible; }';
    // CONTENT: Overlay
    $styles += '#sidebar_overlay, #content_overlay { height:'+ window.innerHeight + 'px; position:absolute; top:0; right:0; bottom:0; left:0; display:none; z-index:9998; }';
    // CONTENT: Header
    $styles += '#content_header { width:100%; display:none; position:absolute; top:0; right:0; left:0; z-index:200; background:lightgray; border-bottom:solid 1px #AAA; font-size:0.875em; color:#333; text-align:center; }';
    $styles += '#content_header table { padding:7px 12px 5px; font-size:0.875rem; }';
    $styles += '#content_header tr:first-of-type td:first-of-type, #content_header tr:first-of-type td:last-of-type { width:6em; padding:4px 6px 3px; vertical-align:middle; }';
    $styles += '#content_header tr:first-of-type td:first-of-type { float:left; text-align:left; }';
    $styles += '#content_header tr:first-of-type td:last-of-type { float:right; text-align:right; }';
    $styles += '#content_header tr:last-of-type { border-top:solid #888 1px; }';
    $styles += '#content_header td button { word-break:none; hyphens:none; }';
    $styles += '#content_title { padding:4px 1em 3px; vertical-align:middle; word-break:break-word; text-align:center; }';
    $styles += '#content_pane[class*="content"] #content_header, body.is_playing #content_header { display:block !important; }';
    // CONTENT: Grid styles
    // Default Image and Font sizes
                var $grid_image_size = $settings.grid_image_size ? $settings.grid_image_size : 150;
                var $grid_font_size = $settings.grid_font_size ? $settings.grid_font_size : 1;
    $styles += '#content_grid { width:auto; display:none; position:absolute; right:0; bottom:0; left:0; overflow:auto; font-size:1em; background:#333; grid-gap:0; grid-template-columns:repeat(auto-fit, minmax('+ $grid_image_size +'px, 1fr)); grid-template-rows:repeat(auto, minmax('+ $grid_image_size +'px, 1fr)); z-index:1; }';
    $styles += '#content_grid .image_grid_item { display:inline-block; width:'+ $grid_image_size +'px; height:'+ $grid_image_size +'px; float:left; text-align:center; vertical-align:middle; }';
    $styles += '#content_grid:not(.has_grid) .image_grid_item.selected { background:#666; }';
    $styles += '#content_grid div img { width:auto; height:auto; max-width:'+ ($grid_image_size - $grid_image_size/8) +'px; max-height:'+ ($grid_image_size - $grid_image_size/8) +'px; position:relative; top:50%; transform:translateY(-50%); opacity:0.8; } ';
    $styles += '#content_grid:not(.has_grid) .image_grid_item:hover, #content_grid:not(.has_grid) div.image_grid_item.hovered { background:#555; }';
    $styles += '#content_grid .font_grid_item { width:calc(100% - 5rem); padding:0rem 2.5rem 0.5rem; display:block; font-size:'+ $grid_font_size * 3 +'em; text-align:left; outline:none; clear:both; }';
    $styles += '#content_grid .font_grid_item:first-of-type { padding-top:2rem; }';
    $styles += '#content_grid .font_grid_item:last-of-type { padding-bottom:2rem; }';
    $styles += 'body #content_grid div:hover, body #content_grid div.hovered { background:#DDD; }';
    $styles += 'body #content_grid div.selected { background:#CCC; }';
    // CONTENT: Image preview styles
    $styles += '#content_image {padding:2rem 2.5rem; position:absolute; top:0; right:0; bottom:0;left:0; display:none; background:#333; overflow:auto; text-align:center;}';
    $styles += '#content_image img[src="/"] { display:none; }';
    $styles += '#content_image img:not(.zoom_img) {width:auto; height:auto; max-width:100%; max-height:calc(100% - 3px); cursor:zoom-in; -webkit-user-select:none; position:relative; top:50%; transform:translateY(-50%); background:#FFF; };';
    $styles += '#content_image img.zoom_img { max-width:none !important; max-height:none !important; cursor:zoom-out; top:0; transform:translateY(0); background:"FFF" }';
    $styles += '.vert_center { top:50% !important; transform:translateY(-50%); }';
    // CONTENT: Font preview styles
    $styles += '#content_font { padding:2rem 2.5rem; display:none; position:absolute; right:0; bottom:0; left:0; overflow:auto; font-size:'+ $grid_font_size +'em; word-break:break-all; overflow-wrap:break-word; hyphens:none; outline:none; }';
    $styles += '.specimen { padding-bottom:0.25em; white-space:normal; text-align:left; }';
    $styles += '.lorem { margin-bottom:1em; text-align:justify; word-break:normal; white-space:normal; overflow-wrap:normal; hyphens:auto; line-height: 1.4; }';
    $styles += '.lorem.first { margin-top:0.5em; }';
    $styles += '.lorem.first:first-line { letter-spacing:1pt; font-variant:small-caps; font-size:'+ $grid_font_size*1.33 +'em; }';
    $styles += '.lorem + .lorem { columns:2; column-gap:1em;}';
    $styles += '.lorem + .lorem + .lorem { margin-bottom:2em; columns:3; }';
    // CONTENT: PDF (embed) and iFrame styles
    $styles += '#content_embed, #content_iframe { width:100%; height:100%; padding:0; position:absolute; top:0; right:0; bottom:0; left:0; border:0; display:none; }';
    // CONTENT: Audio/Video Content
    $styles += '#content_media { padding: 6px; text-align:center; display:none; }';
    $styles += '#checkbox_div { padding-left:6px; display:inline-block; }';
    $styles += '#checkbox_div label { display:block; float:left; clear:both; }';
    $styles += '#checkbox_div label input { margin-top:0; }';
    $styles += 'body.has_audio.autoload_audio #content_media, body.is_playing #content_media, body.is_paused #content_media { display:table-cell; }';
    $styles += 'body.has_audio #content_pane:not(.has_image_content) #content_image { display:block; background:'+ $music +' center no-repeat; background-size:33.33%; }';
    $styles += 'body.has_audio #content_pane.has_ignored_content #content_image { background:transparent; }';
    $styles += 'body.is_chrome #audio { background:rgb(241, 243, 244); }'; // tweak for new Chrome audio element
    // CONTENT: Audio Prev/Next Track buttons
    $styles += '#prev_track, #next_track { width:2em; height:2em; padding:0 0 0 8px; display:inline-block; background: rgb(241, 243, 244) '+ $next_track_arrow +' center no-repeat; background-blend-mode:difference; }';
    $styles += '#next_track { transform:rotate(180deg); }';
    $styles += '#prev_track:hover, #next_track:hover { background-blend-mode:normal; }';
    $styles += '#close_audio { width:14px; height:14px; border:solid 1px #222; border-radius:100%; float:right; background:#EEE '+ $plus_sign +' center no-repeat; background-size:10px; transform:rotate(45deg); opacity:.75; }'; // tweak for new Chrome audio element
    // CONTENT: Scale Buttons
    $styles += '#scale { background:rgba(128,128,128,0.3); position:absolute; right:1rem; opacity:0; transition:opacity 1s ease-in-out; display:block; z-index:10; }';
    $styles += '#scale span { width:2rem; height:2rem; font-size:2rem; display:block; text-align:center; cursor:pointer; }';
    $styles += '#scale span:first-of-type { opacity:0.3; background:'+ $plus_sign +' center no-repeat; }';
    $styles += '#scale span:last-of-type { opacity:0.3; background:'+ $minus_sign +' center no-repeat; }';
    $styles += '#scale span:hover { opacity:0.5; filter:invert(100%); background-color:#666; }';
    $styles += '#content_pane.has_font_content:hover #scale, #content_pane.has_grid_content:hover #scale, #content_pane.has_image_content:hover #scale { display:block; opacity:1; }';
    // CONTENT: Prev and Next Item buttons
    $styles += '#prev_btn, #next_btn { padding:0 1em; display:none; top:0; bottom:0; z-index:100; opacity:0.6; filter:invert(50%); background: ' + $svg_arrow + ' center no-repeat; }';
    $styles += '#prev_btn { position:absolute; left:0 !important; }';
    $styles += '#next_btn { position:absolute; right:0; transform:rotate(180deg); }';
    $styles += 'body:not(.has_audio) #content_pane.has_image_content #prev_btn, body:not(.has_audio) #content_pane.has_image_content #next_btn, body:not(.has_audio) #content_pane.has_font_content #prev_btn, body:not(.has_audio) #content_pane.has_font_content #next_btn { display:block; }';
    $styles += '#content_pane.has_image_content.has_grid_content #next_btn, #content_pane.has_image_content.has_grid_content #prev_btn { display:none; }';
    // CONTENT: Preview content
    $styles += '#content_pane.has_font_content #content_font, #content_pane.has_image_content #content_image, #content_pane.has_pdf_content #content_embed, #content_pane.has_file_content #content_iframe { display:block; }';
    $styles += '#content_grid.has_image_grid { padding-bottom:1rem; display:grid !important; }';
    $styles += '#content_grid.has_font_grid, #content_grid.has_grid { background:#FFF; display:block !important; }';
    $styles += '#content_pane[class*="hidden"] #content_grid { display:none !important; z-index:auto; }';
    $styles += '#content_pane.has_file_content #content_iframe { background:white; }';
    $styles += '#content_pane.has_ignored_content:before { content:""; background-image:'+ $file_icon_ignored +'; background-position:center; background-repeat:no-repeat; background-size:50%; position:absolute; top:0; right:0; bottom:0; left:0; opacity:0.33}';
 
 
    // DARK THEME STYLES
    $styles += 'body.dark_theme #sidebar, body.dark_theme #content_header, body.dark_theme #dir_list #tbody { background:#555; }';
    $styles += 'body.dark_theme #sidebar ul { background:#444; box-shadow:0px 2px 3px -2px #111; }';
    $styles += 'body.dark_theme #sidebar ul li:hover { background:#666; }';
    $styles += 'body.dark_theme #sidebar { border-right-color:#111; }';
    // DARK THEME: SIDEBAR Header
    $styles += 'body.dark_theme #sidebar_header thead tr, body.dark_theme #sidebar_header tbody tr:first-of-type { border-bottom:solid 1px black; background-color:#444; }';
    $styles += 'body.dark_theme #sidebar_header tbody tr:first-of-type td:nth-of-type(even) { border-left-color:#111; border-right-color:#111; }';
    // DARK THEME: SIDEBAR Menus
    $styles += 'body.dark_theme #sidebar_header .menu { border-top-color:#111; }';
    $styles += 'body.dark_theme #sidebar_header .menu, body.dark_theme #content_header { border-bottom-color:#111; }';
    $styles += 'body.dark_theme #shortcuts_menu + ul > li.has_submenu { background:'+ $menu_arrow_inv +' right no-repeat; background-size: 12px; }';
    $styles += 'body.dark_theme #shortcuts_menu + ul > li.has_submenu:hover { background:#666 '+ $menu_arrow_inv +' right no-repeat; background-size: 12px;  }';
    $styles += 'body.dark_theme #shortcuts_menu + ul > li > ul, body.dark_theme #shortcuts_menu + ul > li.has_submenu + li:not(.has_submenu) { border-color:#111; }';
    $styles += 'body.dark_theme #sort_menu li.checked a { background:'+ $check_mark_inv +' 4px center no-repeat; background-size:12px; }';
    $styles += 'body.dark_theme #sidebar tr *, body.dark_theme #content_header tr { color:#EEE; }';
    $styles += 'body.dark_theme #details_btn span { color:#333 !important; }';
    $styles += 'body.dark_theme #dark_theme { display:none; }';
    $styles += 'body.dark_theme #default_theme { display:block; }';
    // DARK THEME: SIDEBAR Grid Buttons
    $styles += 'body.dark_theme #sidebar #grid_btn, body.dark_theme #grid_btn .menu, body.dark_theme #parent_dir_menu, body.dark_theme #shortcuts_menu, body.dark_theme #toggle_sidebar { filter:invert(100%); }';
    $styles += 'body.dark_theme #sidebar #grid_btn ul.menu { background:transparent; border: solid #111; border-width: 1px 0 1px 1px; box-shadow:none !important; }';
    $styles += 'body.dark_theme #sidebar #grid_btn .menu li { background:#555; border-right-color: #111; }';
    $styles += 'body.dark_theme #sidebar #grid_btn .menu li:first-of-type { border-bottom-color: #111; }';
    $styles += 'body.dark_theme #sidebar #grid_btn .menu li:hover { background:#777; }';
    // DARK THEME: DIR_LIST
    $styles += 'body.dark_theme #dir_list #tbody { border-top:solid 1px #222; }';
    $styles += 'body.dark_theme #dir_list thead th.checked { color:#EEE; background:'+ $check_mark_inv +' 10px 2px no-repeat; background-size:10px; }';
    $styles += 'body.dark_theme #dir_list thead th.checked:after { content:" "; width:2em; height:1em; display:inline-block; background:'+ $up_arrow_inv +' center no-repeat; background-size:10px; }';
    $styles += 'body.dark_theme.is_dirs_on_top #dir_list tbody tr.sorted:not(:last-of-type) { border-bottom-color: #CCC; }';
    $styles += 'body.dark_theme.is_dirs_on_top #dir_list tbody tr.dir + tr.file { border-top-color: #CCC; }';
    $styles += 'body.dark_theme #dir_list tbody tr:hover, body.dark_theme #dir_list tbody li:hover, body.dark_theme #sidebar .hovered { background:#777 !important; }';
    $styles += 'body.dark_theme #dir_list tr.file.ignore a.icon, body.dark_theme #dir_list tr.ignore td.details { color:#BBBBBB; }';
    // DARK THEME: DIR_LIST Selected and Playing items
    $styles += 'body.dark_theme #dir_list .selected { background:slategray !important; }';
    $styles += 'body.dark_theme #dir_list .playing, body.dark_theme #dir_list .selected.audio { background: #4C7E80 !important; }';
    // DARK THEME: CONTENT
    $styles += 'body.dark_theme #content_pane, body.dark_theme #content_grid { background:#333; }';
    $styles += 'body.dark_theme #content_header tr:last-of-type { border-top: solid #333 1px; }';
    $styles += 'body.dark_theme #content_font, body.dark_theme .font_grid_item { color:#CCC; }';
    $styles += 'body.dark_theme #content_grid .font_grid_item.selected, body.dark_theme #content_grid .image_grid_item.selected { background:#666 !important }';
    $styles += 'body.dark_theme .font_grid_item:hover, body.dark_theme .font_grid_item.hovered, body.dark_theme .image_grid_item:hover, body.dark_theme .image_grid_item.hovered { background:#555 !important; }';
    $styles += 'body.dark_theme #content_pane.has_font_content hr { border-bottom-color:#CCC; }';
    $styles += 'body.dark_theme #content_iframe, body.dark_theme #close_audio { filter:invert(87.5%); }';
     // EXCLUDED: Prevent previewed files with these extensions from being inverted in dark mode
    for ( let i = 0, n = $row_settings.exclude.length; i < n; i += 1) {
        $styles += 'body.dark_theme #content_iframe[src*="'+ $row_settings.exclude[i] +'" i], body.dark_theme #content_iframe[src$="/" i] { background:white; filter:unset; }';
    }
 
    // FILE ICON STYLES
    $styles += 'body.use_default_icons #dir_list .dir a.icon { background:'+ $file_icon_dir_default + ' 6px 4px no-repeat; background-size:auto 13px; }';
    $styles += 'body.use_default_icons #dir_list .file a.icon { background:'+ $file_icon_file_default + ' 6px 4px no-repeat; background-size:auto 13px; }';
    $styles += 'body #dir_list tr.file.audio a.icon, body #dir_list tr.file.video a.icon { background: none !important }';
    $styles += 'body.use_custom_icons #dir_list img, #dir_list tr.file.audio a img, #dir_list tr.file.video a img { display:none; }';
    $styles += 'body.use_custom_icons #dir_list tr.file:not(.dir) a.icon { background: '+ $file_icon_file +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.file.font a.icon { background: '+ $file_icon_font +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.file.image a.icon { background: '+ $file_icon_image +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.file.pdf a.icon { background: '+ $file_icon_pdf +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.file[class*="htm"] a.icon { background: '+ $file_icon_html +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.file.ignore a.icon { background: transparent !important; }';
    $styles += 'body.use_custom_icons #dir_list tr.file.ignore a.icon::before { content:""; background: '+ $file_icon_ignored +' 6px 4px no-repeat; position:absolute; top:0; left:0; width:20px; height:18px; display:block; opacity:0.66; }';
    $styles += 'body.use_custom_icons #dir_list tr.file.invisible a.icon { background: '+ $file_icon_invisible +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.dir.invisible a.icon { background: '+ $file_icon_dir_invisible +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.dir:not(.app) a.icon { background: '+ $file_icon_dir +' 6px 4px no-repeat; background-size:14px 14px; }';
    $styles += 'body.use_custom_icons #dir_list tr.app a { background: '+ $file_icon_app +' 6px 4px no-repeat !important; background-size:14px 14px; }';
    // Plain text icons
    for ( let i = 0, n = $row_types.text.length; i < n; i += 1) {
        $styles += 'body.use_custom_icons #dir_list tr.file.'+ $row_types.text[i] +' a.icon { background: '+ $file_icon_text +' 6px 4px no-repeat; background-size:14px 14px }';
    }
    // Code file icons
    for ( let i = 0, n = $row_types.code.length; i < n; i += 1) {
        $styles += 'body.use_custom_icons #dir_list tr.file.'+ $row_types.code[i] +' a.icon { background: '+ $file_icon_code +' 6px 4px no-repeat; background-size:14px 14px }';
    }
 
    // MAIN CONTENT
    $styles += '#main_content { height:100%; border:0; overflow:hidden; }';
 
    // Gecko Styles:
    var $gecko_styles = '';
 
    $gecko_styles += 'html, body { border: solid 1px gray !important; }';
    $gecko_styles += 'button { padding:0; }';
    $gecko_styles += 'body.is_gecko #grid_btn .menu { top:-7px; left:-120px; }';
    $gecko_styles += 'thead {font-size:100%;}';
    $gecko_styles += '#dir_list th, #dir_list td {width:auto;}';
    $gecko_styles += '#dir_list .dir::before {position:absolute;}';
    $gecko_styles += 'body.is_gecko.use_default_icons:not(.is_converted_list) #dir_list .file .name .icon { padding-left:4px; background:none; }';
    $gecko_styles += 'body.is_gecko.use_default_icons #dir_list .file .name .icon img { margin-right:6px; height:14px; }';
    $gecko_styles += 'body.is_gecko #dir_list #tbody > tr > td:not(:first-of-type) { padding:0 24px 4px; }';
    $gecko_styles += 'body.is_gecko #dir_list #tbody > tr > td:last-of-type { text-indent:6px; }';
    $gecko_styles += '#prev_track, #next_track { background: #3F3F3F  '+ $next_track_arrow_gecko +' center no-repeat; }';
    $gecko_styles += 'body.dark_theme #prev_track, body.dark_theme #next_track { background: #252525  '+ $next_track_arrow_gecko +' center no-repeat;  }';
    $gecko_styles += 'body #prev_track:hover, body #next_track:hover { background: #252525  '+ $next_track_arrow_gecko_hover +' center no-repeat;  }';
    $gecko_styles += '#prev_track:hover, #next_track:hover { background-blend-mode:difference; }';
    $gecko_styles += '#content_header tr:first-of-type td:first-of-type, #content_header tr:first-of-type td:last-of-type { padding-top:8px; }';
 
    const $font_preview_styles = document.createElement('style');
    const $custom_styles = document.createElement("style");
    const $custom_gecko_styles = document.createElement("style");
 
    function addStyles() {
        // for font previews
        $font_preview_styles.appendChild(document.createTextNode(""));
        document.head.append($font_preview_styles);
        var $font_styles = '';
        $font_preview_styles.append( $font_styles );
 
        // basic UI styles
        $custom_styles.appendChild(document.createTextNode(""));
        $custom_styles.append($styles);
        document.head.appendChild($custom_styles);
 
        // Firefox styles
        if ( $userAgent.indexOf('Firefox') > -1 ) {
            $custom_gecko_styles.appendChild(document.createTextNode(""));
            $custom_gecko_styles.append($gecko_styles);
            document.head.appendChild($custom_gecko_styles);
        }
    }
    // ***** END STYLES ***** //
 
    // ***** BUILD MENUS ***** //
 
    const parentLinksArr = function() {
        var $paths_arr = [];
        var $path = window.location.pathname;
        while ( $path.lastIndexOf('/') > 0 ) {
            $path = $path.slice( 0,$path.lastIndexOf('/') );
            $paths_arr.push($path);
        }
        if ( $userAgent.indexOf('Firefox') > -1 ) {
            $paths_arr.push('///'); }
        else {
            $paths_arr.push('//'); // root
        }
        return $paths_arr;
    };
 
    // MENUS: Create menu list items
    var $menu_item;
    const menuItems = function(x,y,i,b) { // (link, name, count, boolean)
        let $qstr = '/?';
        if ( b === true ) {
            $protocol = '';
            $qstr = '';
            $query_prefs = '';
        }
        $menu_item = '<li><a href="'+ $protocol + x[i] + $qstr + $query_prefs +'">' + y[i] + '/</a></li>';
        return $menu_item;
    };
 
    var $parent_dir_link;
    function setParentLink() {
        var $query_prefs = new URLSearchParams( window.location.search );
            $query_prefs.delete('file');
 
        $UI_pref_history_arr = $query_prefs.get('history') !== null ? $query_prefs.get('history').split(' ') : [];
 
        if ( $UI_pref_history_arr.length == 1 ) {
            $query_prefs.set('selected',$UI_pref_history_arr.shift(0));
            $query_prefs.delete('history');
        } else if ( $UI_pref_history_arr.length > 1 ) {
            $query_prefs.set('selected',$UI_pref_history_arr.shift(0));
            $query_prefs.set('history',$UI_pref_history_arr.join('+'));
        } else {
            $query_prefs.delete('selected');
        }
        let $qstr = $query_prefs.toString().length == 0 ? '' : '?';
        $query_prefs.sort();
        $parent_dir_link = $protocol + $location_arr.slice(0,-2).join('/') +'/'+ $qstr + decodeURIComponent($query_prefs);
 
        $parent_dir_menu.find('a').attr( 'href', $parent_dir_link );
    }
    setParentLink();
 
    $parent_dir_menu.on('click','a',function(e) {
        e.preventDefault();
        setParentLink();
        $('#parent_dir_menu').find('a').attr( 'href', $parent_dir_link );
        window.location = $parent_dir_link;
    });
 
    // MENUS: Directory Parents Links
    const parents_dir_menu_arr = function() {
	    var $parents_dir_menu_items = [];
    	for ( let i = 1, n = parentLinksArr().length + 1; i < n; i+=1 ) {
	        $parents_dir_menu_items[i] = menuItems( parentLinksArr(), parentLinksArr(), i, false);
    	}
        $parents_dir_menu_items.pop(); // remove current directory
 
		if ( $parents_dir_menu_items[1] !== undefined ) {
			let str = $parents_dir_menu_items[1].slice($parents_dir_menu_items[1].lastIndexOf('?'),$parents_dir_menu_items[1].lastIndexOf('">'));
 
			for ( let i = 1; i < $parents_dir_menu_items.length; i+=1 ) {
				// recursively update selected and history query str
				str = str.replace(/selected=\d+&*/,'').replace(/history=(\d+)$/,'selected=$1').replace(/history=(\d+)\+/,'selected=$1&history=').replace(/&$/,'');
				$parents_dir_menu_items[i] = $parents_dir_menu_items[i].replace(/\?.+?">/,str +'">');
			}
		}
 
        $parents_dir_menu_items = $parents_dir_menu_items.join('')
            .replace(/%20/g,' ').replace(/file=.+?&/g,'&').replace(/file=.+?/g,'').replace(/>\/(?!\/)/g,'>').replace(/>\/\/\/\/</,'>/<').replace(/>\/\/\/</,'>/<');
        return $parents_dir_menu_items;
    };
 
    // MENUS: Shortcuts
    var $menu_items = [];
    var $shortcuts_links_arr = [];
 
    const shortcutMenus = function() {
        const $shortcuts = $settings.shortcuts;
 
        if ( $shortcuts.length > 0 ) {
 
            for ( let i = 0; i < $shortcuts.length; i+=1 ) {
                var $links_arr = [];
                var $links = $shortcuts[i].links;
 
                for ( let j = 0; j < $links.length; j+=1 ) {
                    if ( !$links[j].link.endsWith('/') ) {
                        $links[j].link = $links[j].link.slice(0,$links[j].link.lastIndexOf('/') + 1) + '?file=' + $links[j].link.slice($links[j].link.lastIndexOf('/') + 1) ;
                    }
                    $shortcuts_links_arr.push($links[j].link);
                    $links_arr[j] = '<li><a href="'+ $links[j].link +'">' + $links[j].link_name + '</a></li>';
                }
 
                var $links_arr_str = $links_arr.join('');
                $menu_items[i] = '<li class="has_submenu"><a>'+ $shortcuts[i].menu_title +'</a><ul>'+ $links_arr_str +'</ul></li>';
            }
            $menu_items = $menu_items.join('');
        }
        return ($shortcuts_links_arr,$menu_items);
    }
    shortcutMenus();
 
    // MENUS: Other menu items
//    var   $sort_by =          $('<li id="sort_by" class="has_submenu ruled"><a href="">Sort by&hellip;</a><ul id="sort_menu"><li><a href="">Name</a></li><li id="sort_by_size"><a href="">Size</a></li><li id="sort_by_date"><a href="">Date</a></li><li><a href="">Kind</a></li><li><a href="">Extension</a></li><li><a href="">Default</a></li></ul>');
    var   $sort_by =          $('<li id="sort_by" class="has_submenu ruled"><span>Sort by&hellip;</span><ul id="sort_menu"><li><span>Name</span></li><li id="sort_by_size"><span>Size</span></li><li id="sort_by_date"><span>Date</span></li><li><span>Kind</span></li><li><span>Extension</span></li><li><span>Default</span></li></ul>');
    const $toggle_dark_theme = $('<li id="toggle_dark_theme_menu_item"><a href="#"><span id="dark_theme">Dark Theme</span><span id="default_theme">Default Theme</span></a></li>');
    const $default_settings =  $('<li><a href="#" id="default_settings" title="Delete URL query string and reload page.">Default Settings</a></li>');
    const $export_settings =  $('<li><a href="#" id="export_settings" title="Export user settings to text file.">Export Settings</a></li>');
    const $donate_link =      $('<li><a href="#" id="donate" href="https://paypal.me/mschrauzer" target="_blank">Donate</a></li>');
 
    function assembleMenus() { // called by buildUI();
        $parents_dir_menu.siblings('ul').append( parents_dir_menu_arr() );
        $shortcuts_menu.siblings('ul').append( $menu_items, $sort_by, $toggle_dark_theme, $default_settings, $export_settings, $donate_link );
    }
 
    // ***** END BUILD MENUS ***** //
 
    // ***** DIRECTORY LIST Set Up ***** //
 
    // CONVERT VARIOUS SERVER-GENERATED INDEX PAGES TO DEFAULT (Chrome) STRUCTURE
 
    var $list_items, $rows;
    var yr, mo, dd, pref;
    var factor = {k:1, kb:1, m:1000, mb:1000, g:1000000, gb:1000000, t:1000000000,tb:1000000000}
    var sizeCalc = function(x,y) {
        y === '' ? y = 'k' : y = y;
        return x == '-' ? 0 : x * factor[ y.toString().toLowerCase() ]; // convert size abbreviation to multiplaction factor
    }
 
    // Convert matched date and size strings to default size and date format, calculate data-values for sorting
    var sizeAndDate = function(match,p1,p2,p3,p4,p5,p6,offset,string) {
        p1.toString().length == 4 ? (yr = p1, dd = p3) : (yr = p3, dd = p1);
        p2.toString().length == 3 ? mo = "JanFebMarAprMayJunJulAugSepOctNovDec".indexOf(p2)/3 + 1 : mo = p2; // convert month into number, or use number
        p6 = undefined|'' ? p6 = 1 : p6 = p6;
        mo.toString().length == 1 ? pref = 0 : pref = null; // add a zero before single digit months (i.e., multiply year by 10)
        return '<td class="size details" data-value="'+ sizeCalc(p5,p6) +'">' + [p5,p6].join('') + '</td><td class="date details" data-value="' + [yr, pref, mo, dd, p4.replace(/:/, '') ].join('') +'">'+ [yr, mo, dd].join('-') +' '+ [p4].join(':') +'</td></tr>\n';
    };
 
    // AMPPS index pages
    if ( window.location.href.indexOf('localhost') > -1 && $body.find('> title:contains(AMPPS)').length ) {
        $dir_list = $body.find('> center > div > table');
        $dir_list.remove();
        $body.addClass('is_ampps').empty().append($dir_list);
    }
 
    // Pre type
    if ( window.location.href.indexOf('file:') == -1 && $body.find('> pre').length > 0 ) {
        $list_items = $body.find('> pre').html();
        $body.addClass('is_converted_pre').find('> pre').remove();
 
        $list_items = $list_items
            .replace(/^.+?\n/, '') // delete header row
            .replace(/^.+?Parent Directory.+?\n/gm, '\n') // delete parent directory link
            .replace(/^\s*<a.+?>\.\.\/<\/a>\s*$/gm, '') // delete parent directory link (list type)
            .replace(/^\s*<img .+?>\s*/gm, '') // delete all images (icons)
            .replace(/^\s*<address>.+?<\/address>\s*/,'') // delete address element
            .replace(/^\s*<a href="(.+?)">(.+?)<\/a>\s*/gm, '<tr><td data-value="$2"><a class="icon" href="$1">$2</a></td>') // create name cell
            .replace(/(\d{2}|\d{4})[\/-](\d{2}|\w{3})[\/-](\d{2}|\d{4})\s+?([\d:]+)\s*([\.\d]+)([A-z]{0,2})\s*$/gm, sizeAndDate); // dates (search dd-mmm-yyyy hh:mm) and sizes
    }
 
    // List type
    if ( window.location.href.indexOf('file:') == -1 && $body.find('> ul').length > 0 ) {
        $list_items = $body.find('> ul').html();
        $body.addClass('is_converted_list').find('> ul').remove();
 
        if ( $list_items.indexOf('</a></li>') != -1 ) {
            $list_items = $list_items.replace(/<li>\s*/g,'<tr><td data-value="">').replace(/\s*<\/li>/g, '</td></tr>\n');
            $list_items = $list_items.replace(/data-value=""><a href="(.+?)">\s+(.+?)<\/a>/g, 'data-value="$2"><a class="icon" href="$1">$2<\/a>');
            $list_items = $list_items.replace(/<tr.+?Parent Directory.+?<\/tr>/,'');
        }
    }
 
    // Table type
    if ( window.location.href.indexOf('file:') == -1 && $body.find('> table').length > 0 ) {
        $list_items = $body.find('> table tbody').length > -1 ? $body.find('> table tbody').html() : $body.find('> table');
        $body.addClass('is_converted_table').find('> table').remove();
 
        $list_items = $list_items
//            .replace(/<img .+?>/g, '') // delete all images (icons)
            .replace(/<tr><th.+?\/th><\/tr>/g, '') // delete empty tr
            .replace(/<tr><td.+?Parent Dir.+?<\/td><\/tr>/, '') // delete empty tr
            .replace(/(?:<th>|<td>|<td \w+="\w+">)(?:&nbsp;|\s*)(?:<\/th>|<\/td>)/g, '') // delete empty th or td
            .replace(/<td>\s*<a href="(.+?)">(.+?)<\/a>\s*<\/td>/g, '<td class="name" data-value="\L$2"><a class="icon" href="$1">$2</a></td>')
            .replace(/<tr><td.*?><img (.+?)><\/td><td (.+?)><a (.+?)>(.+?)<\/a>/g, '<tr><td $2><a $3><img $1>$4</a>') // move default image to .name td
            .replace(/(?:<td>|<td \w+="\w+">)(\d{4}|\d{2})-(\d{2}|\w{3})-(\d{4}|\d{2})\s*([\d:-]*)\s*<\/td>(?:<td>|<td \w+="\w+">)\s*([-\.\d]*)([A-z]*)\s*<\/td><\/tr>/g, sizeAndDate)
            .replace(/^\s*<address>.+?<\/address>\s*$/,''); // delete address line
    }
 
    // Convert Gecko-style local index pages
    if ( window.location.href.indexOf('file:') > -1 && $userAgent.indexOf('Firefox') > -1 ) {
        $body.find('> table').find('> thead').find('th[colspan="2"]').attr('colspan',1);
        $list_items = $body.find('> table').find('> tbody').html();
        $body.find('> table').remove();
 
        $list_items = $list_items
            .replace(/<table class="ellipsis"><tbody><tr><td>/g,'')
            .replace(/<\/a><\/td><\/tr><\/tbody><\/table>/g,'')
            .replace(/sortable-data="\d+?/g,'data-value="')
            .replace(/<td data-value="(\d+)">([\d-]+)<\/td>\s*<td>(.+?)<\/td>/g,'<td data-value="$1">$2, $3</td>')
            .replace(/<td(.+?)><a/g,'<td class="name" $1><a class="icon"');
    }
 
    // Default Chrome type
    if ( window.location.href.indexOf('file:') > -1 && $body.find('> table').length > 0 && $userAgent.indexOf('Firefox') < 0) {
        $list_items = $body.find('> table tbody').html();
        $body.addClass('is_default_table').find('> table').remove();
    }
 
    // ***** END CONVERT INDEX PAGES ***** //
 
    $dir_list_body.append($list_items);
 
    var $dir_list_row = $dir_list_body.find('> tr');
    var $dir_list_item_name = $dir_list_row.find('a').parent('td');
    var $dir_list_details = $dir_list_item_name.nextAll();
        $dir_list_details.addClass('details');
 
    // ***** END CONVERT INDEX PAGES ***** //
 
    // ***** PREPARE DIR LIST ***** //
 
    var $this_link;
    var $this_text;
    var $this_ext;
 
    // Get dir_list item row
    var thisRow = function(x) {
        return $(x).closest('#dir_list > tbody > tr').length ? $(x).closest('#dir_list > tbody > tr') : $(x).closest('#dir_list > li');
    };
    // Get dir_list item link
    var thisLink = function(x) {
        return $(x).find('a').length ? decodeURI( $(x).find('a').attr('href') ) : decodeURI( $(x).attr('href') ) ;
    };
    // Get dir_list item name
    var thisText = function(x) {
        return $(x).find('a').length ? decodeURIComponent( $(x).find('a').text().toLowerCase() ) : decodeURIComponent( $(x).text().toLowerCase() );
    };
    var thisExt = function(x) {
        return thisLink(x).toLowerCase().endsWith('app/') ? 'app' : thisLink(x).toLowerCase().endsWith('/') ? '/' : $(x).find('a').attr('href').toLowerCase().slice( $(x).find('a').attr('href').lastIndexOf('.') + 1 );
    }
 
    // Dir_List: Classify items
    function classifyDirListItems() {
 
        $dir_list_row.each(function() {
 
            let row = {};
            $this_link = thisLink(this);
            $this_text = thisText(this);
            $this_ext = thisExt(this);
 
            // Add ID and lowercase .name data
            $(this).attr('id',$(this).index()).find('td').first().addClass('name').attr( 'data-value',$this_text.toLowerCase() ); // add ID
 
            if ( $this_ext === '/' ) {
                $(this).addClass('dir').attr('data-ext','dir');
            } else {
                $(this).addClass('file').attr('data-ext',$this_ext);
            }
            if ( $this_text.indexOf('.') === 0 ) {
                $(this).addClass('invisible');
            }
 
            $(this).append('<td class="detailsColumn details kind" data-value="File">File</td>')
                   .append('<td class="detailsColumn details ext" data-value="'+ $this_ext +'">&nbsp;</td>');//attr('data-ext',$this_ext);
 
            // For listed supported file types
            for ( let key in $row_types ) {
 
                if ( $row_types[key].includes($this_ext) ) {
 
                    let $display_key = key.charAt(0).toUpperCase() + key.slice(1);
                    let kind = $display_key === undefined ? 'File' : $display_key;
                    $(this).addClass(key).addClass($this_ext).attr('data-type',$display_key);
 
                    if ( key === 'audio' || key === 'video' ) {
                        $(this).find('a').prepend('<input type="checkbox" tabindex="-1" checked="true" />');
                    }
                    $(this).find('td.kind').attr('data-value',kind).text(kind);
                }
            };
            // For ignored and excluded items
            for ( let key in $row_settings ) {
                if ( $row_settings[key].includes($this_ext) ) {
                    $(this).addClass(key);
                }
                if ( $row_settings[key].includes($this_ext) && key == 'ignore' ) {
                }
            }
 
        }); // end classify dir_list items
    }
 
    // ***** END DIR_LIST SETUP ***** //
 
    // ***** UI SETUP ***** //
 
    // Add body classes depending on available content types
    function bodyClasses() {
        if ( $userAgent.indexOf('Chrome') > 0 ) {
            $body.addClass('is_chrome');
        }
        if ( $userAgent.indexOf('Firefox') > 0 ) {
            $body.addClass('is_gecko');
        }
        if ( $dir_list.find('.image').length ) {
            $body.add($grid_btn).addClass('has_images');
        }
        if ( $dir_list.find('.font').length ) {
            $body.add($grid_btn).addClass('has_fonts');
        }
        if ( $dir_list.find('.audio').length ) {
            $dir_list.add($body).addClass('has_audio');
        }
        if ( $dir_list.find('.video').length ) {
            $dir_list.add($body).addClass('has_video');
        }
    }
 
    function init() {
        addStyles();
 
        if ( navigator.platform.indexOf('Win') > -1 || window.location.href.indexOf('file:') < 0 ) {
            $inv_checkbox.hide();
        }
        if ( $settings.hide_invisibles === true ) {
            $inv_checkbox.find('input').prop('checked',true);
            $body.addClass('hide_invisibles');
        }
        if ( $settings.hide_ignored_files === true ) {
            $body.addClass('hide_ignored');
        }
        if ( $UI_pref_details === false ) {
            $dir_list.addClass('show_details');
            $dir_list_body.css({'top':$dir_list_head.height() + 1 +'px'});
            $details_btn.find('span').first().hide().next().show();
        }
        if ( $UI_pref_theme === true ) {
            $body.addClass('dark_theme');
        }
        if ( $settings.use_custom_icons === true ) {
            $body.addClass('use_custom_icons');
        } else {
            $body.addClass('use_default_icons');
        }
        // Hide audio controls if $settings.autoload_audio = false (but show when audio file is selected)
        if ( $settings.autoload_audio === true ) {
            $body.addClass('autoload_audio');
        }
        if ( $settings.autoload_index_files === true ) {
            autoSelectFile();
        }
 
    }
    init();
 
    function buildUI() {
        assembleMenus();
        classifyDirListItems();
        bodyClasses();
 
        $dir_list.appendTo($sidebar);
 
        var $main_content = $('<table id="main_content"><tbody><tr></tr></tbody></table>');
        $main_content.find('tr').append( $sidebar_wrapper, $content_pane );
 
        $body.empty().prepend($main_content);
 
        if ( $body.hasClass('is_converted_list') ) {
            $('#sort_by_size, #sort_by_date, #size, #date').addClass('disabled');
        }
 
        if ( $body.hasClass('is_converted_table') || $body.hasClass('is_converted_pre') ) {
            if ( $dir_list.find('td.size').length < 1 ) {
                $('#sort_by_size,th#size').addClass('disabled');
            };
            if ( $dir_list.find('td.date').length < 1 ) {
                $('#sort_by_date,th#date').addClass('disabled');
            };
        }
    }
    buildUI();
 
    // ***** BASIC UI FUNCTIONS ***** //
 
    function showMenus(el) {
        var $position = $(el).position();
        $(el).find('> ul').css({'top':$position.top + $(el).innerHeight() + 'px'}).toggle().parent('td').siblings('td').find('.menu').hide();
    }
    $parents_dir_menu.add($shortcuts_menu).parent('td').on('click',function(e) {
        e.stopPropagation();
        showMenus(this);
    });
 
    function hideMenus() {
        $('.menu').hide();
    }
    $(document).on('click', hideMenus );
 
    function toggleInvisibles() {
        $body.toggleClass('hide_invisibles');
    }
    $inv_checkbox.on('click','input', toggleInvisibles );
 
    function toggleDarkMode(e) {
        e.preventDefault();
        $body.toggleClass('dark_theme');
        toggleQuery('dark_theme');
    }
    $toggle_dark_theme.on('click', toggleDarkMode );
 
    function toggleDetails() {
        $dir_list.toggleClass('show_details');
        $dir_list_body.css({'top':$dir_list_head.height() + 1 +'px'});
        $details_btn.find('span').toggle();
        toggleQuery('hide_details');
    }
    $details_btn.on('click', toggleDetails );
 
    function toggleSidebar() {
        $body.toggleClass('has_hidden_sidebar');
        setContentHeight();
    }
    $toggle_sidebar.on('click', toggleSidebar);
 
    // Default settings: remove queries;
    function defaultSettings() {
        $location = window.location.href;
        $location = $location.slice(0,$location.lastIndexOf('?'));
        window.location.assign($location);
    }
 
    $default_settings.on('click', function() {
        if (window.confirm( "Are you sure you want to reset all your temporary UI settings to the defaults in your user_settings?" ) ) {
            defaultSettings();
        }
    });
 
    function setContentHeight() {
        var $dir_list_head_height = $dir_list_head.length ? $dir_list_head.height() : 0;
        var $content_headerHeight = $content_header.outerHeight();
        $dir_list.add($dir_list_wrapper).css({'height':window.innerHeight - $sidebar_header.outerHeight() });
        $dir_list.find($dir_list_body).css({'top': $dir_list_head_height });
        $content_image.css({'top':$content_headerHeight });
        $content_grid.add($content_embed).add($content_iframe).add($content_font).css({'height':window.innerHeight - $content_headerHeight,'top':$content_headerHeight });
        $content_scale.css({'top':$content_headerHeight + 13 });
        $content_media.find('> div:first-of-type').add('#content_media > div:nth-of-type(2)').css({'height':$audio.height() });
        $('#checkbox_div').css({'margin-right': - $('#checkbox_div').outerWidth() });
    }
    setContentHeight();
    $('window').on('resize', setContentHeight );
 
    function setContentTitle() {
 
        if ( $content_pane.hasClass('has_grid_content') && $content_grid.hasClass('has_grid') ) {
            $content_title.empty().prepend('Images and Fonts from: ' + $current_dir_name);
            return;
        }
        if ( $content_pane.hasClass('has_grid_content') && $content_grid.hasClass('has_image_grid') ) {
            $content_title.empty().prepend('Images from: ' + $current_dir_name);
            return;
        }
        if ( $content_pane.hasClass('has_grid_content') && $content_grid.hasClass('has_font_grid') ) {
            $content_title.empty().prepend('Fonts from: ' + $current_dir_name);
            return;
        }
        if ( $body.hasClass('has_audio') && $settings.autoload_audio === true ) {
            $content_title.empty().prepend( thisText($('.playing')) );
            return;
        }
            $content_title.empty().prepend( $('.selected').find('a').text() );
 
        if ( $('.selected').hasClass('ignore') ) {
            $content_title.prepend('Ignored content: ' );
        }
        if ( $('.selected').hasClass('dir') ) {
            $content_title.prepend('Index of: ' );
        }
    }
 
    function getDimensions(link, callback) {
        var img = new Image();
        img.src = link;
        img.onload = function() { callback( this.width, this.height ); };
    }
 
    function scrollSidebar(row) {
	    var $block = $userAgent.indexOf('Firefox') > -1 ? $block = 'start' : $block = 'nearest';
        if (row[0] !== undefined ) {
            row[0].scrollIntoView({ behavior:'smooth', block:$block, inline:'nearest' });
        }
    }
 
    function scrollGrid(item) {
	    var $block = $userAgent.indexOf('Firefox') > -1 ? $block = 'start' : $block = 'nearest';
        if (item[0] !== undefined ) {
            item[0].scrollIntoView({ behavior:'smooth', block:$block, inline:'nearest' });
        }
    }
 
    // ***** SORTING ***** //
 
    var $sort_all = $dir_list_body.find('tr');
    var $sort_dirs = $dir_list_body.find('tr.dir').not('.app');
    var $sort_files = $dir_list_body.find('tr').not('.dir').add('.app');
    var currentIndex, prevIndex;
    var $default_index = $('#thead').find('#default').index();
    var $sort_direction = 1;
 
    var dataName = function(x) {
        return $(x).find('td').eq(0).data('value').toString();
    };
    var dataData = function(x,index) {
        return $(x).find('td').eq(index).attr('data-value') === undefined ? '' : $(x).find('td').eq(index).attr('data-value').toString();
    };
 
    // comparison functions
    var sortByName = function(x,y,sortDirection) {
        return sortDirection === 1 ? dataName(x).localeCompare(dataName(y)) : dataName(y).localeCompare(dataName(x));
    };
 
    var sortByData = function(x,y,index,sortDirection) { // sort by data then by name
        if ( sortDirection === 1 ) {
            return dataData(x,index).localeCompare(dataData(y,index), undefined, { numeric:true }) === 0 ? dataName(x).localeCompare(dataName(y)) : dataData(x,index).localeCompare(dataData(y,index), undefined, { numeric:true });
        } else {
            return dataData(y,index).localeCompare(dataData(x,index), undefined, { numeric:true }) === 0 ? dataName(y).localeCompare(dataName(x)) : dataData(y,index).localeCompare(dataData(x,index), undefined, { numeric:true });
        }
    };
 
    // sort elements: sort by name if index = 0, else sort by data-value.
    var sortEls = function(els,index,sortDirection) {
        els.detach().sort(function(a,b) {
            return index === 0 ? sortByName(a,b,sortDirection) : sortByData(a,b,index,sortDirection);
        });
    };
 
    function sortDirList(index, sortDirection) {
        $dir_list_row.removeClass('sorted');
 
        if ( index == $default_index ) {
            if ( index == $default_index ) {
                index = 0;
            }
 
            sortEls( $sort_dirs, index, sortDirection );
            sortEls( $sort_files, index, sortDirection );
 
            if (sortDirection === 1 ) {
                $.each($sort_dirs, function() { $dir_list_body.append(this); });
                $.each($sort_files, function() { $dir_list_body.append(this); });
            } else {
                $.each($sort_files, function() { $dir_list_body.append(this); });
                $.each($sort_dirs, function() { $dir_list_body.append(this); });
            }
 
        } else if ( $settings.dirs_on_top === false || index == 0 && index !== $default_index ) {
            sortEls( $sort_all, index, sortDirection );
            $.each($sort_all, function() { $dir_list_body.append(this); });
            $body.removeClass('is_dirs_on_top');
 
        } else if ( $settings.dirs_on_top === true || index !== 0 ) {
            sortEls( $sort_dirs, index, sortDirection );
            sortEls( $sort_files, index, sortDirection );
 
            if (sortDirection === 1 ) {
                $.each($sort_dirs, function() { $dir_list_body.append(this); });
                $.each($sort_files, function() { $dir_list_body.append(this); });
            } else {
                $.each($sort_files, function() { $dir_list_body.append(this); });
                $.each($sort_dirs, function() { $dir_list_body.append(this); });
            }
        }
        if ( index === $('#thead').find('#kind').index() || index === $('#thead').find('#ext').index() ) {
            $body.addClass('is_dirs_on_top');
            addSortStyle( index, sortDirection );
        }
    }
 
    function addSortStyle(index, sortDirection) {
        var $this_value, $next_value;
        $dir_list_row.removeClass('sorted');
 
        $dir_list_row.filter(':visible').not('.dir').add('.app').each(function() {
            $this_value = $(this).find('td').eq(index).attr('data-value');
            $next_value = $(this).next('tr:visible').find('td').eq(index).attr('data-value');
 
            if ( $this_value !== $next_value ) {
                $(this).addClass('sorted');
            }
 
            if ( $(this).attr('data-type') !== $(this).next('tr:visible').attr('data-type') ) {
                $(this).addClass('sorted');
            }
        });
 
        if ( sortDirection == 1 ) {
            $dir_list_row.filter('.dir').last().addClass('sorted');
        }
    }
 
    // Sort on click
    function clickSort(x,y) { // x = clicked sort link, y = bool (false ? don't set query_prefs)
        currentIndex = x.index();
 
        if ( currentIndex != prevIndex ) { // Only reverse sort order after clicking a sort column once.
            prevIndex = currentIndex;
            $sort_direction = 1;
        }
 
        sortDirList(currentIndex, $sort_direction);
        $sort_direction = -1 * $sort_direction;
 
        x.toggleClass('up').addClass('checked').siblings().removeClass('checked up');
        $('#sort_menu').find('li').eq(currentIndex).addClass('checked').siblings().removeClass('checked');
 
        setContentHeight();
 
        if ( y === true ) {
            $query_prefs = getQueryPrefs();
            $query_prefs.set('sort',$('#sort_menu').find('li').eq(currentIndex).text().toLowerCase() );
            updateQuery();
        }
    }
 
    // Sort on clicking dir_list sort header
    $('#thead').on('click','th:not(.disabled)',function(e) {
        e.preventDefault();
        var i = $(this).index();
        clickSort( $(this),true)
    });
 
    // Sort Menu: click the list header that contains the selected menu text.
    $('#sort_menu').on('click','li:not(.disabled)',function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).addClass('checked').siblings().removeClass('checked');
        $('#theader th[id*="'+ thisText($(this)).slice(0,2) +'" i]').click();
        setContentHeight();
    });
 
    // Initialize page
//    var $sort = $settings.default_sort.toLowerCase();
    function initialSort() {
        switch ( $UI_pref_sort ) {
            case 'name':
                i = 0;
                break;
            case 'size':
                i = 1;
                break;
            case 'date':
                i = 2;
                break;
            case 'kind':
                i = 3;
                break;
            case 'ext':
                i = 4;
                break;
            default:
                i = 5;
        }
        $('#theader').find('th').eq(i).click();
    }
    initialSort();
 
    // ***** END SORTING ***** //
 
    // ***** END BASIC UI FUNCTIONS ***** //
 
    // ***** CONTENT PREVIEW ***** //
 
    var $selected = $dir_list_row.filter('.selected');
    var $playing = $dir_list_row.filter('.playing');
 
    // Select row on click and set classes for $content_pane
    function selectThis(row) {
        // If autoload_audio === true, navigate audio and other files separately; otherwise, treat audio files like any other
        if ( $settings.autoload_audio == true ) {
            if ( row.hasClass('audio') || row.hasClass('video') ) {
                row.addClass('playing').siblings().removeClass('playing hovered');
                $content_pane.addClass('has_audio_content');
            } else {
                row.addClass('selected').siblings().removeClass('selected hovered');
//                previewThis( row, thisLink(row) );
            }
        }
        if ( $settings.autoload_audio == false ) {
            row.addClass('selected').siblings().removeClass('selected playing hovered');
            if ( row.hasClass('audio') || row.hasClass('video') ) {
                row.addClass('playing');
                $content_pane.addClass('has_audio_content');
            } else {
                $content_pane.removeClass('has_audio_content');
            }
        }
 
        if ( row.hasClass('dir') ) {
            closeThis();
            closeGrid();
            $content_pane.removeClass().addClass('has_dir_content');
        }
 
        // Select corresponding grid item
        var $grid_selected = $content_grid.find('div.font_grid_item[href="'+ thisLink(row) +'"]').add('div.image_grid_item a[href="'+ thisLink(row) +'"]').parent('div').addBack();
        if ( $content_pane.hasClass('has_grid_content') ) {
            $grid_selected.addClass('selected').siblings().removeClass('selected');
            $grid_selected = $content_grid.find('.selected');
            // scrollGrid( $grid_selected ); // not working reliably together with scroll sidebar
        }
 
        setContentTitle();
        scrollSidebar(row);
    }
 
    function showIgnored() {
        closeThis();
        $content_pane.addClass('has_ignored_content');
        $content_title.append(' (Ignored content)' );
    }
 
    function showMedia(row) {
        if ( $settings.autoload_audio == false ) { closeContent(); }
        $content_pane.addClass('has_audio_content');
        $body.hasClass('is_playing') ? $task = 'stop' : $task = 'play';
        $playing = row;
        playThis( $playing.index('.audio:not(.unchecked)'),$task );
    }
 
    function showImage(row,link) {
        $content_pane.addClass('has_image_content');
        $content_image.find('img').removeClass('zoom_img').attr('src',link).attr('style','');
        getDimensions( link, function( width, height ) {
            if ( !$body.is('.has_audio') ) {
                $content_title.append(' <span style="text-transform:lowercase;">(' + width + 'px &times; ' + height + 'px</span>)' );
            }
        });
        $content_grid.find('a[href="' + thisLink(row) + '"]').parent('div').addClass('selected').siblings().removeClass('selected');
    }
 
    function showPdf(link) {
        $content_pane.addClass('has_pdf_content');
        $content_embed.attr('type','application/pdf').attr('src',link + '?#zoom=100&scrollbar=1&toolbar=1&navpanes=1');
    }
 
    function showFile(link) {
        $content_pane.addClass('has_file_content');
        $content_iframe.attr('src',link);
    }
 
    function showFont(row,link) {
        var $font_family = thisText(row);
 
        if ( $font_family_arr.indexOf($font_family) == -1 ) {
            $font_family_arr.push($font_family);
            $font_preview_styles.append('@font-face { font-family: "'+ $font_family +'"; src: url("'+ link +'"); }'); // only add style if it doesn't exist
        }
 
        $content_pane.addClass('has_font_content');
        $content_font.css({ 'font-family':'"'+ $font_family +'"' });
    }
 
    // Show selected content
    function previewThis(row,link) {
        if ( $content_pane.hasClass('has_grid_content') ) {
            hideGrid();
        }
        if ( row.hasClass('unchecked') ) {
         //   return;
        }
        if ( row.hasClass('ignore') ) {
            showIgnored();
            return;
        }
        if ( row.hasClass('audio') ) {
            showMedia(row);
            return;
        }
        if ( row.hasClass('font') ) {
            showFont(row,link);
            return;
        }
        if ( row.hasClass('image') ) {
            showImage(row,link);
            return;
        }
        if ( row.hasClass('pdf') ) {
            showPdf(link);
            return;
        }
        if ( row.hasClass('file') || row.hasClass('dir')) {
            showFile(link);
            return;
        }
    }
 
// ***** MAIN CLICK FUNCTIONS FOR PREVIEWING CONTENT ***** //
 
    // CLICK ROW & SET UI
    function clickDirListLink(row) {
        hideMenus();
        closeContent();
        selectThis( thisRow(row) );
        previewThis( thisRow(row), thisLink(row) );
        setContentTitle();
        setContentHeight();
    }
 
    // CLICK ROW
    function clickRow(row) {
        // toggle play/pause, or click list item
        if ( $body.hasClass('is_playing') && thisRow( row ).hasClass('playing') ) {
            playAudio('pause');
        } else if ( $body.hasClass('is_paused') && thisRow( row ).hasClass('playing') ) {
            playAudio('play');
        } else {
            clickDirListLink( row );
        }
    }
    $dir_list_row.on('click','a', function(e) {
        e.preventDefault();
        e.stopPropagation();
        clickRow( $(this) );
    });
 
    // DOUBLE-CLICK DIRECTORY
    function doubleClickRow(row) {
        if ( row.hasClass('dir') ) {
            $query_prefs = getQueryPrefs();
            var $history = $query_prefs.get('history') === null ? '' : '+'+ $query_prefs.get('history');
            var $current_index = row.prevAll('.dir:visible:not(.ignore)').length;
            $history = $current_index + $history; // update history
            $query_prefs.delete('selected');
            $query_prefs.set('history',$history);
            updateQuery();
            window.location = row.find('a').attr('href') +'?'+ $query_prefs;
        }
    }
    $dir_list_row.filter('.dir').on('dblclick', function(e) {
        e.preventDefault();
        e.stopPropagation();
        doubleClickRow( $(this) );
    });
 
    // Prev and Next Buttons
    function prevNextItem(e) {
        e = $.Event("keydown");
 
        if ( $(this).attr('id') === 'prev_btn' ) {
            $playing.length ? e.key = 'ArrowUp' : e.key = 'ArrowLeft';
        } else {
            $playing.length ? e.key = 'ArrowDown' : e.key = 'ArrowRight';
        }
 
        $dir_list.trigger(e);
    }
	$content_pane.on( 'click','#prev_btn, #next_btn', prevNextItem );
 
    // AUTOLOAD index files or files from the file shortcut list;
    function autoSelectFile() {
        if ( $UI_pref_selected !== '' ) {
            let $selectThisRow = $dir_list.find('tbody tr:not(.invisible)').eq($UI_pref_selected);
            clickThis( $selectThisRow );
        } else
        if ( $UI_pref_file !== '' ) {
            let $selectThisRow = $dir_list_row.find('a:contains('+ $UI_pref_file +')');
            clickThis( $selectThisRow );
        } else
        if ( $dir_list.find( 'a[href*="/index."]').length > -1 ) {
            $dir_list.find( 'a[href*="/index."]').click();
            return;
        }
    }
    autoSelectFile();
 
    // File shortcuts: load directory, then auto-select file
    function showFileShortcut(item) {
        $this_link = thisLink(item);
        window.location = $this_link.slice( 0, $this_link.lastIndexOf('/') );
    }
 
    // RESET CONTENT
 
    function resetAudio() {
        var $this_src = $audio.find('source').attr('src');
        $audio.find('source').attr('src',$this_src);
        $audio.trigger('load');
        return;
    }
 
    function resetFont() {
        $content_font.css({'font-size':'1em'});
    }
 
    function resetGrid() {
        $content_grid.attr('style','');
        $content_grid.find('.image_grid_item, img').attr('style','');
        setContentHeight();
    }
 
    function resetImage() {
        $content_image.attr('data-image-scale-factor',1).find('img').attr('style','');
    }
 
    function reloadThis() {
        if ( $content_pane.hasClass('has_dir_content') || $content_pane.attr('class') === '' || $('#content_pane[class]').length < 1 ) {
            window.location = window.location.href;
        }
        if ( $content_pane.hasClass('has_font_content') || $content_pane.hasClass('has_image_content') ) {
//            resetAudio();
            resetFont();
            resetImage();
        }
        if ( $content_pane.hasClass('has_grid_content') ) {
            $grid_btn.click();
        }
        if ( $content_pane.hasClass('has_file_content') ) {
	        $('.selected').find('a').click();
        }
        if ( $content_pane.hasClass('has_audio_content') ) {
            $audio.prop('currentTime', 0);
            playAudio('stop');
        }
        setContentHeight();
    }
    $content_reload_btn.on('click', reloadThis );
 
    // CLOSE CONTENT (Close button or Cmd/Ctrl + W)
 
    function closeContent() {
        $content_embed.removeAttr('src');
        $content_iframe.removeAttr('src');
        $content_font.css({'font-family':''});
        $content_image.find('img').removeAttr('src');
        resetImage();
        $content_pane.removeClass('has_image_content has_font_content has_file_content has_pdf_content has_ignored_content')
        if ( $settings.autoload_audio === true ) {
            //$audio.trigger('pause').find('source').attr('src','');
        } else {
            $audio.trigger('pause').find('source').attr('src','');
            $body.removeClass('is_playing').removeClass('is_paused');
            $content_pane.removeClass('has_audio_content');
        }
    }
 
    function closeThis() {
        hideMenus();
 
        if ( $content_pane.hasClass('has_grid_content') ) {
            closeGrid();
        }
        else if ( $content_pane.hasClass('has_hidden_grid') ) {
            closeContent();
            $content_pane.removeClass().addClass('has_grid_content');
        } else {
            $content_pane.removeClass();
            closeContent();
        }
        setContentTitle();
    }
    $content_close_btn.on( 'click', closeThis );
 
    $('#close_audio').on('click',function() {
        $audio.trigger('pause').find('source').attr('src','');
        $body.removeClass('is_paused');
        $content_pane.removeClass('has_audio_content');
        setContentHeight();
    });
 
    // ***** KEYBOARD EVENTS AND NAVIGATION ***** //
 
    function clickThis(el) {
        el.find('a').length > 0 ? el.find('a').click() : el.click();
    }
 
    function navigateToThis(row) {
    	if ( $content_pane.hasClass('has_grid_content') ) {
    		selectThis(row);
    	} else {
			clickThis(row);
    	}
    }
 
    // Select dir_list_row by typed string
    var str = '',
        timer;
 
    function timeoutID() {
        timer = window.setTimeout( function() {
            str = '';
        }, 1500 );
    };
 
    function alphaNav(e) {
        if (typeof timer == 'number' ) {
            window.clearTimeout( timer );
            timer = 0; // id
        }
        timeoutID();
        str += e.key
        // Select row; todo: select next row by nearest letter
        $('#dir_list').find('td.name[data-value^="'+ str +'"]').first().find('a').click();
    }
 
    // KEYBOARD EVENTS
    $body.on('keydown',$dir_list,function(e) {
 
        $dir_list_row = $dir_list.find('tbody tr:not(.unchecked)').filter(':visible');
        $selected = $dir_list.find('tbody tr.selected');
        var $selected_href = thisLink($selected);
        $playing = $dir_list_row.filter('.playing');
        var $time;
 
        var firstRow = function(className) {
            return className == undefined ? $dir_list_row.first() : $dir_list_row.filter( className ).first();
        }
        var lastRow = function(className) {
            return className == undefined ? $dir_list_row.last() : $dir_list_row.filter( className ).last();
        }
        var nextRow = function(className) {
            return className == undefined ? $selected.nextAll(':visible:not(.unchecked)').first() : $selected.nextAll( className ).filter(':visible:not(.unchecked)').first();
        }
        var prevRow = function(className) {
            return className == undefined ? $selected.prevAll(':visible:not(.unchecked)').first() : $selected.prevAll( className ).filter(':visible:not(.unchecked)').first();
        }
 
        switch ( e.key ) {
 
            case 'ArrowUp':
 
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    $('#parent_dir_menu a').trigger('click');
                    break;
                }
 
                if ( $('*[contentEditable="true"]').is(':focus') ) {
                    return; // Allow arrow navigation within content_editable elemnets
                }
 
                e.preventDefault();
 
                if ( $settings.autoload_audio === true ) {
                    prevRow(':not(.audio, .video)').length < 1 || $selected.length < 1 ? clickThis( lastRow(':not(.audio, .video)') ) : clickThis( prevRow(':not(.audio, .video)') );
                }
                if ( $settings.autoload_audio === false ) {
                    prevRow().length < 1 || $selected.length < 1 ? ( scrollSidebar( lastRow() ), clickThis( lastRow() ) ) : clickThis( prevRow() );
                }
 
                ( prevRow().length < 1 || $selected.length < 1 ) && $settings.autoload_audio === false ? scrollSidebar( lastRow() ) : scrollSidebar( $('.selected') );
                break;
 
            case 'ArrowDown':
 
                if ( (e.ctrl || e.metaKey) && $selected.hasClass('app') && $settings.apps_as_dirs === false ) {
                    return;
                } else if ( $('*[contentEditable="true"]' ).is(':focus') ) {
					return;
				} else if ( (e.ctrl || e.metaKey) && $selected.hasClass('dir') ) {
                    $selected.find('a').trigger('dblclick');
                    break;
                }
 
                e.preventDefault();
 
                if ( $settings.autoload_audio === true ) { // select non-audio items
                    nextRow(':not(.audio, .video)').length < 1 || $selected.length < 1 ? clickThis( firstRow(':not(.audio, .video)') ) : clickThis( nextRow(':not(.audio, .video)') );
                }
                if ( $settings.autoload_audio === false ) { // select any item
                    nextRow().length < 1 || $selected.length < 1 ? ( scrollSidebar( firstRow() ),clickThis( firstRow() ) ) : clickThis( nextRow() );
                }
 
                nextRow().length < 1 || $selected.length < 1 ? scrollSidebar( firstRow() ) : scrollSidebar( $('.selected') );
                break;
 
            case 'ArrowLeft':
 
                if ( (e.ctrl || e.metaKey) || ( e.ctrl && e.metaKey ) ) {
                    return;
                } else if ( $('*[contentEditable="true"]').is(':focus') ) {
					return;
                }
 
                // Skip audio -30s
                if ( e.altKey && e.shiftKey ) {
                    $time = $audio.prop('currentTime');
                    $audio.prop('currentTime', $time - 30);
                    return;
                }
                // Skip audio -10s
                if ( e.altKey ) {
                    $time = $audio.prop('currentTime');
                    $audio.prop('currentTime', $time - 10);
                    return;
                }
 
                // Navigate Grid or Images
                if ( $body.hasClass('has_audio') && !$content_grid.hasClass('has_grid') && $playing.length < 1 ) {
                    playThis( $dir_list.find('.audio:not(.unchecked)').length - 1,'stop');
                    setContentHeight();
                    return;
                } else if ( $playing.length > 0 ) {
                    prevTrack('stop');
                    setContentHeight();
                    return;
                } else if ( $selected.length < 1 || $selected.hasClass('dir') || firstRow().hasClass('selected') ) {
                    if ( $body.hasClass('has_fonts') ) {
                        navigateToThis( lastRow('.font') );
                    } else if ( $body.hasClass('has_images') ) {
                        navigateToThis( lastRow('.image') );
                    } else {
                        navigateToThis( lastRow() );
                    }
                } else if ( $selected.hasClass('image') ) {
                    if ( prevRow('.image').length > 0 ) {
                        navigateToThis( prevRow('.image') );
                    } else if ( lastRow('.font').length > 0 ) {
                        navigateToThis( lastRow('.font') );
                    } else {
                        navigateToThis( lastRow('.image') )
                    }
                } else if ( $selected.hasClass('font') ) {
                    if ( prevRow('.font').length > 0 ) {
                        navigateToThis( prevRow('.font') );
                    } else if ( lastRow('.image').length > 0 ) {
                        navigateToThis( lastRow('.image') );
                    } else {
                        navigateToThis( lastRow('.font') )
                    }
                } else {
                    lastRow('.image').length ? navigateToThis( lastRow('.font') ) : navigateToThis( lastRow('.image') );
                }
 
                scrollSidebar( $('tr.selected') );
                if ( $content_pane.hasClass('has_grid_content') ) {
                    scrollGrid( $('div.selected') );
                }
                scrollSidebar( $('tr.selected') );
                resetImage();
                break;
 
            case 'ArrowRight':
 
                if ( (e.ctrl || e.metaKey) || ( e.ctrl && e.metaKey ) ) {
                    return;
                } else if ( $('*[contentEditable="true"]').is(':focus') || $selected.hasClass('dir ignore') ) {
					return;
                }
 
                // Skip audio 30s
                if ( e.altKey && e.shiftKey ) {
                    $time = $audio.prop('currentTime');
                    $audio.prop('currentTime', $time + 30);
                    return;
                }
                // Skip audio 10s
                if ( e.altKey ) {
                    $time = $audio.prop('currentTime');
                    $audio.prop('currentTime', $time + 10);
                    return;
                }
 
                if ( $selected.hasClass('dir') && ( !$body.hasClass('has_audio') && !$content_pane.hasClass('has_grid_content') ) ) {
                    $selected.find('a').trigger('dblclick');
                    return;
                }
 
                // Navigate Grid or Images
                if ( $body.hasClass('has_audio') && !$content_grid.hasClass('has_grid') && $playing.length < 1 ) {
                    playThis(0,'stop');
                    return;
                } else if ( $playing.length > 0 ) {
                    nextTrack('stop');
                    return;
                } else if ( $selected.length < 1 || $selected.hasClass('dir') || lastRow().hasClass('selected') ) {
                    if ( $body.hasClass('has_images') ) {
                        navigateToThis( firstRow('.image') );
                    } else if ( $body.hasClass('has_fonts') ) {
                        navigateToThis( firstRow('.font') );
                    } else {
                        navigateToThis( firstRow() );
                    }
                } else if ( $selected.hasClass('font') ) {
                    if ( nextRow('.font').length > 0 ) {
                        navigateToThis( nextRow('.font') );
                    } else if ( firstRow('.image').length > 0 ) {
                        navigateToThis( firstRow('.image') );
                    } else {
                        navigateToThis( firstRow('.font') )
                    }
                } else if ( $selected.hasClass('image') ) {
                    if ( nextRow('.image').length > 0 ) {
                        navigateToThis( nextRow('.image') );
                    } else if ( firstRow('.font').length > 0 ) {
                        navigateToThis( firstRow('.font') );
                    } else {
                        navigateToThis( firstRow('.image') )
                    }
                } else {
                    firstRow('.image').length ? navigateToThis( firstRow('.image') ) : navigateToThis( firstRow('.font') );
                }
 
                setContentHeight();
                scrollSidebar( $('tr.selected') );
                if ( $content_pane.hasClass('has_grid_content') ) {
                    scrollGrid( $('div.selected') );
                }
                resetImage();
                break;
 
            case ' ': // space bar
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                // Play/pause audio
                if ( $body.hasClass('has_audio') && $body.hasClass('is_playing') ) {
                    e.preventDefault();
                    playAudio('pause');
                } else if ( $body.hasClass('has_audio') && $body.hasClass('is_paused') || $playing.length ) {
                    e.preventDefault();
                    playAudio('play');
                }
                break;
 
            case 'Enter':
                // Open directories (or ignore)
                if ( $selected.hasClass('app') && $settings.apps_as_dirs === false ) {
                    break;
                } else {
                    if ( $selected.hasClass('dir') ) {
                        $selected.find('a').trigger('dblclick');
                    } else {
                        $selected.find('a').click();
                    }
                }
                break;
 
            case 'A': case 'B': case 'C': case '': case 'E': case 'F': case '': case 'H': case 'I': case 'J': case 'K': case 'L': case 'M': case 'N': case '': case 'P': case 'Q': case '': case 'S': case 'T': case 'U': case 'V': case '': case 'X': case 'Y': case 'Z':
            case 'a': case 'b': case 'c': case '': case 'e': case 'f': case '': case 'h': case 'i': case 'j': case 'k': case 'l': case 'm': case 'n': case '': case 'p': case 'q': case '': case 's': case 't': case 'u': case 'v': case '': case 'x': case 'y': case 'z':
            case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9':
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                break;
 
            case 'd':
                // Toggle Invisibles with Command-i
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    $details_btn.click();
                }
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                break;
 
            case 'g':
                // Show image Grid
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    $grid_btn.click();
                }
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                break;
 
            case 'i':
                // Cmd/Ctrl + I: Toggle Invisibles
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    $inv_checkbox.find('input').click();
                }
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                break;
 
            case 'o':
                // Cmd/Ctrl + Shift + O: Open selected item in new window
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.shiftKey ) {
                    window.open($selected_href);
                }
                break;
 
            case 'r':
                // Cmd/Ctrl + Shift + R: Refresh
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    e.preventDefault();
                    $content_reload_btn.click();
                }
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                break;
 
            case 'w':
                // Close content pane if Close button visible with Cmd/Crtl + W
                // Doesn't work in Firefox: can't override default keybinding
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && ( $content_pane.is('[class*="has_"]') ) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    $content_close_btn.click();
                }
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                break;
 
            case '.':
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                // Increase font preview size
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.shiftKey ) {
                    $('#increase').click();
                }
                break;
 
            case ',':
                if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
                    alphaNav(e);
                }
                // Decrease font preview size
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.shiftKey ) {
                    $('#decrease').click();
                }
                break;
 
            case 'tab':
                break;
 
        } // end switch
 
    });
 
    // ***** END KEYBOARD EVENTS ***** //
 
 
    // ***** GRIDS ***** //
 
    const fontGridItems = function() {
        var $font_grid_items_arr = [];
        $dir_list_row.filter('.font').each(function() {
 
            let link = thisLink(this);
            let $font_family = thisText($(this));
 
            if ( $font_family_arr.indexOf($font_family) == -1 ) {
                $font_family_arr.push($font_family);
                $font_preview_styles.append('@font-face { font-family: "'+ $font_family +'"; src: url("'+ link +'"); }'); // only add style if it doesn't exist
            }
 
            $font_grid_item_el.attr('href',link).css({ 'font-family':'"'+ $font_family +'"' }).empty().append( $font_family.slice( 0,$font_family.lastIndexOf('.') ) );
            $font_grid_items_arr.push($font_grid_item_el.clone());
        });
        return $font_grid_items_arr;
    };
 
    const imageGridItems = function() {
        var $image_grid_items_arr = [];
        $dir_list_row.filter('.image').each(function() {
 
            $this_link = thisLink(this);
            $this_ext = thisExt(this);
            let exts = $row_types.image.filter( ext => $.inArray(ext, $row_settings.ignore) == -1 );
 
            if ( $.inArray( $this_ext, exts ) > -1 ) { // if this row file ext is in the image extension array
                $image_grid_item_el.find('a').attr('href',$this_link).find('img').attr('src',$this_link);
                $image_grid_items_arr.push( $image_grid_item_el.clone() );
            }
        });
        return $image_grid_items_arr;
    };
 
    function showFontGrid() {
        $content_pane.removeClass('has_hidden_grid').addClass('has_grid_content');
        $content_grid.empty().append( fontGridItems() );
        $content_grid.removeClass().addClass('has_font_grid');
    }
 
    function showImageGrid() {
        $content_pane.removeClass('has_hidden_grid').addClass('has_grid_content');
        $content_grid.empty().append( imageGridItems() );
        $content_grid.removeClass().addClass('has_image_grid');
    }
 
    function showGrids() {
        $content_pane.removeClass('has_hidden_grid').addClass('has_grid_content');
        $content_grid.empty().append( imageGridItems(), fontGridItems() );
        $content_grid.removeClass().addClass('has_grid');
    }
 
    $grid_btn.on('click', function(e) {
        e.stopPropagation();
        resetGrid();
        showGrids();
        setContentTitle();
        setContentHeight();
    });
 
    $('#show_image_grid').on('click', function(e) {
        e.stopPropagation();
        resetGrid();
        showImageGrid();
        setContentTitle();
        setContentHeight();
    });
 
    $('#show_font_grid').on('click', function(e) {
        e.stopPropagation();
        resetGrid();
        showFontGrid();
        setContentTitle();
        setContentHeight();
    });
 
    function hideGrid() {
        $content_pane.removeClass('has_grid_content').addClass('has_hidden_grid');
    }
 
    function closeGrid() {
        $content_pane.removeClass('has_grid_content');
        $content_grid.removeClass().empty().css({'font-size':'1em'});
    }
 
    // GRID ITEMS
 
    // Grid Item Hover
    $content_grid.on('mouseenter','> div:not(".selected")',function() {
        thisRow($dir_list.find('a[href*="' + thisLink(this) + '"]')).addClass('hovered');
    }).on('mouseleave','> div:not(".selected")',function() {
        thisRow($dir_list.find('a[href*="' + thisLink(this) + '"]')).removeClass('hovered');
    });
 
    $dir_list_row.hover(function() {
        // Highlight corresponding grid item
        if ( $content_grid.is(':visible') ) {
            $this_link = thisLink(this);
            $content_grid.find('[href="' + $this_link + '"]').closest('div').addClass('hovered');
        }
    }, function() {
        if ( $content_grid.is(':visible') ) {
            $content_grid.find('.hovered').removeClass('hovered');
        }
    });
 
    function gridItemClick(e) {
        e.preventDefault();
        $dir_list.find('a[href*="' + thisLink(this) + '"]').click();
    }
    $content_grid.on('click','> div[class*="item"]', gridItemClick );
 
 
    // ***** SCALE PREVIEW ITEMS ***** //
 
    var $em = parseInt(getComputedStyle(document.body).fontSize); // pts/em
    var $font_incr = 1.125; // scale factor for font size increase/decrease
    var $image_incr = 1.125;
    var $image_width;
    var $image_height;
    var $image_scale_factor;
    var $image_grid_item_size;
    var $grid_scale_factor;
 
    var fontSize = function(el) {
        return parseFloat(el.css('font-size'));
    };
 
    function scaleFonts(incr, y) {
        if ( y === -1 ) { incr = 1/incr; }
        if ( $content_pane.hasClass('has_grid_content') && ( $content_grid.hasClass('has_font_grid') || $content_grid.hasClass('has_grid') ) ) {
            $content_grid.css({'font-size':( fontSize($content_grid)/$em * incr ) +'em'});
            return;
        }
        if ( $content_pane.hasClass('has_font_content') ) {
            $content_font.css({'font-size':( fontSize($content_font)/$em * incr ) +'em'});
            return;
        }
    }
    function scaleImages(incr, y) {
        if (y === -1 ) { incr = 1/incr; }
        if ( $content_pane.hasClass('has_image_content') && !$content_pane.hasClass('has_grid_content') ) {
            $image_width = parseFloat( $content_image.find('img').width() ) * incr; // increment image size
            $image_height = parseFloat( $content_image.find('img').height() ) * incr; // increment image size
            $image_scale_factor = parseFloat( $content_image.attr('data-image-scale-factor') ); // get scale factor
 
            $content_image.attr('data-image-scale-factor', parseFloat( $image_scale_factor ) * incr ).find('img').removeClass('zoom_img').css({'width':$image_width +'px', 'max-width':'none', 'max-height':'none','top':'0','transform':'translateY(0)'});
 
            $content_image.scrollLeft( ( $image_width - $(window).width() )/2 ) ;
            if ( ( ( $image_height - $(window).height() )/2 ) > 0 ) {
                $content_image.scrollTop( ( $image_height - $(window).height() )/2 );
            }
            return;
        }
        if ( $content_pane.hasClass('has_grid_content') && ( $content_grid.hasClass('has_image_grid') || $content_grid.hasClass('has_grid') ) ) {
            $image_grid_item_size = parseFloat( $('.image_grid_item').width() * incr);
            $grid_scale_factor = parseFloat( $content_grid.attr('data-grid-scale-factor') );
 
            $content_grid.attr('data-grid-scale-factor', parseFloat( $grid_scale_factor ) * incr ).css({'grid-template-columns':'repeat(auto-fit, minmax('+ ($image_grid_item_size) +'px, 1fr))', 'grid-template-rows':'repeat(auto, minmax('+ ($image_grid_item_size) +'px))' });
            $content_grid.find('.image_grid_item').css({'width':$image_grid_item_size +'px', 'height':$image_grid_item_size +'px'}); // grid items are square, so width = height
            $content_grid.find('img').css({'max-width':( $image_grid_item_size - $image_grid_item_size/8 ) +'px', 'max-height':( $image_grid_item_size - $image_grid_item_size/8) +'px'});
            return;
        }
    }
 
    function scalePreviewItems(y) { // combine scaling into one function
        scaleImages( $image_incr, y );
        scaleFonts( $font_incr, y );
    }
 
    $('#scale').on('click','span',function() {
        if ( $(this).attr('id') === 'increase' ) {
            scalePreviewItems(1);
        }
        if ( $(this).attr('id') === 'decrease' ) {
            scalePreviewItems(-1);
        }
    });
 
    function zoomImage(x,e) {
        $this_link = $(x).attr('src');
        var $offset = $(x).offset();
        var $this_width = $(x).width();
        var $this_height = $(x).height();
 
        $(x).toggleClass('zoom_img');
        if ( $(x).attr('style') !== '' || $(x).attr('style') !== undefined ) {
            $(x).attr('style','');
        }
        if ( $this_link !== undefined ) {
            getDimensions( $this_link, function( width, height ) {
                $content_image.scrollLeft( (e.pageX - $offset.left) * width/($this_width + 13) - ( e.pageX - $offset.left ) - 52 ) ;
                $content_image.scrollTop( (e.pageY - $offset.top) * height/($this_height + 13) - ( e.pageY - $offset.top ) - 52 );
            });
        }
    }
    $content_image.on('click', 'img', function(e) {
        zoomImage( this,e )
    });
 
    // ***** END SCALE PREVIEW ITEMS ***** //
 
 
    // ***** AUDIO CONTENT ***** //
 
    var $count = 0;
    var $playlist;
    var $shuffleList = [];
    var $next;
    var $task;
 
    function updatePlaylist() {
        $playlist = [];
        $dir_list_row.filter('.audio:not(".unchecked")').each(function() {
            $this_link = thisLink(this);
            $playlist.push($this_link);
        });
        return $playlist;
    }
 
    function initShuffleList() {
        updatePlaylist();
        $shuffleList = [];
        for ( let i = 0; i < $playlist.length; i += 1 ) {
            $shuffleList.push(i);
        }
        return $shuffleList;
    }
 
    function updateCount() {
        $count = $playing.index('.audio:not(.unchecked)');
    }
 
    function toggleChecked(e) {
        e.stopPropagation();
        $(this).blur();
        thisRow(this).toggleClass('unchecked');
        updateCount();
        updatePlaylist();
        initShuffleList();
    }
    $dir_list_row.filter('.audio').on('click','input', toggleChecked );
 
    function toggleAllChecked(e) {
        e.stopPropagation();
        $dir_list_row.find('input').trigger('click');
        updatePlaylist();
        initShuffleList();
    }
    $dir_list.find('#play_toggle').on('click', toggleAllChecked );
 
    function loadAudio( count ) {
        var $this_track = $dir_list_row.filter('.audio:not(.unchecked)').eq(count);
        $audio.find('source').attr('src', thisLink($this_track) );
        $audio.trigger('load');
        selectThis( $this_track );
        setContentTitle();
    }
 
    function playAudio( task ) { // Trigger play or stop based on task
        if ( task === 'play' ) {
            $audio.trigger('play');
            $body.removeClass('is_paused').addClass('is_playing');
        }
        if ( task === 'pause' ) {
            $audio.trigger('pause');
            $body.addClass('is_paused').removeClass('is_playing');
        }
        if ( task === 'stop' ) {
            $audio.trigger('pause');
            $audio.prop('currentTime',0);
            $body.addClass('is_paused').removeClass('is_playing');
        }
    }
 
    function playThis( count, task ) {
        loadAudio( count );
        playAudio( task );
//        scrollSidebar( $('.playing')[0] );
        scrollSidebar( document.getElementsByClassName('playing') );
    }
 
    function playPause() {
        if ( $body.hasClass('is_playing') ) { playAudio('pause') };
        if ( $body.hasClass('is_paused') ) { playAudio('play') };
//        if ( $('.playing').hasClass('audio') ) { // for audio files only, for now
//            return $audio.get(0).paused ? $audio.get(0).play() : $audio.get(0).pause();
//        }
    }
 
    function nextTrack(navTask) {
        $('.playing').length == 1 ? $playing = $('.playing') : $playing = $dir_list_row.filter('.audio:not(".unchecked")').first();
 
        var $next_track = $playing.nextAll('.audio:not(.unchecked)').first();
        var $next_track_index = $next_track.index('.audio:not(".unchecked")');
 
        if ( $shuffle.find('input').prop('checked') ) { // shuffle
            shuffle();
        } else if ( $playing.hasClass('unchecked') ) { // if playing is unchecked
            $next_track.length === 1 ? $count = $next_track_index : $count = 0;
            $task = 'play';
        } else if ( $next_track.length !== 1 ) { // if no next track, loop to beginning
            $count = 0;
            $loop.find('input').prop('checked') === true ? $task = 'play' : $task = 'stop';
        } else if ( $next_track.length === 1 ) {
            $count = $next_track_index;
            $task = 'play';
        }
        if ( navTask == 'stop' ) { $task = 'stop'; }
 
        playThis($count, $task);
        navTask = '';
    }
 
    function prevTrack(navTask) {
        $('.playing').length == 1 ? $playing = $('.playing') : $playing = $dir_list_row.filter('.audio:not(".unchecked")').first();
 
        var $prev_track = $playing.prevAll('.audio:not(".unchecked")').first();
        var $prev_track_index = $prev_track.index('.audio:not(".unchecked")');
 
        if ( $shuffle.find('input').prop('checked') ) { // shuffle
            shuffle();
        } else if ( $playing.hasClass('unchecked') ) { // if playing is unchecked
            $prev_track.length === 1 ? $count = $prev_track_index : $count = $playlist.length - 1;
        } else if ( $prev_track.length !== 1 ) { // loop to end and play
            $count = ($('.audio:not(".unchecked")').length - 1);
            $task = 'play';
        } else if ( $prev_track.length != 1 ) { // loop to end and play
            $task = 'stop';
        } else if ( $count > 0 ) { // play prev track
            $count = $prev_track_index;
            $task = 'play';
        }
        if ( navTask == 'stop' ) { $task = 'stop'; }
        playThis( $count, $task );
        navTask = '';
    }
 
    // Prev/Next Track buttons
    $prev_track.on( 'click', prevTrack );
    $next_track.on( 'click', nextTrack );
 
    function toggleShuffle() {
        if ( $shuffle.find('input').prop('checked') ) {
            updatePlaylist();
            initShuffleList();
            $count = Math.floor( Math.random() * $shuffleList.length );
            playThis($count,'stop');
        }
    }
    $shuffle.on('click', toggleShuffle );
 
    function shuffle() {
        if ( $shuffleList.length <= 1 && $loop.find('input').prop('checked') ) { // If loop is checked, and all songs have been shuffled...
            initShuffleList();
            $next = Math.floor( Math.random() * $shuffleList.length ); // choose a random index number from the remaining unplayed songs,
            $count = $shuffleList[ $next ];                            // set the playing $count to the index
            $task = 'play';
        } else if ( $shuffleList.length === 0 ) {                      // else if all songs have been shuffled, select the first song and stop;
            $count = 0;
            $task = 'stop';
        } else {
            $next = Math.floor( Math.random() * $shuffleList.length ); // else choose a random index number from the remaining unplayed songs,
            $count = $shuffleList[ $next ];                            // set the playing $count to the index
            $shuffleList.splice( $next, 1 );                           // remove the indexed value from the unplayed list,
            $task = 'play';
        }
    }
 
    function initAudio() {
        if ( $body.hasClass('has_audio') ) {
            if ( $settings.autoload_audio === true ) {
                loadAudio(0);
                autoLoadCoverArt();
            }
            $audio.on('ended', nextTrack );
        }
    }
    initAudio();
 
    function autoLoadCoverArt() {
        var $matched;
        var $image_titles = [];
        $dir_list_row.filter('.image').each(function() {
            $image_titles.push( thisText(this) );
        });
        // Find image file with name matching default cover art name
        for ( let i = 0; i < $image_titles.length; i++) {
            if ( $image_titles[i].match(/(cover\.|front\.)/) ) {
                $matched = $(document.getElementById('dir_list').getElementsByClassName('image').item(i));
                $matched.addClass('selected');
                showImage( $matched, thisLink( $matched ) );
                return true;
            }
        }
        // If no default cover art found, select first image in dir, if any.
        if ( $('.selected').length < 1 && $dir_list_row.filter('.image').length > 0 ) {
            $matched = $(document.getElementById('dir_list').getElementsByClassName('image').item(0));
            $matched.addClass('selected').siblings().removeClass('selected');
            showImage( $matched, thisLink( $matched ) );
        }
    }
 
    // ***** END AUDIO CONTENT ***** //
 
    // ***** OTHER FUNCTIONS ***** //
 
    // Resize Sidebar/Content Pane
    function resizeSidebar(f) {
        f.stopPropagation();
        var $startX = f.pageX;
        var $sidebar_width = $sidebar_wrapper.width();
        var $window_width = window.innerWidth;
        $sidebar_overlay.show(); // needed to prevent interactions with iframe
        $content_overlay.show(); // needed to prevent interactions with iframe
        $sidebar_wrapper.css({'-webkit-user-select':'none','-moz-user-select':'none','user-select':'none'});
 
        $(document).on('mousemove',function(e) {
            e.stopPropagation();
            var $deltaX = e.pageX - $startX;
            if ( e.pageX > 200 && e.pageX < $window_width - 200 ) {
                $sidebar_wrapper.css({'width':$sidebar_width + $deltaX + 'px'});
                $content_pane.css({'width':($window_width - $sidebar_width) - $deltaX + 'px'});
            }
            setContentHeight();
        });
        $(document).on('mouseup',function() {
            $sidebar_overlay.hide(); // needed to prevent interactions with iframe
            $content_overlay.hide();
            $sidebar_wrapper.css({'-webkit-user-select':'auto','-moz-user-select':'auto','user-select':'auto'});
            $(document).off('mousemove');
            // update URI query
            $sidebar_width = $sidebar_wrapper.width();
            $query_prefs = getQueryPrefs();
            $query_prefs.set('width',$sidebar_width);
            updateQuery();
        });
    }
    $handle.on('mousedown', resizeSidebar );
 
    // EXPORT SETTINGS
    var $settings_string = unescape( $settings.toSource() );
    $settings_string = $settings_string.replace('JSON.parse\(unescape\("\{','').replace('\}"))','').replace(/\/",/g,'",').replace(/\/"],/g,'"],').replace(/"(\w+?)":/g,'\n\n$1:\t');
 
    var save = function(filename, data) {
        var blob = new Blob([data], {type: 'text/html'});
        if ( window.navigator.msSaveOrOpenBlob ) {
            window.navigator.msSaveBlob( blob, filename );
        } else {
            var elem = window.document.createElement('a');
            elem.href = window.URL.createObjectURL(blob);
            elem.download = filename;
            document.body.appendChild(elem);
            elem.click();
            document.body.removeChild(elem);
            URL.revokeObjectURL(blob);
        }
    };
 
    $export_settings.on('click','a',function(e) {
        e.preventDefault();
        save("settings.txt",$settings_string);
    });
 
})();