/*! MFPanels.js @ https://methodfish.com/Projects/MFPanels
 *
 * Version: 1.8
 * Licence: MIT
*/


function MFPanels(_useCookies) {
    /*
    Important: All divs involved should have box-sizing:border-box set at the css (so that padding is included in the widths). If this is not set then the class will fix it manually
    Note, if the available space for a panel is less than the padding on that panel then the panel might fall underneath where it is expected.
     */
    if ( _useCookies==undefined ) _useCookies=false;
    var _paneldragger = null, _paneldragMin, _paneldragMax;
    //-----------------------------------------------------------------------------------------
    function doResetPanels() {
        const pageIdentifier = window.location.pathname;
        if ( _useCookies ) {
            document.cookie = "urlDivSizes=; Max-Age=0;path="+pageIdentifier;
            console.log('reset urlDivSizes cookies setting');
        }
        else {
            localStorage.removeItem('urlDivSizes'+pageIdentifier);
            console.log('reset urlDivSizes localStorage setting');
        }
    }
    //-----------------------------------------------------------------------------------------
    function getUniqueID(prefix) {
        var n = 1;
        while (document.getElementById(prefix + n)) n++;
        return prefix + n;
    }
    //-----------------------------------------------------------------------------------------
    function doSaveDimensions() {
        // Get the divs on the page
        const divs = document.querySelectorAll('div');

        // Create an object to store width and height values for each div on this URL
        const urlDivSizes = {};

        // Loop through each div and save its width and height to the object
        divs.forEach((div, index) => {
            const divId = div.id; // `div-${index}`; // Generate a unique ID for each div
            const width = div.style.width;
            const height = div.style.height;

            if ( width.endsWith("%") || height.endsWith("%") ) {
                // Add the div width and height to the object for this URL
                if (!urlDivSizes[divId]) {
                    urlDivSizes[divId] = {};
                }
                urlDivSizes[divId] = {width, height};
            }
        });

        // Save the urlDivSizes object to local storage
        let v=JSON.stringify(urlDivSizes);
        const pageIdentifier = window.location.pathname;
        if ( _useCookies ) document.cookie = "urlDivSizes="+encodeURIComponent(v)+";expires=0;path="+pageIdentifier+";";
        else localStorage.setItem('urlDivSizes'+pageIdentifier, v);
        //console.log('saved '+JSON.stringify(urlDivSizes));
    }
    //-----------------------------------------------------------------------------------------
    function getElemInfo(elem) {
        let result=elem.tagName;
        if ( elem.id ) result+='#'+elem.id;
        if ( elem.className ) result+='.'+elem.className;
        return '['+result+']';
    }
    //-----------------------------------------------------------------------------------------
    function doRestoreDimensions() {
        // Retrieve the urlDivSizes object from local storage
        let urlDivSizesString;
        const pageIdentifier = window.location.pathname;
        if ( _useCookies ) {
            //var match = document.cookie.split(";");
            let match = document.cookie.match(RegExp('(?:^|;\\s*)' + 'urlDivSizes' + '=([^;]*)'));
            urlDivSizesString = match ? decodeURIComponent(match[0].substr(match[0].indexOf("=")+1)) : null;
            console.log('Restored from cookie: '+urlDivSizesString);
        }
        else {
            urlDivSizesString = localStorage.getItem('urlDivSizes'+pageIdentifier);
            console.log('Restored from localStorage: '+urlDivSizesString);
        }
        if ( !urlDivSizesString ) return;
        let urlDivSizes = urlDivSizesString ? JSON.parse(urlDivSizesString) : {};

        // Loop through each div and set its width and height from saved dimensions (if available)
        let sum=0;
        Object.keys(urlDivSizes).forEach((divId) => {
            let { width, height } = urlDivSizes[divId];
            let panel = document.getElementById(divId);
            if (panel) {
                let container = panel.parentElement;

                panel.style.width = width;
                panel.style.height = height;
            }
        });
    }
    //-----------------------------------------------------------------------------------------
    function doRepositionDividers() {
        let draggers = document.getElementsByClassName('paneldragger');
        for (let d = 0; d < draggers.length; d++) {
            let panel = document.getElementById(draggers[d].getAttribute('data-elem'));
            let container=panel.parentElement;
            if (/\bdragger-h\b/.test(draggers[d].classList)) {
                let w=parseInt(draggers[d].getBoundingClientRect().width);
                draggers[d].style.top = (panel.getBoundingClientRect().top) + 'px';
                draggers[d].style.left = (panel.getBoundingClientRect().left + panel.getBoundingClientRect().width - w/2) + 'px';
                draggers[d].style.height = (panel.getBoundingClientRect().height) + 'px';
            }
            if (/\bdragger-v\b/.test(draggers[d].classList)) {
                let h=parseInt(draggers[d].getBoundingClientRect().height);
                draggers[d].style.left = (panel.getBoundingClientRect().left) + 'px';
                draggers[d].style.top = (panel.getBoundingClientRect().top + panel.getBoundingClientRect().height - h/2) + 'px';
                draggers[d].style.width = (+panel.getBoundingClientRect().width) + 'px';
            }
        }
    }
    //-----------------------------------------------------------------------------------------
    function isnull(tx) {
        if ( ! tx ) return "[null]";
        return tx;
    }
    //-----------------------------------------------------------------------------------------
    function removePX(x){ // Return "a" from inside "apx"
        if ( x=='' ) return parseInt(0);
        let x2=''+x;
        return parseInt(x2.replace(/px/, ''),10);
    }
    //-----------------------------------------------------------------------------------------
    function getComputedStyleX(elem,attr,doRemovePX,nullsAreZero) {
        // get the computed style setting for an element.
        // Note, this can return the value (inc 'px'), or [auto] or [null] or ""
        // go directly to elem.getBoundingClientRect().left|top|width|height|bottom|right

        if ( doRemovePX==undefined ) doRemovePX=true;
        if ( nullsAreZero==undefined ) nullsAreZero=false;
        if ( typeof(elem)=='string' ) {
            if (startsWith(elem, '.')) {
                return getComputedStyleX(dge(elem,0), attr, doRemovePX,nullsAreZero);
            }
            else {
                elem=dge(elem);
            }
        }
        if ( !elem ) return "Null given in getComputedStyleX(NULL,'"+attr+"')";

        let style = window.getComputedStyle(elem);
        let result = style.getPropertyValue(attr);
        if ( doRemovePX && result.indexOf('px')>-1 ) {
            result=parseFloat(removePX(result));
            if ( !result && nullsAreZero ) return 0;
            else return isnull(result);
        }
        if ( !result && nullsAreZero ) return 0;
        return isnull(result);
    }
    //-----------------------------------------------------------------------------------------
    function hasClassName(elem, classNm) {
        const regex = new RegExp('\\b' + classNm + '\\b');
        return regex.test(elem.classList);
    }
    //-----------------------------------------------------------------------------------------
    function setBoxBorder(container) {

        let bs=getComputedStyleX(container, 'box-sizing');
        if ( bs!=='border-box' ) {
            console.warn('mfpanel fixing box-sizing for div.'+getElemInfo(container)+' (from '+bs+')'); // Ideally this is done by the developer and therefore not required
            container.style.boxSizing='border-box';
        }

        var panels=container.children;
        for(let p=0; p<panels.length; p++) {
            let bs=getComputedStyleX(panels[p], 'box-sizing');
            if ( bs!=='border-box' ) {
                console.warn('mfpanel fixing box-sizing for div.'+getElemInfo(panels[p])+' (from '+bs+')'); // Ideally this is done by the developer and therefore not required
                panels[p].style.boxSizing='border-box';
            }
        }
    }
    //-----------------------------------------------------------------------------------------
    function setNextAtt(draggers) {
        // Filter the elements to include only the ones with the required classes
        var elements = Array.from(draggers).filter(function(element) {
            return element.classList.contains('paneldragger') && (element.classList.contains('dragger-v') || element.classList.contains('dragger-h'));
        });

        // Iterate through each element
        elements.forEach(function(element) {
            var rect = element.getBoundingClientRect();
            var currentPosition = element.classList.contains('dragger-h') ? rect.top : rect.left;

            var closestLeftElement = null;
            var closestRightElement = null;
            var closestAboveElement = null;
            var closestBelowElement = null;

            elements.forEach(function(el) {
                if (el === element) return;
                var elRect = el.getBoundingClientRect();
                var elPosition = element.classList.contains('dragger-h') ? elRect.top : elRect.left;

                if (elPosition === currentPosition) {
                    if (el.classList.contains('dragger-h')) {
                        if (elRect.left < rect.left && (!closestLeftElement || elRect.left > closestLeftElement.getBoundingClientRect().left)) {
                            closestLeftElement = el;
                        } else if (elRect.left > rect.left && (!closestRightElement || elRect.left < closestRightElement.getBoundingClientRect().left)) {
                            closestRightElement = el;
                        }
                    } else {
                        if (elRect.top < rect.top && (!closestAboveElement || elRect.top > closestAboveElement.getBoundingClientRect().top)) {
                            closestAboveElement = el;
                        } else if (elRect.top > rect.top && (!closestBelowElement || elRect.top < closestBelowElement.getBoundingClientRect().top)) {
                            closestBelowElement = el;
                        }
                    }
                }
            });

            if ( closestLeftElement ) element.setAttribute('data-dragger-left', closestLeftElement.id);
            if ( closestRightElement ) element.setAttribute('data-dragger-right', closestRightElement.id);
            if ( closestAboveElement ) element.setAttribute('data-dragger-above', closestAboveElement.id);
            if ( closestBelowElement ) element.setAttribute('data-dragger-below', closestBelowElement.id);
        });
    }
    //-----------------------------------------------------------------------------------------
    window.addEventListener('resize', function () {
        doRepositionDividers();
    });
    window.addEventListener('scroll', function () {
        doRepositionDividers();
    });

    return {
        init: function(restoreSizesFg) {
            let container, panel, dragger, nextp, i, d, pw0, pw1, ph0, ph1, adjuster, pl, pr, pt, pb, w, h;

            if ( restoreSizesFg==undefined ) restoreSizesFg=false;

            if ( 1 ) {
                let uniqueIds=new Set();

                // Create horizontal draggers....
                let panels = document.getElementsByClassName('resizable-e');
                adjuster=0;
                for (i = 0; i < panels.length; i++) {
                    panel = panels[i];
                    if (!hasClassName(panel, 'noselect')) {

                        container = panel.parentElement;
                        if (!container.id) container.id = getUniqueID('mfcontainer');
                        uniqueIds.add(container.id);

                        nextp = panel.nextElementSibling;
                        setBoxBorder(container);

                        let containerStyles = window.getComputedStyle(container);
                        let containerWidth = container.offsetWidth - parseFloat(containerStyles.paddingLeft) - parseFloat(containerStyles.paddingRight);

                        console.log('\n- init container '+getElemInfo(container)+ ' width = '+container.style.width+' / '+getComputedStyleX(container, 'width')+' = '+getElemInfo(container)+'.width is '+container.getBoundingClientRect().width);
                        console.log('- init panel is '+getElemInfo(panel));
                        if (!panel.id) panel.id = getUniqueID('mfleft');
                        dragger = document.createElement('div');
                        dragger.className = 'paneldragger dragger-h';

                        dragger.style.top = panel.getBoundingClientRect().top + 'px';
                        dragger.style.height = (container.getBoundingClientRect().height) + 'px';
                        dragger.setAttribute('data-elem', panel.id);
                        dragger.id = getUniqueID('mfdragger');
                        document.body.appendChild(dragger);

                        w = parseInt(dragger.getBoundingClientRect().width);
                        pw0 = panel.offsetWidth;
                        dragger.style.left = (panel.getBoundingClientRect().left + panel.getBoundingClientRect().width - w / 2) + 'px';
                        panel.setAttribute('data-dragger', dragger.id);

                        panel.style.width = ((panel.offsetWidth / containerWidth) * 100) + '%';
                        console.log('- init panel.'+getElemInfo(panel)+'.width='+panel.style.width);

                        if (nextp) {
                            if ( !nextp.id ) nextp.id=getUniqueID("mfleft");
                            pw1 = panel.getBoundingClientRect().width;
                            pw1 = panel.offsetWidth;
                            adjuster = pw1 - pw0;

                            nextp.style.width = (((nextp.offsetWidth - adjuster )/ containerWidth) * 100) + '%';
                            console.log('- init nextpanel'+getElemInfo(nextp)+'.width = '+nextp.style.width);
                        }
                    }
                }
                let uniqueIdList = Array.from(uniqueIds);

                // Now check the total width doesn't overflow 100%
                if ( 1 ) {
                    let i, container, containerWidth, containerHeight, containerStyles, totalMargin, windowWidth,
                        windowHeight, bodyStyles, totalBodyPadding, totalBodyMargin, percentage, children, cw, ch, t, w, h;

                    // widths
                    for (i = 0; i < 2; i++) {
                        console.log('\nChecking container panels...' + i);
                        for (let id of uniqueIdList) {
                            console.log('checking ' + id);
                            container = document.getElementById(id);
                            //
                            // containerWidth = container.style.width;
                            // if (!/%/.test(containerWidth)) {
                            //     containerWidth = getComputedStyleX(container, 'width');
                            //     if (!/%/.test(containerWidth)) {
                            //         containerStyles = window.getComputedStyle(container);
                            //         containerWidth = container.offsetWidth;
                            //         totalMargin = parseFloat(containerStyles.marginLeft); //  + parseFloat(containerStyles.marginRight);
                            //
                            //         windowWidth = window.innerWidth;
                            //         bodyStyles = window.getComputedStyle(document.body);
                            //         totalBodyPadding = parseFloat(bodyStyles.paddingLeft) + parseFloat(bodyStyles.paddingRight);
                            //         totalBodyMargin = parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight);
                            //
                            //         percentage = ((containerWidth - totalMargin) / (windowWidth - totalBodyMargin - totalBodyPadding)) * 100;
                            //         //container.style.width = percentage + '%';
                            //         console.log('  width for ' + getElemInfo(container) + ' + ' + totalBodyPadding + ' = ' + percentage + '%');
                            //     }
                            // }
                            children = container.children;
                            //cw = 100; // parseFloat(container.style.width);


                            t = 0;
                            for (var child of children) {
                                w = parseFloat(child.style.width);
                                t += w;
                            }
                            if (t != cw) {
                                console.log('   ... changing ' + getElemInfo(child) + ' width by ' + (100 - t) + ' ...');
                                child.style.width = (w + (100 - t)) + '%';
                                console.log('   new width:' + child.style.width);
                            }
                        }
                    }
                }


                // Now create vertical draggers
                panels = document.getElementsByClassName('resizable-s');
                adjuster=0;
                for (i = 0; i < panels.length; i++) {
                    panel = panels[i];
                    let panelStyles = window.getComputedStyle(panel);
                    if (!hasClassName(panel, 'noselect')) {
                        console.log('\n- init panel.'+getElemInfo(panel));
                        container = panel.parentElement;
                        setBoxBorder(container);
                        if (!panel.id) panel.id = getUniqueID('mftop');
                        dragger = document.createElement('div');
                        dragger.className = 'paneldragger dragger-v';

                        dragger.style.left = panel.getBoundingClientRect().left + 'px';
                        dragger.style.width = container.getBoundingClientRect().width + 'px';
                        dragger.setAttribute('data-elem', panel.id);
                        dragger.id = getUniqueID('mfdragger');
                        document.body.appendChild(dragger);

                        h = parseInt(dragger.getBoundingClientRect().height);
                        ph0 = panel.offsetHeight;
                        dragger.style.top = (panel.getBoundingClientRect().top + panel.getBoundingClientRect().height - h / 2) + 'px';
                        panel.setAttribute('data-dragger', dragger.id);

                        panel.style.height = ((panel.getBoundingClientRect().height) / container.getBoundingClientRect().height * 100) + '%';
                        console.log('- init panel.'+getElemInfo(panel)+'.height='+panel.style.height);
                        nextp = panel.nextElementSibling;

                        if (nextp) {
                            if ( !nextp.id ) nextp.id=getUniqueID("mftop");
                            ph1 = panel.getBoundingClientRect().height;
                            adjuster = ph1 - ph0;
                            nextp.style.height = ((nextp.getBoundingClientRect().height - adjuster) / container.getBoundingClientRect().height * 100) + '%';
                        }
                    }
                }


                // Now check the total heights doesn't overflow 100%
                for(i=0; i<2; i++) {
                    console.log('\nChecking container panels...' + i);
                    for (let id of uniqueIdList) {
                        console.log('checking ' + id);
                        container = document.getElementById(id);

                        // containerHeight = container.style.height;
                        // if (!/%/.test(containerHeight)) {
                        //     containerHeight = getComputedStyleX(container, 'height');
                        //     if (!/%/.test(containerHeight)) {
                        //         containerStyles = window.getComputedStyle(container);
                        //         containerHeight = container.offsetHeight;
                        //         if ( isNaN(containerHeight)) continue;
                        //         totalMargin = parseFloat(containerStyles.marginTop); //  + parseFloat(containerStyles.marginRight);
                        //
                        //         windowHeight = window.innerHeight;
                        //         bodyStyles = window.getComputedStyle(document.body);
                        //         totalBodyPadding = parseFloat(bodyStyles.paddingTop) + parseFloat(bodyStyles.paddingBottom);
                        //         totalBodyMargin = parseFloat(bodyStyles.marginTop) + parseFloat(bodyStyles.marginBottom);
                        //
                        //         percentage = ((containerHeight - totalMargin) / (windowHeight - totalBodyMargin - totalBodyPadding)) * 100;
                        //         //container.style.height = percentage + '%';
                        //         console.log('  height for ' + getElemInfo(container) + ' + ' + totalBodyPadding + ' = ' + percentage + '%');
                        //     }
                        // }
                        children = container.children;
                        //ch = 100; // parseFloat(container.style.height);


                        t = 0;
                        for (var child of children) {
                            h = parseFloat(child.style.height);
                            t += h;
                            if (isNaN(h)) break;
                        }
                        if (!isNaN(t) && t != ch) {
                            console.log('   ... changing ' + getElemInfo(child) + ' height by ' + (100 - t) + ' ...');
                            child.style.height = (h + (100 - t)) + '%';
                            console.log('   new height:' + child.style.height);
                        }
                    }
                }
            }


            let draggers = document.getElementsByClassName('paneldragger');


            // Set up attributes pointing to the neighbour draggers
            setNextAtt(draggers);


            let gap=30;
            for (d = 0; d < draggers.length; d++) {
                draggers[d].addEventListener('mousedown', function (e) {
                    let dragger = e.target;
                    if (/\bdragger-h\b/.test(dragger.classList)) {
                        _paneldragger = dragger;
                        let x = _paneldragger.getBoundingClientRect().left;
                        _paneldragger.setAttribute('data-startdrag', x);
                        _paneldragger.setAttribute('data-dragging', 1);

                        let leftElem = document.getElementById(_paneldragger.getAttribute('data-elem'));
                        let rightElem = leftElem.nextElementSibling;
                        let padding = getComputedStyleX(leftElem, 'padding-left', true, true) + getComputedStyleX(leftElem, 'padding-right', true, true);


                        let dragLeftId = _paneldragger.getAttribute('data-dragger-left');
                        if ( dragLeftId ) _paneldragMin = document.getElementById(dragLeftId).getBoundingClientRect().right + gap;
                        else _paneldragMin = leftElem.getBoundingClientRect().left + gap;

                        let dragRightId = _paneldragger.getAttribute('data-dragger-right');
                        if ( dragRightId ) _paneldragMax = document.getElementById(dragRightId).getBoundingClientRect().left - gap;
                        else _paneldragMax = rightElem.getBoundingClientRect().right - gap;

                        console.log('prev='+dragLeftId+', next='+dragRightId+', min='+_paneldragMin+', max='+_paneldragMax+', padding='+padding);
                    }
                    if (/\bdragger-v\b/.test(dragger.classList)) {
                        _paneldragger = dragger;
                        let y = _paneldragger.getBoundingClientRect().top;
                        _paneldragger.setAttribute('data-startdrag', y);
                        _paneldragger.setAttribute('data-dragging', 1);

                        let topElem = document.getElementById(_paneldragger.getAttribute('data-elem'));
                        let bottomElem = topElem.nextElementSibling;
                        let padding = getComputedStyleX(topElem, 'padding-top', true, true) + getComputedStyleX(topElem, 'padding-bottom', true, true);

                        let dragTopId = _paneldragger.getAttribute('data-dragger-above');
                        if ( dragTopId ) _paneldragMin = document.getElementById(dragTopId).getBoundingClientRect().bottom + gap;
                        else _paneldragMin = topElem.getBoundingClientRect().top + gap;

                        let dragBottomId = _paneldragger.getAttribute('data-dragger-below');
                        if ( dragBottomId ) _paneldragMax = document.getElementById(dragBottomId).getBoundingClientRect().top - gap;
                        else _paneldragMax = bottomElem.getBoundingClientRect().bottom - gap;
                    }
                });
            }

            if ( restoreSizesFg ) doRestoreDimensions();
            doRepositionDividers();

            window.addEventListener('mousemove', function (e) {
                if (_paneldragger) {
                    if (/\bdragger-h\b/.test(_paneldragger.classList)) {
                        let x = parseInt(e.clientX);
                        if (x > _paneldragMin && x < _paneldragMax) {
                            if (_paneldragger.getAttribute('data-dragging') == "1" && x > 0) {
                                let w=parseInt(_paneldragger.getBoundingClientRect().width);
                                _paneldragger.style.left = (x - w/2) + 'px';
                            }
                        }
                        let selection = window.getSelection();
                        if (selection.rangeCount > 0) selection.removeAllRanges();
                    }
                    if (/\bdragger-v\b/.test(_paneldragger.classList)) {
                        let y = parseInt(e.clientY);
                        if (y > _paneldragMin && y < _paneldragMax) {
                            if (_paneldragger.getAttribute('data-dragging') == "1" && y > 0) {
                                let h=parseInt(_paneldragger.getBoundingClientRect().height);
                                _paneldragger.style.top = (y - h/2) + 'px';
                            }
                        }
                        let selection = window.getSelection();
                        if (selection.rangeCount > 0) selection.removeAllRanges();

                    }
                }
            });

            window.addEventListener('mouseup', function (e) {
                if (_paneldragger) {
                    if (/\bdragger-h\b/.test(_paneldragger.classList)) {
                        // Horizontal moves
                        let leftElem = document.getElementById(_paneldragger.getAttribute('data-elem'));
                        let rightElem = leftElem.nextElementSibling;

                        let container=leftElem.parentElement; // getPanelsContainer(elem);
                        let containerStyles = window.getComputedStyle(container); // Get the computed styles of the container
                        let containerWidth = container.offsetWidth - parseFloat(containerStyles.paddingLeft) - parseFloat(containerStyles.paddingRight); // Calculate the container width without padding
                        _paneldragger.setAttribute('data-dragging', 0);

                        let x0 = _paneldragger.getAttribute('data-startdrag');
                        _paneldragger.removeAttribute('data-startdrag');

                        let x = _paneldragger.getBoundingClientRect().left;
                        let adjustPct = ((x - x0) * 100) / containerWidth;

                        if (/px/.test(leftElem.style.width)) console.error('PANEL ' + getElemInfo(leftElem) + ' width must be expressed in % and not px');

                        let leftwPct0 = parseFloat(leftElem.style.width.replace(/%/, ''));
                        let rightwPct0 = parseFloat(rightElem.style.width.replace(/%/, ''));

                        let leftwPct  = leftwPct0  + adjustPct;
                        let rightwPct = rightwPct0 - adjustPct;

                        leftElem.style.width = leftwPct + '%';
                        rightElem.style.width = rightwPct + '%';

                        _paneldragger = null;
                        doRepositionDividers();
                    }
                    else if (/\bdragger-v\b/.test(_paneldragger.classList)) {
                        // Vertical moves
                        let topElem = document.getElementById(_paneldragger.getAttribute('data-elem'));
                        let bottomElem = topElem.nextElementSibling;

                        let container=topElem.parentElement; // getPanelsContainer(topElem);
                        let containerStyles = window.getComputedStyle(container); // Get the computed styles of the container
                        let containerHeight = container.offsetHeight - parseFloat(containerStyles.paddingTop) - parseFloat(containerStyles.paddingBottom); // Calculate the container height without padding
                        _paneldragger.setAttribute('data-dragging', 0);

                        let y0 = _paneldragger.getAttribute('data-startdrag');
                        _paneldragger.removeAttribute('data-startdrag');

                        let y = _paneldragger.getBoundingClientRect().top;
                        let adjustPct = ((y - y0) * 100) / containerHeight;

                        if (/px/.test(topElem.style.height)) console.error('PANEL ' + getElemInfo(topElem) + ' height must be expressed in % and not px');

                        let tophPct0 = parseFloat(topElem.style.height.replace(/%/, ''));
                        let bottomhPct0 = parseFloat(bottomElem.style.height.replace(/%/, ''));

                        let tophPct  = tophPct0  + adjustPct;
                        let bottomhPct = bottomhPct0 - adjustPct;

                        topElem.style.height = tophPct + '%';
                        bottomElem.style.height = bottomhPct + '%';

                        _paneldragger = null;
                        doRepositionDividers();
                    }
                }
                doSaveDimensions();

            });
        },
        reset: function() {
            doResetPanels()
        }
    };
};


window.addEventListener('load', function () {
    let useCookies=false;

    // Preset _MFPanelsUseCookies to true to have storage use cookies that can be
    // read by server side processing if desired.
    // e.g. let _MFPanelsUseCookies = true;
    if ( typeof _MFPanelsUseCookies !== 'undefined' ) useCookies = _MFPanelsUseCookies;
    new MFPanels(useCookies).init(true);

    // Preset _MFPanelsInitCallback to a function to be called once init is complete,
    // e.g. let _MFPanelsInitCallback=doAlert;
    if ( typeof _MFPanelsInitCallback !== 'undefined' ) _MFPanelsInitCallback();

});