// ==UserScript==
// @name         Image Album Viewer
// @namespace    http://tampermonkey.net/
// @version      2024-07-07
// @description  Activate and place the mouse over the target image.
// @author       t.me/CockSource
// @match        https://arca.live/*
// @icon         https://secure.gravatar.com/avatar/d60d18ef7e5b46d1e5e0d4bc56d3282a?d=retro&f=y
// @grant        none
// @require  https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @downloadURL none
// ==/UserScript==
/* globals $ */
(function() {
    'use strict';
    // Your code here...
    console.log('Image Album Viewer init...')
    let lockOn = [];
    let fitToHeight = true
    function startCountdown(element) {
        lockOn.push(setTimeout(() => {
            startAlbumView(element)
        }, 2000))
        // console.log('lock on', lockOn)
    }
    function endCountdown() {
        // $('img').unbind('mouseout mouseover');
        lockOn.forEach(l => {
            clearTimeout(l)
            // console.log(l, 'cleared')
        })
        lockOn = []
    }
    $('img').mouseover(function(e){
        startCountdown($(e.target)[0])
    });
    $('img').mouseout(function(e){
        lockOn.forEach(l => {
            clearTimeout(l)
            // console.log(l, 'cleared')
        })
        lockOn = []
    });



    function startAlbumView (element) {
        console.log('fire!', element)
        endCountdown()

        // find image position
        var imagePos = 0
        for (let i = 0; i < $('img').length; i++) {
            if ($('img')[i].isEqualNode(element)) {
                imagePos = i
                break
            }
        }

        // Create Background Element on the web
        let background = document.createElement('div')
        background.style.position = 'fixed'
        background.style.top = '0'
        background.style.left = '0'
        background.style.width = '100%'
        background.style.height = '100%'
        background.style.zIndex = '99999'
        background.style.backgroundColor = 'rgba(0,0,0,0.5)'
        document.body.appendChild(background)

        // Create Image Container
        let imageContainer = document.createElement('div')
        imageContainer.style.position = 'absolute'
        imageContainer.style.top = '50%'
        imageContainer.style.left = '50%'
        imageContainer.style.transform = 'translate(-50%, -50%)'
        background.appendChild(imageContainer)

        // Add image Element into Image Container with fitting image height and keep aspect ratio
        let image = new Image()
        image.src = $('img')[imagePos].src
        image.addEventListener('click', function() {
            background.remove()
        })
        imageContainer.appendChild(image)

        // Add text to background
        function setCurrentPosition() {
            text.textContent = 'Press ESCAPE to close.\r\n'
            text.textContent += `${imagePos + 1}/ ${$('img').length}`
        }
        let text = document.createElement('p')
        text.style.position = 'absolute'
        text.style.bottom = '10px'
        text.style.top = '10px'
        background.appendChild(text)

        // Set image size to fit to window dimensions
        function maximizeImageSize(image) {
            let windowHeight = window.innerHeight
            let windowWidth = window.innerWidth
            let aspectRatio = image.naturalHeight / image.naturalWidth
            let containerHeight = windowWidth * aspectRatio
            if (fitToHeight) {
                containerHeight = windowHeight
                image.style.width = 'auto'
                image.style.height = containerHeight + 'px'
            } else {
                image.style.width = windowWidth + 'px'
                image.style.height = 'auto'
            }
        }

        maximizeImageSize(image)
        setCurrentPosition()

        // Change Image src when type left or right is pressed
        // Delete image Container when type ESCAPE is pressed
        const keyControl = function(e) {
            // console.log('keyboard function', e.key)
            if (e.keyCode === 27) {
                background.remove()
                document.removeEventListener('keydown', this)
                document.removeEventListener('keyup', adjustSize)
                document.removeEventListener('wheel', wheelControl)
                document.removeEventListener('mousewheel', wheelControl)
                document.removeEventListener('DOMMouseScroll', wheelControl)
                window.onresize = null

            } else if (e.keyCode === 37 || e.keyCode === 38) {
                e.preventDefault()
                imagePos = Math.max(0, imagePos - 1)
                image.src = $('img')[imagePos].src
            } else if (e.keyCode === 39 || e.keyCode === 40) {
                e.preventDefault()
                imagePos = Math.min($('img').length - 1, imagePos + 1)
                image.src = $('img')[imagePos].src
            } else if (e.keyCode === 32) { // spacebar
                e.preventDefault()
                fitToHeight = !fitToHeight
                maximizeImageSize(image)
            }
            setCurrentPosition()
        }
        let adjustSize = function(e) {
            e.preventDefault()
            maximizeImageSize(image)
        }
        let wheelControl = function(e) {
            e.preventDefault()
            e.stopPropagation()


            /* Check whether the wheel event is supported. */
            // let supportsWheel = true
            // if (e.type == "wheel") supportsWheel = true;
            // else if (supportsWheel) return;

            /* Determine the direction of the scroll (< 0 → up, > 0 → down). */
            var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;

            /* ... */
            if (delta > 0) {
                // scroll up
                imagePos = Math.min($('img').length - 1, imagePos + 1)
                image.src = $('img')[imagePos].src
                maximizeImageSize(image)
                setCurrentPosition()
            } else if (delta) {
                // scroll down
                imagePos = Math.max(0, imagePos - 1)
                image.src = $('img')[imagePos].src
                maximizeImageSize(image)
                setCurrentPosition()
            }
            return false
        }

        document.addEventListener('keydown', keyControl)
        document.addEventListener('keyup', adjustSize)
        document.addEventListener('wheel', wheelControl, {passive: false})
        document.addEventListener('mousewheel', wheelControl, {passive: false})
        document.addEventListener('DOMMouseScroll', wheelControl, {passive: false})

        window.onresize = maximizeImageSize(image)
    }
})();