// ==UserScript==
// @name        Better Gallections
// @version     3.0.2
// @description Do horizontal folders bother you? What about those huge titles and wasted space?
// @author      Valognir (https://www.deviantart.com/valognir)
// @namespace   https://greasyfork.org/en/scripts/404189-better-gallections
// @grant       GM_addStyle
// @run-at      document-start
// @match       https://www.deviantart.com/*
// @downloadURL none
// ==/UserScript==

function dothething(){
    var folderlinks = document.querySelectorAll('section>a[href*="/gallery/"], section>a[href*="/favourites/"], section>a[href*="/private-collections/"]');

    let css = `
            ::-webkit-scrollbar {
                    width: 5px !important;
                }

                ::-webkit-scrollbar-track {
                    background: transparent !important;
                }
                ::-webkit-scrollbar-thumb {
                    background-color: rgba(155, 155, 155, 0.5) !important;
                    border: transparent !important;
                }
    `;

    let styleNode = document.createElement("style");
    styleNode.appendChild(document.createTextNode(css));
    (document.querySelector("head") || document.documentElement).appendChild(styleNode);

    if (folderlinks.length > 0) {

        var folderssection = folderlinks[0].parentNode.parentNode.parentNode;
        folderssection.style.width = '250px';
        folderssection.style.marginRight = '20px';
        folderssection.style.height = 'calc(100vh - 140px)';
        folderssection.style.maxHeight = 'calc(100vh - 121px)';
        folderssection.style.overflow = 'hidden scroll';
        folderssection.style.scrollbarWidth = 'thin';
        folderssection.style.scrollbarColor = 'rgba(155, 155, 155, 0.5) transparent';
        folderssection.style.display = 'inline-block';
        folderssection.style.verticalAlign = 'top';
        folderssection.style.position = 'sticky';
        folderssection.style.top = '121px';

        var lrbuttons = folderssection.querySelectorAll('button[aria-hidden="true"]');
        lrbuttons.forEach(function(element) {
            element.style.display = 'none'
        });

        var folderscontainer = folderlinks[0].parentNode.parentNode;
        folderscontainer.style.width = '250px';
        folderscontainer.style.overflow = 'scroll';
        folderscontainer.style.display = 'inline-block';
        folderscontainer.style.verticalAlign = 'top';
        folderscontainer.style.padding = '0 40px 400px 0';
        folderscontainer.style.height = 'auto';
        folderscontainer.style.margin = '0 0 20px 0';

        folderlinks.forEach(function(element) {
            var folder = element.parentNode;
            folder.style.margin = '0 0 20px';

            element.addEventListener("click", function() {
                window.scrollTo(0, 335);
            });

            if (element.querySelector('img')) {
                var folderimg = element.querySelector('img');
                folderimg.style.height = '227px';
            } else if (element.querySelector('section')) {
                folderimg = element.querySelector('section');
                folderimg.style.height = '210px';
                folderimg.style.paddingTop = '30px';
                folderimg.style.justifyContent = 'flex-start';
            } else if (element.querySelector('div > div > div[style]')) {
                folderimg = element.querySelector('div > div > div[style]');
                folderimg.style.height = '227px';
            }
            if (folderimg) {
                folderimg.style.width = '248px';
                var folderimgcontainer = folderimg.parentNode;
                folderimgcontainer.style.width = '248px';
                folderimgcontainer.style.height = '210px';
                folderimgcontainer.style.borderRadius = '4px';
            }

            var foldertitle = element.firstElementChild.lastElementChild;
            foldertitle.style.margin = '-72px 0 0 0';
            var bgcolor = getComputedStyle(foldertitle).getPropertyValue('--g-bg-secondary');
            foldertitle.firstElementChild.style.background = bgcolor;
            foldertitle.firstElementChild.style.padding = '4px 10px';
            foldertitle.firstElementChild.style.background = `linear-gradient(to right, ${bgcolor}, ${bgcolor}40)`;
            element.firstElementChild.style.padding = '0';
            var folderoverlays = element.firstElementChild.firstElementChild;
        });

        var gallerycontents = document.querySelector('#sub-folder-gallery');
        gallerycontents.style.display = 'inline-block';
        gallerycontents.style.width = 'calc(100vw - 380px)';
        gallerycontents.style.overflow = 'hidden';
        gallerycontents.style.marginTop = '-90px';

        var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        if (screenWidth >= 1330) {
            gallerycontents.style.width = 'calc(100vw - 420px)';
        }

        var gallerytitle = document.querySelector('#sub-folder-gallery > div > div:first-child > div > div:first-child');
        gallerytitle.style.margin = '21px 0 -8px';
    }
};

document.addEventListener('DOMContentLoaded', function() {
    const observer = new MutationObserver(dothething);
    observer.observe(document.body,{ childList: true, subtree: true });
});