const banner_show_time = 600 * 1000.0
const banner_animated_style = "opacity 0.8s linear, transform 0.1s linear"

var banner_current_src = localStorage.getItem('main_banner_img')

function getBannerTime() {
    return (new Date()).getTime() / banner_show_time
}
function getBannerSrc() {
    return "/static/banner/" + Math.floor(getBannerTime() + 1000/banner_show_time) % 2 + ".png"
}
function update_banner_top(banner, banner_container) {
    const banner_top_max = 0
    const banner_top_min = -banner.clientHeight + banner_container.clientHeight

    const banner_top = (1-(getBannerTime()%1)) * banner_top_min
    banner.style.transform = "translateY(" + banner_top + 'px' + ")"
}

let banner_update_src = banner_current_src
function update_banner(banner, banner_container) {

    image_select = getBannerSrc()

    update_banner_top(banner, banner_container)

    if(image_select != banner_update_src) {
        banner.style.opacity = 0

        setTimeout(() => {
            banner.src = image_select
        }, 1000)

        banner_update_src = image_select
        localStorage.setItem('main_banner_img', image_select)

        document.getElementById("main_banner_img_link").href = "/gallery/test"
    }
}

const banner_container = document.getElementById("main_header")
const banner = document.getElementById("main_banner_img")
    
    
banner.addEventListener('load', () => {
    update_banner_top(banner, banner_container)
    
    const next_banner_src = getBannerSrc()
    
    if(banner_current_src != next_banner_src) {
        banner.style.transition = banner_animated_style
        setTimeout(() => banner.style.opacity = 0.3, 1000)
    }
    else {
        banner.style.opacity = 0.3
        setTimeout(() => banner.style.transition = banner_animated_style, 0)
    }
    
    banner_current_src = next_banner_src
})

document.addEventListener("DOMContentLoaded", function () {
    banner.src = getBannerSrc()
    document.getElementById("main_banner_img_link").href = "/gallery/test"
})

setInterval(() => update_banner(banner, banner_container), 100)
addEventListener("resize", () => update_banner(banner, banner_container));