// ==UserScript==
// @name         Supercharged Local Directory File Browser
// @version      2.4.1
// @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
// @license      GPL-3.0
// @match        file:///*
// @require      http://code.jquery.com/jquery-latest.min.js

// 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 only been minimally tested on Windows, however. It should work, but please report any issues.
// It 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 Greasemonkey, open about:config and change greasemonkey.fileIsGreaseable to true.
// For Tampermonkey, go to Chrome extension page, and tick the 'Allow access to file URLs' checkbox at the Tampermonkey extension section.

// CHANGELOG:

// 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

// TO-DO:
// Fix grid scrollIntoView
// Automatically how cover art again in Audio dirs after closing other previewed files
// Show default "music" image if no cover images found?
// Sort by file extension?
// Select two items for split pane view?

// @namespace https://greasyfork.org/users/16170
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    var $ = jQuery;

    // ***** USER SETTINGS ***** //

    var $settings = {

        // Paste your exported settings between these two lines:
        //----------------------------------------------------//

        user_name:          // Your computer user name
       						'MacBookPro',
                            // Shortcuts: add directories and files here. (You can use your browser's bookmarks, of course.)
        root_shortcuts:     // Root directories: add or remove as you please (but at leave empty brackets). These defaults are applicable to Mac OS.
    	    				['Applications','Library','Users','Volumes'],
                            // ['C:/Users','C:/Program Files','C:/Windows'],
        user_shortcuts:     // User directories; you must enter your user_name above.
        					['Documents','Downloads','Library','Movies','Music','Pictures'],
        file_shortcuts:     // Add specific file paths, e.g.: 'Users/MyUserName/Documents/MyDocument.html'
        					// These files will be selected (loaded) automatically when their containing directory is loaded
        					// Limitations: only works for one file per directory; if more than one file per directory is listed, the last item will be selected.
//							['path/to/file.ext','path/to/another/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,
        ignore_file_types:   // Files with these extensions will be ignored:
           					['exe','.doc','.docx','ppt','pptx','xls','xlsx','odt','odp','.csv','msi','dll','rtf','indd','idml','.pages','.tif','tiff','.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'], // lowercase
        hide_ignored_files: // If true, ignored files will be hidden in the file list;
           					// if false (default), they will appear greyed-out.
							false,
        hide_invisibles:    // Mac OS only: If true (default), files or directories beginning with a "." will be hidden.
							true,
        apps_as_dirs:       // 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_mode:          // If true, gives the content pane a dark background, and inverts html and text content.
							true,
        grid_image_size:    // Default = 150
                            150,
        grid_font_size:     // Default = 1
                            1,
                            // Automatically play media
        autoplay:           false

        //----------------------------------------------------//
        // Paste your exported settings between these two lines.

    };

    // ***** END USER SETTINGS ***** //

    // ***** SETUP ***** //

    var $userAgent = navigator.userAgent;

	function platformIsMac() {
	  return navigator.platform.indexOf('Mac') > -1;
	}
	function platformIsWin() {
	  return navigator.platform.indexOf('Win') > -1;
	}
	function platformIsLinux() {
	  return navigator.platform.indexOf('Linux') > -1;
	}

    // Don't run script in iframes or files (only directories)
    //    if ( window.top != window.self ) {
    if ( window.frameElement !== null ) {
        return;
    }
    if ( window.location.pathname.slice(-1) != '/') {
//        $('body').attr('contentEditable','true');
        return;
    }

    // Arrays of supported file types
    var $audio_ext_arr = ['.mp3','.mp4','.m4a','.ogg','.flac','.wav','webm'];
    var $video_ext_arr = ['.mpeg','.mov'];
    var $image_ext_arr = ['.jpg','.jpeg','.png','apng','.gif','.bmp','webp'];
    var $font_ext_arr = ['.otf','.ttf','.woff','.woff2'];
    var $font_family_arr = [];

    var $body = $('body');
        // add lang attr, remove some unneeded default elements
        $body.attr('lang','en').find('> h1:contains("Index of"),> #parentDirLinkBox,> #UI_goUp,#UI_showHidden').remove();

    var $location = decodeURIComponent(window.location.pathname);
    var $current_dir_path = $location.replace(/%20/g,' ').replace(/\//g,'/<wbr>').replace(/_/g,'_<wbr>').replace(/—/g,'—<wbr>').replace(/\\/g,'/');
	var $current_dir_name = $location.replace(/%20/g,' ').slice(0,-1);
        $current_dir_name = $current_dir_name.slice($current_dir_name.lastIndexOf('/') + 1);
    var $location_arr = $location.split('/');
    var $parent_dir_link = $location_arr.slice(0,-2).join('/') + '/';

    var e, i, n;
    var $this_text;
    var $this_link;
    var $this_ext;

    var $dir_table;
    var $dir_table_type;
    var $dir_table_head;
    var $dir_table_head_cell;
    var $dir_table_head_name;
    var $dir_table_head_details;
    var $dir_table_body;
    var $dir_table_row;
    var $dir_table_cell;
    var $dir_table_item_name;
    var $dir_table_details;
    var $dir_table_item_icon;
    var $dir_table_link;
    var $dir_table_rule;
    var $selected;
    var $playing;

    if ( $body.find('> table').length > 0 ) {
        $dir_table = $body.find('> table');
        $dir_table.addClass('table');
    } else {
        $dir_table = $body.find('> ul');
        $dir_table.add('body').addClass('list');
    }

    // ***** BUILD UI ELEMENTS ***** //

    // ***** SIDEBAR ELEMENTS ***** //

	// 1. SIDEBAR: Parent Directory Menu
    var $parent_dir_menu =    $('<nav id="parent_dir_menu"><a href="">&nbsp;</a></nav>');
        $parent_dir_menu.find('a').attr('href',$parent_dir_link);
    // 2. SIDEBAR: Current Directory Name and Parents Directory Menu
	var $parents_dir_menu =   $('<nav id="parents_dir_menu"><div></div></nav><ul class="menu"></ul>');
	    $parents_dir_menu.find('div').append( $current_dir_path );
    // 3A. SIDEBAR: Shortcuts Menu
    var $divider =            $('<li><hr></li>');
    var $shortcuts_menu =     $('<nav id="shortcuts_menu"><div>&nbsp;</div></nav><ul class="menu"></ul>');
    // 3B. SIDEBAR: Other Menu Items
    var $toggle_dark_mode =   $('<li id="toggle_dark_mode_menu_item"><a href="#"><span id="dark_theme">Dark Theme</span><span id="default_theme">Default Theme</span></a></li>');
    var $export_settings =   $('<li><a id="export_settings" href="#">Export Settings</a></li>');
    // 4. SIDEBAR: Details Button
	var $details_btn =        $('<button id="details_btn" tabindex="-1"><span>Show details</span><span>Hide details</span></button>');
    // 5. SIDEBAR: Invisibles Checkbox
	var $inv_checkbox =       $('<label ><input type="checkbox" id="inv_checkbox" for="inv_checkbox" name="inv_checkbox" tabindex="-1" />Hide Invisibles</label>');
    // 6. SIDEBAR: Image Grid Button
    var $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>');
    // 7. SIDEBAR: Header Element
	var $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>');
	    $sidebar_header.find('tbody tr:nth-child(1)').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 );

    var $dir_table_wrapper = $('<div id="dir_table_wrapper"></div>');
    // 8. SIDEBAR:
    var $sidebar =            $('<div id="sidebar"></div>');
        $sidebar.append($sidebar_header);
    // 9. SIDEBAR: Resize Handle
    var $handle =             $('<div id="handle"></div>');
    // 10. ASSEMBLE Sidebar Elements
	var $sidebar_wrapper =    $('<td id="sidebar_wrapper"></td>');
	    $sidebar_wrapper.append( $sidebar, $handle );

    // ***** END SIDEBAR ELEMENTS ***** //

	// ***** CONTENT PANE ELEMENTS ***** //

    // 1. CONTENT: Overlay Element
    var $content_overlay =    $('<div id="content_overlay""></div>');
    // 2. CONTENT: Image Grid Element
    var $content_grid =       $('<div id="content_grid" data-grid-scale-factor="0"></div>');
    // 3. CONTENT: grid items
    var $image_grid_item_el = $('<div class="image_grid_item"><a href=""><img src="" /></a></div>');
    var $font_grid_item_el =  $('<div class="font_grid_item"></div>');
    var $content_font_size =  $('<div id="font_size"><span id="increase"></span><span id="decrease"></span></div>');
    // 4. CONTENT: Image Element
    var $image =              $('<img src="" class="" />');
    var $content_image =      $('<div id="content_image"></div>');
        $content_image.append($image);
    // 5. CONTENT: Embed (pdfs) Element
    var $content_embed =      $('<embed id="content_embed" name="plugin" type="application/pdf" tabindex="0"></embed>');
    // 6. CONTENT: Iframe Element
    var $content_iframe =     $('<iframe id="content_iframe" sandbox="allow-scripts allow-same-origin allow-modals" tabindex="0"></iframe>');
    // 7. CONTENT: Media Elements
    var $content_media =      $('<td id="content_media" colspan="3"></td>');
    var $prev_track =         $('<div id="prev_track"></div>');
    var $next_track =         $('<div id="next_track"></div>');
    var $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>');
    var $loop =               $('<label><input type="checkbox" id="loop" for="loop" name="loop" tabindex="0" />Loop</label>');
    var $shuffle =            $('<label><input type="checkbox" id="shuffle" for="shuffle" name="shuffle" tabindex="0" />Shuffle</label>');
    var $checkbox_cont =      $('<div id="checkbox_div"></div>');
        $checkbox_cont.append( $loop, $shuffle );
        $content_media.append( $prev_track, $next_track, $audio, $checkbox_cont );
    // 8. CONTENT: Font Elements
    var $sample_string =      'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />0123456789 [(!@#$%^&*;:)]';
    var $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.';
    var $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>');
    var $lorem =              $('.lorem');
    var $content_font =       $('<div id="content_font" spellcheck="false" contenteditable="true"></div>');
        $content_font.append($specimen);
    // 9. CONTENT: Header Reload Button Element
	var $content_reload_btn = $('<td><button id="reload_btn" tabindex="-1">Reload</button></td>');
    // 10. CONTENT: Header Title Element
    var $content_title =      $('<td id="content_title"></td>');
    // 11. CONTENT: Header Close Button Element
	var $content_close_btn =  $('<td><button id="close_btn" tabindex="-1">Close</button></td>');
    // 12. CONTENT: Header Element
    var $content_header =     $('<header id="content_header"><table><tbody><tr></tr><tr></tr></tbody></table></header>');
        $content_header.find('tr').first().append($content_reload_btn, $content_title, $content_close_btn);
        $content_header.find('tr').last().append($content_media);
    // 13. CONTENT: Next/Prev Elements
    var $prev_btn =           $('<div id="prev_btn"></div>');
    var $next_btn =           $('<div id="next_btn"></div>');

    // ASSEMBLE Content Container Elements
	var $content_container =  $('<section id="content_container"></section>');
	    $content_container.append( $content_header, $content_font_size, $content_overlay, $content_grid, $content_image, $content_embed, $content_iframe, $content_font );

    // ASSEMBLE Content Pane Elements
	var $content_pane =       $('<td id="content_pane"></td>');
        $content_pane.append( $content_container, $prev_btn, $next_btn );

    // ***** END BUILD UI ELEMENTS ***** //

    // ***** STYLES ***** //

    // Create Custom Font Styles element
    var $custom_font_styles = document.createElement('style');
        $custom_font_styles.appendChild(document.createTextNode(""));
    document.head.append($custom_font_styles);

    var $font_styles = '';
        $custom_font_styles.append( $font_styles );

    // Create Custom Styles element
    var $custom_styles = document.createElement("style");
        $custom_styles.appendChild(document.createTextNode(""));

    // SVG IMAGES
    var $up_arrow =   '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=\'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>")';
    var $svg_arrow =  '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=\'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>")';
    var $menu_icon =  '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=\'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>")';
    var $grid_icon =  '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=\'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>")';
    var $plus_sign =  'url("data:image/svg+xml;utf8,<svg version=\'1.1\' baseProfile=\'basic\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' 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>")';
    var $minus_sign = 'url("data:image/svg+xml;utf8,<svg version=\'1.1\' baseProfile=\'basic\' id=\'Layer_1\'  xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' width=\'16px\' height=\'16px\'  viewBox=\'0 0 16 16\' xml:space=\'preserve\'> <rect x=\'1\' y=\'6.499\' width=\'14\' height=\'3.001\'/> </svg>")';
    var $next_track_arrow = 'url("data:image/svg+xml;utf8,<svg version=\'1.1\' baseProfile=\'basic\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' width=\'10.873px\' height=\'14.017px\' viewBox=\'0 0 10.873 14.017\' xml:space=\'preserve\'><polygon fill=\'%23999999\' points=\'10.873,14.017 0,7.01 10.872,0 \'/></svg>")';
    var $music =      'url("data:image/svg+xml;utf8,<svg version=\'1.1\' baseProfile=\'basic\' id=\'Layer_1\'  xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' width=\'143.717px\'  height=\'199.404px\' viewBox=\'0 0 143.717 199.404\' xml:space=\'preserve\'><g><path fill=\'%23757679\' d=\'M143.717,143.82c0,10.033-4.573,18.425-13.717,25.183c-8.394,6.142-17.776,9.211-28.15,9.211  c-6.073,0-11.055-1.432-14.943-4.297c-4.301-3.276-6.45-7.849-6.45-13.719c0-9.279,4.403-17.437,13.204-24.466  c8.327-6.616,17.266-9.929,26.821-9.929c8.051,0,13.921,1.605,17.606,4.812V25.487L63.26,45.654v119.355  c0,10.03-4.573,18.426-13.717,25.18c-8.394,6.142-17.778,9.215-28.148,9.215c-6.077,0-11.055-1.436-14.947-4.302  C2.151,191.827,0,187.253,0,181.387c0-9.283,4.401-17.436,13.206-24.465c8.323-6.616,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>")';

    // 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 += 'ul { -webkit-margin-before:0em !important; -webkit-margin-after:0em !important; -webkit-padding-start:0em; }';
    $styles += 'hr { margin:0; border-bottom:0; }';

    // SIDEBAR
    $styles += '#sidebar_wrapper { width:25%; min-width:220px; will-change:width; padding:0; position:relative; border:0; background:lightgray; overflow:hidden; }';
    $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; overflow:hidden; }';
    $styles += '#handle { width:8px; position:absolute; top:0; right:-4px; bottom:0; z-index:1000; cursor:col-resize; }';

    // Sidebar Header
    $styles += '#sidebar_header { width:100%; height:auto; position:relative; border:0; user-select:none; border-collapse:collapse; font-size:0.875rem; }';
    $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 { position:relative; }';
    $styles += '#sidebar_header tbody tr:first-of-type td:hover { cursor:pointer; }';
    $styles += '#sidebar_header tbody tr:first-of-type td:first-of-type { position:relative; }';
    $styles += '#sidebar_header tbody tr:first-of-type td:nth-of-type(odd) { width:24px; max-width:24px; min-width:24px; padding:0; }';
    $styles += '#sidebar_header tbody tr:first-of-type td:nth-of-type(even) { width:100%; padding:0; border-left:solid 1px grey; border-right:solid 1px grey; }';
    $styles += '#sidebar_header tbody tr:last-of-type td { padding:1em 0; vertical-align:middle; position:relative; white-space:normal; }';

    // Sidebar Parent Menu
    $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; text-decoration:none; opacity:0.7; background:' + $up_arrow + 'center no-repeat; }';
    // Sidebar Parents Menu
    $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 { display:none; margin:0; padding:0; position:absolute; right:0; left:0; z-index:100; text-indent:0; text-align:left; background:lightgray; border-top:solid 1px gray; border-bottom:solid 1px gray; list-style-type:none; box-shadow: 0px 2px 3px -2px #888; }';
    $styles += '#parents_dir_menu + ul li:hover, #shortcuts_menu + ul li:hover { background:#BBB; }';
    $styles += '#parents_dir_menu + ul li a, #shortcuts_menu + ul li a { margin:0; padding:4px 6px; display:block; text-indent:0; text-decoration:none; color:#333; white-space:normal; }';
    // Sidebar Shortcuts Menu
    $styles += '#shortcuts_menu { margin:0; padding:0; }';
    $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 { margin:0; padding:0; -webkit-margin-before:0em !important; -webkit-margin-after:0em !important; -webkit-padding-start:0em; position:absolute; right:0; left:0; z-index:100; text-indent:0; text-align:left; background:lightgray; border-top:solid 1px gray; border-bottom:solid 1px gray; list-style-type:none; box-shadow: 0px 2px 3px -2px #888; display:none; }';
    $styles += '#shortcuts_menu div, #parent_dir_menu, #prev_btn, #next_btn { opacity:0.7; }';
    $styles += '#dark_theme { display:block; }';
    $styles += '#default_theme { display:none; }';

    // Sidebar Details Button
    $styles += '#details_btn { margin:0 0.5em; }';
    $styles += '#details_btn span:last-of-type { display:none; }';
    $styles += 'body.list #details_btn { color:#999; background:#EEE; outline:none; }';

    // Sidebar Grid Button
    $styles += '#grid_btn { margin:0; width:28px; height:18px; display:none; float:right; cursor:pointer; outline:0; background:'+ $grid_icon +' no-repeat center 100%; }';
    $styles += '#grid_btn .menu { padding-right:29px; padding-left:0; position:absolute; top:-1px; right:0; border:solid grey; border-width: 1px 0 1px 1px; display:none; }';
    $styles += '#grid_btn .menu li { width:100%; padding:4px 6px; background:#CCC; display:block; float:right; 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:hover, #sidebar_header tbody tr:first-of-type td:last-of-type:hover div, #parent_dir_menu:hover, #prev_btn:hover, #next_btn:hover { opacity:1; }';
    $styles += '#grid_btn.has_images, #grid_btn.has_fonts { display:inline-block; }';
    $styles += '#grid_btn.has_images.has_fonts:hover ul.menu { display:block !important; }';
    $styles += '#grid_btn.has_images.has_fonts:hover ul.menu li:hover { background:#BBB; }';

    // DIR_TABLE
    $styles += '#dir_table.table { width:100%; min-wdth:100px; border:0; position:relative; overflow:hidden; table-layout:fixed; border-collapse:collapse; font-size:0.875rem; }';
    $styles += '#dir_table.table thead { width:100%; position:absolute; left:0; right:0; text-align:left; }';
    $styles += '#dir_table.table thead th { padding:0 24px 4px; }';
    $styles += '#dir_table.table thead .name { padding-left:2em; display:block; }';
    $styles += '#dir_table.table > tbody { width:100%; position:absolute; right:0; bottom:0; left:0; overflow-y:auto; outline:0; }';
    $styles += '#dir_table.table tbody .name { display:block; clear:right; text-align:left; }';
    $styles += '#dir_table.table tbody tr { display:block; margin-inline-start:0; clear:both; }';
    $styles += '#dir_table.table tbody a { margin:0; display:block; background-size:auto 13px; -webkit-padding-start:2m; padding: 4px 6px 4px 24px; color:#333; text-decoration:none; outline:none; overflow:hidden; background-position:6px 4px; white-space:normal; }';
    $styles += '#dir_table.table #thead .name a { padding:0; }';
    $styles += '#dir_table.table .icon img { margin-left:1rem; height:16px; }';
    $styles += '#dir_table.table .icon + td.name a { -webkit-padding-start:1em; padding-left:6px; }';
    $styles += '#dir_table.table .details, #dir_table.table.firefox #tbody > tr > td:not(:first-of-type) { display:none; padding:0 0 4px 24px; font-size:0.875em; text-align:left; vertical-align:top; float:left; }';
    $styles += '#dir_table.table .details a { padding:0; }';
    $styles += '#dir_table.table .rule { display:none; }';
    $styles += '#dir_table.table.show_details .details, #dir_table.table.firefox.show_details #tbody > tr > td:not(:first-of-type) { display:block; }';
    $styles += '#dir_table.table.headless > tbody { top:0 !important; }';
    $styles += '#dir_table.table.headless .icon { vertical-align:middle; float:left; }';
    $styles += '#dir_table.table.firefox #tbody > tr > td:not(:first-of-type) { padding:0 24px 4px; }';
    $styles += '#dir_table.table.firefox #tbody > tr > td:last-of-type { text-indent:6px; }';

    // dir_table.list
    $styles += '#dir_table_wrapper { width:100%; min-width:100px; border:0; position:relative; overflow-y:auto; }';
    $styles += '#dir_table.list #dir_table_wrapper { padding-top:6px; }';
    $styles += '#dir_table.list { width:100%; position:absolute; overflow-y:auto; list-style:none; -webkit-margin-before:0; -webkit-margin-after:0; -webkit-padding-start:0; font-size:0.875rem; line-height:1.4; }';
    $styles += '#dir_table.list li a { display:block; padding:3px 1rem; text-decoration:none; color:#333; }';
    $styles += '#dir_table.list li.dir a { padding-left:24px; background: 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= ") 6px 4px no-repeat; background-size:auto 13px; }';
    $styles += '#dir_table.list li.file a { padding-left:24px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC") 6px 4px no-repeat; background-size:auto 13px; }';

    $styles += '#dir_table tr, #dir_table li { background:transparent; }';
    $styles += '#dir_table > tbody tr:hover, #dir_table li:hover, #dir_table .hovered { background:#BBB; }';
    // dir_table: Selected and Playing items
    $styles += '#dir_table .selected, #dir_table .playing { background:lightsteelblue; }';
    $styles += '#dir_table .selected a, #dir_table .playing a { font-weight:bold; color:#333; }';
    $styles += 'body.blur_sidebar .selected { background-color:#BBB; }';
    $styles += 'body.blur_sidebar .selected a { font-weight:normal; color:#444; }';
    $styles += '#dir_table .playing { background:#9FC4C6; }';
    // dir_table: Invisibles and Ignored items
    $styles += '#dir_table tr.ignore a, #dir_table tr.ignore.app a { color:#888; }';
    $styles += '#dir_table.hide_invisibles .invisible { display:none !important; }';
    $styles += '#dir_table.hide_ignored tr.ignore { display:none !important; }';

    // CONTENT PANE STYLES

    $styles += '#content_pane { width:75%; will-change:width; padding:0; border:0; background:#FFF; position:relative; }';
    $styles += '#content_container { width:100%; height:100%; top:0; overflow:visible; }';

    // 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 { width:100%; padding:7px 12px 5px; border-collapse:collapse; 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 { display:block !important; }';

    // CONTENT: Overlay
    $styles += '#content_overlay { height:'+ window.innerHeight + 'px; position:absolute; top:0; right:0; bottom:0; left:0; display:none; z-index:9998; }';

    // 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% - 2rem); padding:0rem 1rem 0.5rem; display:block; font-size:'+ $grid_font_size * 3 +'em; text-align:left; outline:none; clear:both; }';
    $styles += 'body #content_grid .font_grid_item:hover, body #content_grid div.font_grid_item.hovered { background:#DDD; }';
    $styles += 'body #content_grid .font_grid_item.selected { background:#CCC; }';
    $styles += 'body #content_grid div.selected { background:#CCC; }';
    $styles += 'body #content_grid div:hover, body #content_grid div.hovered { background:#DDD; }';

    // CONTENT: Image preview styles
    $styles += '#content_image {padding:2em; position:absolute; top:0; right:0; bottom:0;left:0; display:none; background:#333; overflow:auto; text-align:center;}';
    $styles += '#content_image img:not(.zoom_img) {width:auto; height:auto; max-width:100%; max-height: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; max-height:none; cursor:zoom-out; top:0; transform:translateY(0); background:"FFF" }';

    // CONTENT: Image Prev and Next 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 + ' no-repeat center; }';
    $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 { display:block; }';

    // CONTENT: Embed (pdf) 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: Font preview styles
    $styles += '#content_font { padding:1rem; 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: Font size button
    $styles += '#font_size { 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 += '#font_size span { width:2rem; height:2rem; font-size:2rem; display:block; text-align:center; cursor:pointer; }';
    $styles += '#font_size span:first-of-type { opacity:0.3; background:'+ $plus_sign +' center no-repeat; }';
    $styles += '#font_size span:last-of-type { opacity:0.3; background:'+ $minus_sign +' center no-repeat; }';
    $styles += '#font_size span:hover { opacity:0.5; filter:invert(100%); background-color:#666; }';
    $styles += '#content_pane.has_font_content:hover #font_size, #content_pane.has_grid_content:hover #font_size { display:block; opacity:1; }';

    // CONTENT: Media Content
    $styles += '#content_media { padding: 6px; text-align:center; }';
    $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:not(.has_audio) #content_media { display:none; }';
    $styles += 'body.has_audio #content_header { display:table-cell; }';

    // CONTENT: Media Prev and Next Track buttons
    $styles += '#prev_track, #next_track { width:2em; height:2em; padding:0 0 0 8px; display:inline-block; background: #F8F8F8 '+ $next_track_arrow +' no-repeat center;}';
    $styles += '#next_track { transform:rotate(180deg); }';
    $styles += '#prev_track:hover, #next_track:hover { background-blend-mode:difference; }';

    // CONTENT: Display preview content
    $styles += '#content_pane.has_font_content #content_font { display:block; }';
    $styles += '#content_pane.has_image_content #content_image { display:block; }';
    $styles += '#content_pane.has_pdf_content #content_embed { display:block; }';
    $styles += '#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; }';


    // DARK THEME STYLES
    $styles += 'body.dark_mode #sidebar, body.dark_mode #content_header { background:#555; }';
    $styles += 'body.dark_mode #sidebar ul.menu { background:#444; box-shadow-color:#111; }';
    $styles += 'body.dark_mode #sidebar ul.menu li:hover { background:#666; }';
    $styles += 'body.dark_mode #sidebar { border-right-color:#111; }';
    $styles += 'body.dark_mode #sidebar_header thead tr, body.dark_mode #sidebar_header tbody tr:first-of-type { border-bottom:solid 1px black; background-color:#444; }';
    $styles += 'body.dark_mode #sidebar_header tbody tr:first-of-type td:nth-of-type(even) { border-left-color:#111; border-right-color:#111; }';
    $styles += 'body.dark_mode #sidebar_header .menu { border-top-color:#111; }';
    $styles += 'body.dark_mode #sidebar_header .menu, body.dark_mode #content_header { border-bottom-color:#111; }';
    $styles += 'body.dark_mode #sidebar tr *, body.dark_mode #sidebar li, body.dark_mode #sidebar li a, body.dark_mode #content_header tr { color:#EEE !important; }';
    $styles += 'body.dark_mode #details_btn span { color:#333 !important; }';
    $styles += 'body.dark_mode #dark_theme { display:none; }';
    $styles += 'body.dark_mode #default_theme { display:block; }';

    // SIDEBAR DARK: Grid Buttons
    $styles += 'body.dark_mode #sidebar #grid_btn, body.dark_mode #grid_btn .menu, body.dark_mode #parent_dir_menu, body.dark_mode #shortcuts_menu { filter:invert(100%); }';
    $styles += 'body.dark_mode #sidebar #grid_btn ul.menu { background:transparent; border: solid #111; border-width: 1px 0 1px 1px; box-shadow:none !important; }';
    $styles += 'body.dark_mode #sidebar #grid_btn .menu li { background:#555; border-right-color: #111; }';
    $styles += 'body.dark_mode #sidebar #grid_btn .menu li:first-of-type { border-bottom-color: #111; }';
    $styles += 'body.dark_mode #sidebar #grid_btn .menu li:hover { background:#777; }';

    // SIDEBAR DARK: Selected and Playing items
    $styles += 'body.dark_mode #dir_table .selected { background:slategray !important; }';
    $styles += 'body.dark_mode #dir_table tr:hover, body.dark_mode #dir_table li:hover { background:#777 !important; }';
    $styles += 'body.dark_mode #dir_table .playing { background: #4C7E80 !important; }';

    // CONTENT DARK
    $styles += 'body.dark_mode #content_pane, body.dark_mode #content_grid { background:#333; }';
    $styles += 'body.dark_mode #content_header tr:last-of-type { border-top: solid #333 1px; }';
    $styles += 'body.dark_mode #content_font, body.dark_mode .font_grid_item { color:#CCC; }';
    $styles += 'body.dark_mode #content_grid .font_grid_item.selected, body.dark_mode #content_grid .image_grid_item.selected { background:#666 !important }';
    $styles += 'body.dark_mode .font_grid_item:hover, body.dark_mode .font_grid_item.hovered, body.dark_mode .image_grid_item:hover, body.dark_mode .image_grid_item.hovered { background:#555 !important; }';
    $styles += 'body.dark_mode #content_pane.has_font_content hr { border-bottom-color:#CCC; }';
    $styles += 'body.dark_mode #content_iframe { filter:invert(87.5%); }';
                var $excluded = ['.htm','.xhtm','.mp3','.m4a','.m4v','.mp4','.ogg','.ogm','.oga','.webm','.wav','.mpeg','.flac']; // Files with these extensions in iframes should not be inverted in dark mode:
    for ( i = 0, n = $excluded.length; i < n; i += 1) {
        $styles += 'body.dark_mode #content_iframe[src*="'+ $excluded[i] +'" i] { background:white; filter:unset; }';
    }
    // MAIN CONTENT
    $styles += '#main_content { width:100%; height:100%; border:0; border-collapse:collapse; overflow:hidden; }';

    // APPEND CUSTOM STYLES
    $custom_styles.append($styles);
    document.head.appendChild($custom_styles);

    // Conditional Styles:
    var $gecko_styles = document.createElement("style");
    var $custom_gecko_styles = '';
        $custom_gecko_styles += '<style type="text/css">html, body { border: solid 1px gray !important; } button { padding:0; } #grid_btn .menu {top:-24px;} thead {font-size:100%;} #dir_table .dir::before {position:absolute;} #prev_track, #next_track { background: #3F3F3F  '+ $next_track_arrow +' no-repeat center; } body.dark_mode #prev_track, body.dark_mode #next_track { background: #252525  '+ $next_track_arrow +' no-repeat center; #prev_track:hover, #next_track:hover { background-blend-mode:difference; } </style>';
        $gecko_styles.append($custom_gecko_styles);

    // for scrollIntoView
    var $block = '';

    if( $userAgent.indexOf('Firefox') > -1 ){
        document.head.appendChild($gecko_styles);
        $block = 'start';
    } else {
        $block = 'nearest';
    }
    // if( $userAgent.indexOf('Chrome') > -1 ){
        // Do something
    // }

    // Sidebar Header: Hide invisibles checkbox user setting
    if ( $settings.hide_invisibles === true ) {
        $inv_checkbox.find('input').prop('checked',true);
        $dir_table.addClass('hide_invisibles');
    }
    // Sidebar Header: Toggle Invisibles checkbox
    $inv_checkbox.on('click','input', function(e){
        $dir_table.toggleClass('hide_invisibles');
        $('.selected').removeClass('selected');
    });

    // Dir_Table: Hide Ignored Files
    if ( $settings.hide_ignored_files === true ) {
        $dir_table.addClass('hide_ignored');
    }

    // Dark Mode
    if ( $settings.dark_mode === true ) {
        $body.addClass('dark_mode');
    }
    $toggle_dark_mode.on('click',function(e) {
        e.preventDefault();
        $body.toggleClass('dark_mode');
    });

    // Hide hide invisibles chceckbox
    if ( platformIsWin() || window.location.href.indexOf('file:') < 0 ) {
        $inv_checkbox.hide();
    }

    // ***** END STYLES ***** //

    // HELPER FUNCTIONS

    // get item link
    var thisLink = function(x) {
        return $(x).find('a').attr('href') != undefined ? $(x).find('a').attr('href') : $(x).attr('href') ;
    };

    var thisText = function(x) {
        return $(x).find('a').text() ? $(x).find('a').text() : $(x).text();
    };


    // ***** BUILD MENUS ***** //

    // MENUS: Parents Link Menu Items

    var parentLinksArr = function() {
        var $paths_arr = [];
        for ( i = 1, n = $location_arr.length; i < n - 1; i+=1 ) {
            $paths_arr[0] = ''; // root
            $paths_arr[i] = $paths_arr[i - 1] + $location_arr[i] + '/';
        }
        return $paths_arr;
    };

    // MENUS: function to build menu list items
    var menuItems = function(x,y,i) { // (link, name, count)
        var $menu_item = '<li><a href="file:///' + x[i] + '">' + y[i] + '</a></li>';
        return $menu_item;
    };
	// MENUS: Parents Directory Menu Items
	var parents_dir_menu_arr = function() {
	    var $parents_dir_menu_items = [];
    	for ( var i = 1, n = parentLinksArr().length; i < n; i+=1 ) {
            $parents_dir_menu_items[0] = menuItems('/','/',0); // root
	        $parents_dir_menu_items[i] = menuItems( parentLinksArr(), parentLinksArr(), i);
    	}
        $parents_dir_menu_items.pop(); // remove current directory
        $parents_dir_menu_items = $parents_dir_menu_items.reverse().join('').replace(/%20/g,' ');
        return $parents_dir_menu_items;
    };
    $parents_dir_menu.siblings('ul').append( parents_dir_menu_arr() );

    // MENUS: Root Shortcuts Menu Items
    $settings.root_shortcuts = $settings.root_shortcuts.map(i => i + '/'); // append '/' to directory name

    var root_shortcuts_menu_arr = function() {
        if ( $settings.root_shortcuts.length ) {
            var $root_shortcut_items = [];
            for ( i = 0, n = $settings.root_shortcuts.length; i < n; i+=1 ) {
                $root_shortcut_items[i] = menuItems($settings.root_shortcuts,$settings.root_shortcuts,i);
            }
            $root_shortcut_items = $root_shortcut_items.join('');
            return $root_shortcut_items;
        }
	};

    // MENUS: User Shortcuts Menu Items
    var $working_user_shortcuts = $settings.user_shortcuts;

    var $user_shortcuts_display_name = $working_user_shortcuts.map(i => $settings.user_name + '/' + i + '/' ); // build display names
    var $home = '';
    if ( platformIsLinux() ) {
        $home = 'home/';
    } else {
        $home = 'users/';
    }
    $working_user_shortcuts = $working_user_shortcuts.map(i => $home + $settings.user_name + '/' + i + '/'); // build link fragments

    var userShortcutsMenuArr = function() {
		if ( $settings.user_name && $working_user_shortcuts.length ) {
			var $user_shortcut_items = [];
			for ( i = 0, n = $working_user_shortcuts.length; i < n; i+=1 ) {
                $user_shortcut_items[i] = menuItems( $working_user_shortcuts, $user_shortcuts_display_name, i );
			}
            $user_shortcut_items = $user_shortcut_items.join('');
            return $user_shortcut_items;
		}
	};

    // MENUS: File Shortcuts Menu Items
    var $file_shortcuts_display_name = $settings.file_shortcuts.map(i => i.split('/').pop()); // get file names from paths

    var fileShortcutsMenuArr = function() {
		if ( $settings.file_shortcuts.length ) {
			var $file_shortcut_items = [];
			for ( i = 0, n = $settings.file_shortcuts.length; i < n; i+=1 ) {
                $file_shortcut_items[i] = menuItems( $settings.file_shortcuts, $file_shortcuts_display_name, i );
			}
            $file_shortcut_items = $file_shortcut_items.join('').replace(/\/<\/a>/g,'<\/a>').replace(/<a\s/g,'<a class="file_shortcut" ').replace(/%20/g,' ');
            return $file_shortcut_items;
		}
	};
    $shortcuts_menu.siblings('ul').append( root_shortcuts_menu_arr(), $divider, userShortcutsMenuArr(), $divider.clone(), fileShortcutsMenuArr(), $divider.clone()  );

    // MENUS: Additional Menu Items
    $shortcuts_menu.siblings('ul').append($toggle_dark_mode, $export_settings);

    // MENUS: Show Menu on click
    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);
    });

    // ***** END BUILD MENUS ***** //

    // ***** END BUILD UI ***** //

    // ***** SIDEBAR ***** //

    // DIRECTORY TABLE

    // DIRECTORY TABLE VARIABLES
    if ( $dir_table.hasClass('table') ) {

        $dir_table_head = $dir_table.find('> thead').length ? $dir_table.find('> thead') : $dir_table.addClass('headless').find('> tbody > tr:first-of-type') ;
             $dir_table_head.attr('id','thead');
        $dir_table_head_cell = $dir_table_head.find('th');
        $dir_table_head_name = $dir_table_head.find('th:contains("Name")');
             $dir_table_head_name.addClass('name');
        $dir_table_head_details = $dir_table_head_name.nextAll();
        $dir_table_head_details.addClass('details');

        $dir_table_body = $dir_table.find('> tbody');
             $dir_table_body.attr('id','tbody');
        $dir_table_rule = $dir_table_body.find('hr').closest('tr');
             $dir_table_rule.addClass('rule');
        $dir_table_row = $dir_table_body.find('> tr').not('#thead').not('.rule');
        $dir_table_cell = $dir_table_row.find('td');
        $dir_table_link = $dir_table_cell.find('a');
        $dir_table_item_name = $dir_table_link.parent('td');
             $dir_table_item_name.addClass('name');
        $dir_table_item_icon = $dir_table_item_name.add($dir_table_head_name).prev();
             $dir_table_item_icon.addClass('icon'); // for directory lists with separate td for icons
        $dir_table_details = $dir_table_item_name.nextAll();
             $dir_table_details.addClass('details');
    }
    if( $userAgent.indexOf('Firefox') > -1 ) {
        $dir_table.addClass('firefox');
    }
    if ( $dir_table.hasClass('list') ) { // Apache server
        $dir_table_wrapper.addClass('headless');
        $dir_table_head = '';
        $dir_table_head_cell = '';
        $dir_table_head_name = '';
        $dir_table_head_details = '';
        $dir_table_body = '';
        $dir_table_row = $dir_table.find('li');
        $dir_table_cell = '';
        $dir_table_details = '';
        $dir_table_link = $dir_table_row.find('a');
//             $dir_table_link.addClass('name');
        $dir_table_item_name = thisText($dir_table_link);
        $sidebar.append($dir_table_wrapper);
    }
    $dir_table.detach().attr('id','dir_table');

    // ***** DIR_TABLE SETUP ***** //

	// Sidebar Header: Show details button click function
    function detailsButton() {
        $dir_table.toggleClass('show_details');
        $dir_table_body.css({'top':$dir_table_head.height() + 1 +'px'});
        $details_btn.find('span').toggle();
    }
    $details_btn.on('click', detailsButton );

    // Dir_table: Row hover effects
    $dir_table_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');
        }
    });

    // Dir_table: create link arrays
    var $dir_table_dir_link_arr = [];
    var $dir_table_file_link_arr = [];
    var $dir_table_file_ext_arr = [];
    $dir_table_row.not('.ignore,.invisible').find('a').each(function() {
        $this_link = thisLink(this).toLowerCase();
        if ( $this_link.endsWith('/') ) {
            $dir_table_dir_link_arr.push($this_link);
            return $dir_table_dir_link_arr;
        } else {
            var $this_link_ext = $this_link.slice($this_link.lastIndexOf('.'));
            $dir_table_file_link_arr.push($this_link);
            if ( $dir_table_file_ext_arr.indexOf($this_link_ext) < 0 ) {
                $dir_table_file_ext_arr.push($this_link_ext);
            }
            return $dir_table_file_link_arr, $dir_table_file_ext_arr;
        }
    });
    // Dir_table: array of all dir_table links
    var $dir_table_link_arr = [];
    $dir_table_link_arr = $dir_table_dir_link_arr.concat($dir_table_file_link_arr);

    // Dir_table: Classify items
    $dir_table_row.each(function() {

        $this_link = thisLink(this);
        $this_text = thisText(this);
        $this_ext = $this_text.toLowerCase().slice($this_text.lastIndexOf('.'));

        if ( $this_link !== undefined ) {

            $this_link = $this_link.toString().toLowerCase();

            // Directories or files
            if ( $this_link.endsWith('/') ) {
                $(this).addClass('dir');
            } else {
                $(this).addClass('file');
            }
            // pdf
            if ( $this_link.endsWith('.pdf') ) {
                $(this).addClass('pdf');
            } else if ( $.inArray( $this_ext, $image_ext_arr ) != -1 ) {
                $(this).addClass('img');
            } else if ( $.inArray( $this_ext, $audio_ext_arr ) != -1 ) {
                $(this).addClass('audio');
            } else if ( $.inArray( $this_ext, $font_ext_arr ) != -1 ) {
                $(this).addClass('font');
            }
            // invisibles
            if ( $this_link.slice($this_link.lastIndexOf('/') + 1 ) === '.' || $this_link.startsWith('.') || thisText(this).startsWith('.') ) {
                $(this).addClass('invisible');
            }
            // ignored
            if ( $settings.ignore_files === true ) {
                for ( i = 0, n = $settings.ignore_file_types.length; i < n; i+=1 ) {
                    if ( $this_link.endsWith( $settings.ignore_file_types[i] ) ) {
                        $(this).closest('#dir_table > tbody > tr').addClass('ignore');
                    }
                }
            }

            // directories as Files and hide ignored files
            if ( $this_text.endsWith('.app') ) {
                $(this).addClass('app');
                if ( $settings.apps_as_dirs === false ) {
                    $(this).addClass('ignore');
                }
            }

            if ( $(this).hasClass('dir') && $(this).hasClass('app') && $this_text.endsWith('/') ) {
                $(this).find('a').text($this_text.slice(0,$this_text.lastIndexOf('/')));
            }
        }
    }); // end classify dir_table items

    // Append dir_table to sidebar or wrapper, depending on directory type
    if ( $dir_table.hasClass('table') ) {
        $dir_table.appendTo($sidebar);
    } else {
        $dir_table.appendTo($dir_table_wrapper);
    }

    // Show grid button if images or fonts are found
    if ( $dir_table.find('.img').length ) {
        $dir_table.add($grid_btn).addClass('has_images');
    }
    if ( $dir_table.find('.font').length ) {
        $dir_table.add($grid_btn).addClass('has_fonts');
    }
    if ( $dir_table.find('.audio').length ) {
        $dir_table.add($body).addClass('has_audio');
    }

    // ***** End dir_table setup ***** //

    // Cereate Main Content element and append Sidebar and Content Pane.
    var $main_content = $('<table id="main_content"><tbody><tr></tr></tbody></table>');
	    $main_content.find('tr').append( $sidebar_wrapper, $content_pane );

    // Append everything to body
    $body.prepend($main_content);

    // ***************************** //

    // ***** SHOW/HIDE CONTENT ***** //

    // MENUS: Hide Menu function
    function hideMenu() {
        $('.menu').hide();
    }
    $(document).on('click', hideMenu );

	// Set content height
    function setContentHeight() {
        var $dir_table_head_height = $dir_table_head.length ? $dir_table_head.height() : 0;
        var $content_headerHeight = $content_header.outerHeight();
        $dir_table.add($dir_table_wrapper).css({'height':window.innerHeight - $sidebar_header.outerHeight() });
        $dir_table.find($dir_table_body).css({'top': $dir_table_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_font_size.css({'top':$content_headerHeight + 13 });
        $content_media.find('> div').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);
        } else if ( $content_pane.hasClass('has_grid_content') && $content_grid.hasClass('has_image_grid') ) {
            $content_title.empty().prepend('Images from: ' + $current_dir_name);
        } else if ( $content_pane.hasClass('has_grid_content') && $content_grid.hasClass('has_font_grid') ) {
            $content_title.empty().prepend('Fonts from: ' + $current_dir_name);
        } else if ( $body.hasClass('has_audio') ) {
            $content_title.empty().prepend( thisText($playing) );
        } else {
            $content_title.empty().prepend( thisText($('.selected')) );
        }
        if ( $('.selected').hasClass('ignore') ) {
            $content_title.append(' (Ignored content)' );
        }
    }

    // Get image dimensions
    function getDimensions(link, callback) {
        var img = new Image();
        img.src = link;
        img.onload = function() { callback( this.width, this.height ); };
    }

    function scrollSidebar(row) {
        row[0].scrollIntoView({ behavior:'smooth', block:$block, inline:'nearest' });
    }
    function scrollGrid(item) {
        item[0].scrollIntoView({ behavior:'smooth', block:$block, inline:'nearest' });
    }

    // Select row on click and set classes for $content_pane
    function selectThis(row) {
        if ( row.hasClass('audio') ) {
            row.addClass('playing').siblings().removeClass('playing hovered');
        } else {
            row.addClass('selected').siblings().removeClass('selected hovered');
        }

        $selected = $dir_table.find('.selected');
        $playing = $dir_table.find('.playing');

        if ( $selected.length && $body.not('.has_audio') ) {
//            scrollSidebar( $selected );
        }
        if ( $playing.length ) {
            scrollSidebar( $playing );
        }

        if ( row.hasClass('dir') ) {
            closeThis(); // empty content pane
            setContentTitle();
            $content_pane.removeClass().addClass('has_dir_content');
        }

        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); // grid scroll is not working reliably
        }
    }

    function showIgnored() {
        closeThis();
        $content_pane.addClass('has_ignored_content');
        $content_title.append(' (Ignored content)' );
    }

    function showImage(row,link) {
        $content_pane.addClass('has_image_content');
        $content_image.find('img').removeClass('zoom_img').attr('src',link);
        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 = row.find('.name').text();

        addCustomStyle($font_family,link);

        $content_pane.addClass('has_font_content');
        $content_font.css({ 'font-family':'"'+ $font_family +'"' });
    }

    function addCustomStyle(font_family,link) {
        if ( $font_family_arr.indexOf(font_family) == -1 ) {
            $font_family_arr.push(font_family);
            $custom_font_styles.append('@font-face { font-family: "'+ font_family +'"; src: url("'+ link +'"); }'); // only add style if it doesn't exist
        }
    }

    // Show selected content
    function showThis(row,link) {

        if ( $content_pane.hasClass('has_grid_content') ) {
            $content_pane.removeClass().addClass('has_hidden_grid'); // hide grid when showing new content
        } else
        if ( $content_pane.hasClass('has_hidden_grid') ) {
            $content_pane.removeClass().addClass('has_hidden_grid'); // keep grid hidden when showing new content
        } else {
            $content_pane.removeClass();
        }

        if ( row.hasClass('ignore') ) {
            showIgnored();
            return;
        }
        if ( row.hasClass('img') ) {
            showImage(row,link);
            return;
        }
        if ( row.hasClass('pdf') ) {
            showPdf(link);
            return;
        }
        if ( row.hasClass('font') ) {
            showFont(row,link);
            return;
        }
        if ( row.hasClass('audio') ) {
            $count = $dir_table.find('.audio').index(row);
            playThis( $count, 'play' );
            return;
        }
        if ( row.hasClass('file') ) {
            showFile(link);
            return;
        }
    }

    // ***** MAIN CLICK FUNCTION FOR SHOWING CONTENT ***** //

    function clickDirTableLink(link) {
        var $this_row = link.closest('#dir_table > tbody > tr, #dir_table > li');
        $this_link = thisLink(link);

        if ( $this_row.hasClass('dir') ) {
            window.location = $this_link;
        }
        hideMenu();
        showThis( $this_row, $this_link );
        selectThis( $this_row );
        setContentTitle();
        setContentHeight();
    }

    $dir_table_row.on('click','a',function(e) {
        e.preventDefault();
        closeContent();
        clickDirTableLink($(this));
    });

    // Auto-select file from file shortcut list;
    // Limitations: only loads last file from list found in directory, doesn't know anything about which actual file shortcut was selected
    function autoSelectFile() {
        if ( $settings.file_shortcuts.length ) {
            for ( i = 0, n = $settings.file_shortcuts.length; i < n; i+=1 ) {
                if ( $.inArray($settings.file_shortcuts[i], $dir_table_link_arr ) ) {
                    $dir_table.find( 'a[href*="/' + $settings.file_shortcuts[i] + '"]').click();
                }
            }
        }
    }
    autoSelectFile();

    // File shortcuts: load directory then auto-select file
    function showFileShortcut(item) {
        e.preventDefault();
        $this_link = thisLink(item);
        var $this_dir = $this_link.slice(0,$this_link.lastIndexOf('/') );
        window.location = $this_dir;
    }
    $('.file_shortcut').on('click',showFileShortcut );

    function reloadThis() {
        if ( $content_pane.hasClass('has_grid_content') ) {
            $grid_btn.click();
            $content_grid.css({'font-size':'1em','grid-template-columns':'repeat(auto-fit, minmax(150px, 1fr))'});
            return;
        }
        if ( $content_pane.is('[class*="content"]') ) {
	        $('.selected').find('a').click();
            $content_font.css({'font-size':'1em'});
        } else {
            return;
        }
    }
    $content_reload_btn.on('click', reloadThis );

    function closeContent() {
        $content_image.find('img').removeAttr('src');
        $content_embed.removeAttr('src');
        $content_iframe.removeAttr('src');
        $content_font.css({'font-family':''});
    }

    function closeThis() {
        hideMenu();
        if ( $content_pane.hasClass('has_grid_content') ) {
            $content_pane.removeClass('has_grid_content');
            $content_grid.removeClass().empty().css({'font-size':'1em'});
        } else if ( $content_pane.hasClass('has_hidden_grid') ) {
            $content_pane.removeClass().addClass('has_grid_content');
            closeContent();
        } else {
            $content_pane.removeClass();
            closeContent();
        }
        setContentTitle();
    }
    // Close content button
    $content_close_btn.on( 'click', closeThis );


    // ***** KEYBOARD EVENTS ***** //
    function navigateToThis(row) {
        if ( $content_pane.hasClass('has_grid_content') ) {
            selectThis(row);
        } else {
            row.find('a').click();
        }
    }

    $body.on('keydown',$dir_table,function(e) {

        var $selected = $dir_table_row.filter('.selected');
        var $selected_href = thisLink($selected);
        var $playing = $dir_table_row.filter('.playing');
        var $first_item = $dir_table_row.filter(':visible').not('.audio').first();
        var $last_item = $dir_table_row.filter(':visible').not('.audio').last();
        var $prev_item = $selected.prevAll(':visible').not('.audio').first();
        var $next_item = $selected.nextAll(':visible').not('.audio').first();
        var $first_image = $dir_table_row.filter('.img:visible').first();
        var $last_image = $dir_table_row.filter('.img:visible').last();
        var $prev_image = $selected.prevAll('.img:visible').first();
        var $next_image = $selected.nextAll('.img:visible').first();
        var $first_font = $dir_table_row.filter('.font:visible').first();
        var $last_font = $dir_table_row.filter('.font:visible').last();
        var $prev_font = $selected.prevAll('.font:visible').first();
        var $next_font = $selected.nextAll('.font:visible').first();

        switch ( e.key ) {

            case 'ArrowUp':

                // Go to parent folder
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    window.location = $parent_dir_link;
                    break;
                }
                // Allow arrow navigation within
                if ( $('*[contentEditable="true"').is(':focus') ) {
                    return;
                }

                e.preventDefault();
                if ( $first_item.hasClass('selected') || $selected.length < 1 ) {
                    $last_item.hasClass('dir') ? selectThis($last_item) : $last_item.find('a').click();
                } else {
                    $prev_item.hasClass('dir') ? selectThis($prev_item) : $prev_item.find('a').click();
                }
                scrollSidebar( $selected.length ? $selected : $last_item );

                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') ) {
                    window.location = $selected_href;
                    break;
                }

                e.preventDefault();
                if ( $last_item.hasClass('selected') || $selected.length < 1 ) {
                    $first_item.hasClass('dir') ? selectThis($first_item) : $first_item.find('a').click();
                } else {
                    $next_item.hasClass('dir') ? selectThis($next_item) : $next_item.find('a').click();
                }
                scrollSidebar( $selected.length ? $selected : $first_item );

                break;

            case 'ArrowLeft':

                if ( (e.ctrl || e.metaKey) || ( e.ctrl && e.metaKey ) ) {
                    return;
                } else if ( $('*[contentEditable="true"').is(':focus') ) {
					return;
                }
                // Navigate Grid or Images
                if ( $playing.length ) {
                    prevTrack();
                } else if ( $selected.length < 1 ) {
                    $last_image.length ? navigateToThis($last_image) : navigateToThis($last_font);
                } else if ( $first_image.hasClass('selected') || $selected.length < 1 ) {
                    $last_font.length ? navigateToThis($last_font) : navigateToThis($last_image);
                } else if ( $first_font.hasClass('selected') || $selected.length < 1 ) {
                    $last_image.length ? navigateToThis($last_image) : navigateToThis($last_font);
                } else if ( $selected.hasClass('img') && $prev_image.length ) {
                    navigateToThis($prev_image);
                } else {
                    navigateToThis($prev_font);
                }
                break;

            case 'ArrowRight':

                if ( (e.ctrl || e.metaKey) || ( e.ctrl && e.metaKey ) ) {
                    return;
                } else if ( $('*[contentEditable="true"').is(':focus') || $selected.hasClass('dir ignore') ) {
					return;
                }
                // Navigate Grid or Images
                if ( $selected.hasClass('dir') && !$body.hasClass('has_audio') ) {
                    window.location = $selected_href; // Open directory
                } else if ( $playing.length ) {
                    nextTrack();
                } else if ( $selected.length < 1 ) {
                    $first_image.length ? navigateToThis($first_image) : navigateToThis($first_font);
                } else if ( $last_image.hasClass('selected') || $selected.length < 1 ) {
                    $first_font.length ? navigateToThis($first_font) : navigateToThis($first_image);
                } else if ( $last_font.hasClass('selected') || $selected.length < 1 ) {
                    $first_image.length ? navigateToThis($first_image) : navigateToThis($first_font);
                } else if ( $selected.hasClass('img') && $next_image.length ) {
                    navigateToThis($next_image);
                } else {
                    navigateToThis($next_font);
                }
                break;

            case ' ':
                // Play/pause audio
                if ( $body.hasClass('has_audio') ) {
                    playPause();
                }
                break;

            case 'Enter':
                // Open directories (or ignore)
                if ( $selected.hasClass('app') && $settings.apps_as_dirs === false ) {
                    break;
                } else {
                    $selected.find('a').click();
                }
                break;

            case 'd':
                // Toggle Invisibles with Command-i
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    $details_btn.click();
                }
                break;

            case 'g':
                // Show image Grid
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    $grid_btn.click();
                }
                break;

            case 'i':
                // Toggle Invisibles with Command-i
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    $inv_checkbox.find('input').click();
                }
                break;

            case 'o':
                // Cmd/Ctrl + Shift + O: Open selected item in new window
                if ( (navigator.platform.match("Mac") ? e.metaKey && e.shiftKey : 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)  ) {
                    if ( $content_pane.is('[class*="has_"]') ) {
                        e.preventDefault();
                        $content_reload_btn.click();
                    } else {
                        return;
                    }
                }
                break;

            case 'w':
                // Close content pane if Close button visible with Command-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();
                }
                break;

            case '.':
                // Increase font preview size
                if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && e.shiftKey ) {
                    $('#increase').click();
                }
                break;

            case ',':
                // Dencrease 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 ***** //

    // ***** IMAGE NAVIGATION ***** //

	$prev_btn.on( 'click', function(event) {
        e = $.Event("keydown");
        $playing.length ? e.key = 'ArrowUp' : e.key = 'ArrowLeft';
        $dir_table.trigger(e);
    });

	$next_btn.on( 'click', function(event) {
        e = $.Event("keydown");
        $playing.length ? e.key = 'ArrowDown' : e.key = 'ArrowRight';
        $dir_table.trigger(e);
    });

    // Zoom Images
    $content_image.find('img').on('click',function(e) {
        $this_link = $(this).attr('src');
        var $offset = $(this).offset();
        var $this_width = $(this).width();
        var $this_height = $(this).height();

        $(this).toggleClass('zoom_img');

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

    });

    // ***** GRIDS ***** //

    var $font_family;

    var imageGridItems = function() {
        var $image_grid_items_arr = [];
        $dir_table_row.filter('.img').each(function() {

            $this_link = thisLink(this);
            $this_ext = $this_link.toLowerCase().slice($this_link.lastIndexOf('.'));

            if ( $.inArray( $this_ext, $image_ext_arr ) != -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;
    };

    var fontGridItems = function() {
        var $font_grid_items_arr = [];
        $dir_table_row.filter('.font').each(function() {

            $this_link = thisLink(this);
            $font_family = $(this).find('.name').text();

            addCustomStyle( $font_family, $this_link );

            $font_grid_item_el.attr('href',$this_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;
    };

    // Grid Button Click
    function showGrid() {
        $content_pane.removeClass('has_hidden_grid').addClass('has_grid_content');

        if ( $dir_table.hasClass('has_images') && ( $dir_table.hasClass('has_fonts') ) ) {
            $content_grid.empty().append( imageGridItems() ).append( fontGridItems() );
            $content_grid.removeClass().addClass('has_grid');
        } else if ( $dir_table.hasClass('has_images') ) {
            $content_grid.empty().append( imageGridItems() );
            $content_grid.removeClass().addClass('has_image_grid');
        } else {
            $content_grid.empty().append( fontGridItems() );
            $content_grid.removeClass().addClass('has_font_grid');
        }
        setContentTitle();
        setContentHeight();
    }
    $grid_btn.on('click', showGrid );

    $('#show_image_grid').on('click',function(e) {
        e.stopPropagation();
        $content_pane.removeClass('has_hidden_grid').addClass('has_grid_content');
        $content_grid.empty().append( imageGridItems() );
        $content_grid.removeClass().addClass('has_image_grid');
        setContentTitle();
        setContentHeight();
    });

    $('#show_font_grid').on('click',function(e) {
        e.stopPropagation();
        $content_pane.removeClass('has_hidden_grid').addClass('has_grid_content');
        $content_grid.empty().append( fontGridItems() );
        $content_grid.removeClass().addClass('has_font_grid');
        setContentTitle();
        setContentHeight();
    });

    // GRID ITEMS

    // Grid Item Hover
    $content_grid.on('mouseenter','> div:not(".selected")',function() {
        $dir_table.find('a[href="' + thisLink(this) + '"]').closest('#dir_table > tbody > tr,#dir_table li').addClass('hovered');
    }).on('mouseleave','> div:not(".selected")',function() {
        $dir_table.find('a[href="' + thisLink(this) + '"]').closest('#dir_table > tbody > tr,#dir_table > li').removeClass('hovered');
    });

    // Grid Item Click
    $content_grid.on('click','> div[class*="item"]',function(e) {
        e.preventDefault();
        $dir_table.find('a[href="' + thisLink(this) + '"]').click();
    });

    // ***** FONT PREVIEWS ***** //

    var fontSize = function(el) {
        return parseFloat(el.css('font-size'));
    };

    function setFontSize(el,x) {
        el.css({'font-size':( fontSize(el)/$em * x ) +'em'});
    }

    var $em = parseInt(getComputedStyle(document.body).fontSize); // pts/em
    var $factor = 1.125;

    // Scale Image Grid Items
    var $image_grid_item_size;
    var $grid_scale_factor;

    function setImageSize(x) {
        $image_grid_item_size = parseInt($('.image_grid_item').width()) + x;
        $grid_scale_factor = parseInt($content_grid.attr('data-grid-scale-factor'));
        $content_grid.attr('data-grid-scale-factor',parseInt($grid_scale_factor) + x).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'});
        $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'});
    }

    function enlargeGridItems() {
        if ( $content_pane.hasClass('has_grid_content') && $content_grid.hasClass('has_font_grid') || $content_pane.hasClass('has_grid_content') && $content_grid.hasClass('has_grid') ) {
            setFontSize($content_grid,$factor);
            setImageSize(25);
            return;
        }

        if ( $content_pane.is('.has_hidden_grid.has_font_content') ) {
            setFontSize($content_font,$factor);
            return;
        }
        if ( $content_pane.is('.has_font_content') ) {
            setFontSize($content_font,$factor);
            return;
        }
        if ( $content_pane.is('.has_grid_content') && $content_grid.is('.has_image_grid') ) {
            setImageSize(25);
            return;
        }
    }

    function reduceGridItems() {
        if ( $content_pane.is('.has_grid_content') && $content_grid.is('.has_font_grid') || $content_pane.is('.has_grid_content') && $content_grid.is('.has_grid') ) {
            setFontSize($content_grid,1/$factor);
            setImageSize(-25);
            return;
        }
        if ( $content_pane.is('.has_hidden_grid.has_font_content') ) {
            setFontSize($content_font,1/$factor);
            return;
        }
        if ( $content_pane.is('.has_font_content') ) {
            setFontSize($content_font,1/$factor);
            return;
        }
        if ( $content_pane.is('.has_grid_content') && $content_grid.is('.has_image_grid') ) {
            setImageSize(-25);
            return;
        }
    }

    $('#font_size').on('click','span',function() {
        if ( $(this).attr('id') === 'increase' )  {
            enlargeGridItems();
        }
        if ( $(this).attr('id') === 'decrease' )  {
            reduceGridItems();
        }
    });

    // ***** END FONT PREVIEWS ***** //

    // ***** AUDIO CONTENT ***** //

    var $count = 0;
    var $playlist = [];
    var $unplayed = [];
    var $reset = [];
    var $next;
    var $task;

    // SEE LINE 833
    $dir_table_row.filter('.audio').each(function() {
        $this_link = thisLink(this);
        $playlist.push($this_link);
        return $playlist;
    });

    function playThis( count, task ) {
        $audio.find('source').attr('src', $playlist[count] );
        $audio.trigger('load');

        playAudio(task);

        selectThis( $dir_table.find('a[href="' + $playlist[count] + '"]').closest('#dir_table > tbody > tr,#dir_table > li') );
        setContentTitle();
    }

    function playAudio( task ) {
        if ( task == 'play' ) {
            $audio.trigger('play');
        }
        if ( task == 'stop' ) {
            $audio.trigger('pause');
            $audio.prop('currentTime',0);
        }
    }

    function playPause() {
        $('#audio').get(0).paused ? $('#audio').get(0).play() : $('#audio').get(0).pause();
    }

    $shuffle.on('click',function() {
        $unplayed = [];
        for ( i = 0; i < $playlist.length; i += 1 ) {
            $unplayed[i] = i;
            $reset[i] = i;
        }
        if ( $shuffle.find('input').prop('checked') === true ) {
            $unplayed.splice(0);                                               // reset the unplayed list
            $unplayed = $unplayed.concat($reset);                              // reset the unplayed list;
            $count = Math.floor( Math.random() * $unplayed.length );
            playThis($count,'stop');
        }
    });

    function shuffle() {
        if ( $unplayed.length <= 1 && $loop.find('input').prop('checked') ) { // If loop is checked, and all songs have been shuffled...
            $unplayed.splice(0);                                               // reset the unplayed list
            $unplayed = $unplayed.concat($reset);                              // reset the unplayed list;
            $task = 'play';
        } else if ( $unplayed.length === 0 ) {                                 // else if all songs have been shuffled, select the first song and stop;
            $count = 0;
            $task = 'stop';
        } else {                                                               // else
            $next = Math.floor( Math.random() * $unplayed.length ) ;           // choose a random index number from the remaining unplayed songs,
            $count = $unplayed[ $next ];                                       // set the playing $count to the index
            $unplayed.splice( $next, 1 );                                      // remove the indexed value from the unplayed list,
            $task = 'play';
        }
    }

    function nextTrack() {
        if ( $shuffle.find('input').prop('checked') ) {
            shuffle();
        } else if ( $loop.find('input').prop('checked') == false && $count === $playlist.length - 1) {
            $count = 0;
            $task = 'stop';
        } else if ( $loop.find('input').prop('checked') && $count === $playlist.length - 1 ) {
            $count = 0;
            $task = 'play';
        } else if ( $count < $playlist.length - 1 ) {
            $count += 1;
            $task = 'play';
        }
        playThis($count, $task);
    }

    function prevTrack() {
        if ( $shuffle.find('input').prop('checked') ) {
            shuffle();
        } else if ( $count === 0 ) {
            $count = ($playlist.length - 1);
        } else if ( $count > 0 ) {
            $count -= 1;
        }
        playThis($count,'play');
    }

    $prev_track.on( 'click', prevTrack );
    $next_track.on( 'click', nextTrack );

    // Audio setup
    if ( $body.is('.has_audio') ) {

        $audio.find('source').attr('src', $playlist[0] );
        $audio.trigger('load');

        // Select Dir_table item and set content title
        selectThis($dir_table.find('a[href="' + $playlist[$count] + '"]').closest('#dir_table > tbody > tr, #dir_table > li'));
        setContentTitle();

        autoLoadCover();
        // Background for music directories w/o image files?
        if ( !$dir_table.find('.img').length ) {
            $content_image.css({'display':'block','background':$music +' no-repeat center','background-size':'33.33%','opacity':'0.2'});
        } else {
            $content_image.css({'background':'none'});
        }
        if ( $settings.autoplay == true ) {
            $audio.trigger('play');
        }

        $audio.on('ended', nextTrack );
    }

    function autoLoadCover() {
        if ( $dir_table_row.filter('.img').length ) {
            var $this_title;
            var $cover_titles = ['/cover.','/front.'];
            $dir_table_row.filter('.img').each(function() {

                $this_title = thisLink(this).toLowerCase();

                if ( !$this_title.startsWith('/') ) {
                    $this_title = '/'+ $this_title; // Firefox
                }
                for ( i = 0; i < $cover_titles.length; i+=1 ) {
                    if ( $this_title.indexOf( $cover_titles[i] ) != -1) {
                        showImage( $(this), thisLink(this) );
                        break;
                    } else {
                        showImage( $dir_table_row.filter('.img').first(), thisLink( $dir_table_row.filter('.img').first() ) );
                    }
                }
            });
        }
    }

    // ***** END AUDIO CONTENT ***** //

    // OTHER FUNCTIONS

    // Resize Sidebar/Content Pane
	$handle.on('mousedown',function(f) {
        f.stopPropagation();
        var $startX = f.pageX;
        var $sidebar_width = $sidebar_wrapper.width();
        var $window_width = window.innerWidth;
        $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() {
            $content_overlay.hide();
            $sidebar_wrapper.css({'-webkit-user-select':'auto','-moz-user-select':'auto','user-select':'auto'});
            $(document).off('mousemove');
        });
    });


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


})();