(() => {
    const defaultFormat = 'feed';
    const sizeDefaults = {
        'med-rect': {'w': 300, 'h': 250},
        'wide-sky': {'w': 320, 'h': 600},
        'billboard': {'w': 970, 'h': 250},
        'widget': {'w': 1000, 'h': 600},
        'responsive': {'w': 390, 'h': 844},
        'feed': {'w': 1100, 'h': 980},
        'fallback': {'w': 780, 'h': 980}
    }

    const widgets = document.getElementsByClassName('js-ology-widget');

    for (let i = 0; i < widgets.length; i++) {
        const widget = widgets[i];
        const origSrc = widget.href;
        const widgetConfig = {
            el: widget,
            src: origSrc,
            format: defaultFormat,
            width: false,
            height: false
        };

        // parse breakpoints and src url params
        let params;
        let breakpoints;
        try {
            breakpoints = JSON.parse(widget.dataset.breakpoints);

            // get params
            const origUrl = new URL(origSrc);
            const urlSearchParams = new URLSearchParams(origUrl.search);
            params = Object.fromEntries(urlSearchParams.entries());
        } catch (error) {
            widget.style.display = 'none';
            console.error(error);
            continue;
        }

        // ensure there is a valid list url
        if (typeof params.url == 'undefined' || params.url == '') {
            console.error('Invalid list url');
            widget.style.display = 'none';
            continue;
        }

        // populate config with params
        widgetConfig.format = params.format || defaultFormat;

        // determine which breakpoint to use
        let currentPt = 0;
        const iw = window.innerWidth;
        for (const pt in breakpoints) {
            if (Object.hasOwnProperty.call(breakpoints, pt)) {
                const ptConfig = breakpoints[pt];
                const ptInt = parseInt(pt);

                // skip if already at higher pt or in-applicable
                if (ptInt < currentPt) continue;
                if (iw < ptInt) continue;

                // assign values if applicable
                widgetConfig.src = ptConfig.src || origSrc;
                widgetConfig.format = ptConfig.format || '';
                widgetConfig.width = ptConfig.width || false;
                widgetConfig.height = ptConfig.height || false;
            }
        }

        createWidget(widgetConfig.el, widgetConfig.src, widgetConfig.format, widgetConfig.width, widgetConfig.height);
    }

    function createWidget(el, src, format = '', width = false, height = false) {
        // get params
        let origUrl
        let params;
        try {
            origUrl = new URL(src);
            const urlSearchParams = new URLSearchParams(origUrl.search);
            params = Object.fromEntries(urlSearchParams.entries());
        } catch (error) {
            el.style.display = 'none';
            console.error(error);
            return false;
        }

        // get styling from element
        const styles = el.style;

        // override format in src if specified elsewhere
        if (format === '') {
            format = params.format || defaultFormat;
        } else {
            params.format = format;
        }

        // add css param and assemble modified src
        params.style = encodeURIComponent(styles.cssText);
        const paramString = new URLSearchParams(params).toString();
        origUrl.search = paramString;
        src = origUrl.toString();

        // determine sizes
        const w = width || sizeDefaults[format].w || sizeDefaults['fallback'].w;
        const h = height || sizeDefaults[format].h || sizeDefaults['fallback'].h;

        // create iframe element
        const iframe = document.createElement('iframe');
        iframe.src = src;
        iframe.classList.add('ology-widget');
        iframe.style.width = w + 'px';
        iframe.style.height = h + 'px';

        // place iframe next to element and then remove original element
        el.after(iframe);
        el.remove();
    }
})()