let hashes = slice(document.querySelectorAll('#menu > a')).map(function(element) {
    return element.getAttribute('href').substr(1)
})

let movies = [
    {id: 'GJT', title: 'Aan (Mehboob, 1952)', frames: 241117},
    {id: 'IKP', title: 'Mother India (Mehboob, 1957)', frames: 250936}
]
let movie = movies[Math.floor(new Date() / 86400000) % 2]

let timelineLink = document.getElementById('link')
timelineLink.href = 'https://indiancine.ma/' + movie.id
timelineLink.innerHTML = movie.title
let timelineLinkEntered = false

let timelineElement = document.getElementById('timeline')
let timelineElements = []
let timelineWidth = 1500
let timelineResize = 1
let timelineTiles = Math.ceil(movie.frames / timelineWidth)
let timelinesLeft

let paused = true
let speed = 0
let acceleration = 0
let maxSpeed = 2
let maxAcceleration = maxSpeed / 100

function getTimelineElement(index, left) {
    let element = document.createElement('img')
    element.data = {index: index}
    element.src = 'https://media.indiancine.ma/' + movie.id
        + '/timelinekeyframes64p' + (index + 1) + '.jpg'
    element.style.left = left + 'px'
    element.style.width = timelineWidth * timelineResize + 'px'
    timelineElement.appendChild(element)
    return element
}

function hashchange() {
    let hash = document.location.hash.substr(1)
    if (!hashes.includes(hash)) {
        document.location.hash = hashes[0]
        return
    }
    slice(document.querySelectorAll('#menu > a')).forEach(function(element) {
        element.classList[
            element.getAttribute('href') == '#' + hash ? 'add' : 'remove'
        ]('selected')
    })
    slice(document.querySelectorAll('.section')).forEach(function(element) {
        element.classList[
            element.getAttribute('id') == hash ? 'add' : 'remove'
        ]('selected')
    })
    console.log(hash)
}

function init() {
    let frame = Math.floor(Math.random() * movie.frames)
    let timelines = [{
        index: Math.floor(frame / timelineWidth),
        left: -(frame / timelineWidth) * timelineResize
    }]
    let windowWidth = window.innerWidth
    while (last(timelines).left < windowWidth + timelineWidth / 2) {
        timelines.push({
            index: (last(timelines).index + 1) % timelineTiles,
            left: last(timelines).left + timelineWidth * timelineResize
        })
    }
    timelineElements = timelines.map(function(timeline, i) {
        element = getTimelineElement(timeline.index, timeline.left)
        return element
    })
}

function last(array) {
    return array[array.length - 1]
}

function play() {
    if (speed <= 0 && acceleration < 0) {
        paused = true
        if (!timelineLinkEntered) {
            timelineLink.style.display = 'none'
        }
        return
    }
    //console.log('play', speed, acceleration)
    images = slice(document.querySelectorAll('#timeline > img'))
    timelineElements.forEach(function(element) {
        element.style.left = (parseFloat(element.style.left) - speed) + 'px'
    })
    if (parseFloat(timelineElements[0].style.left) <= -timelineWidth * timelineResize) {
        timelineElement.removeChild(timelineElements.shift())
        let lastElement = last(timelineElements)
        timelineElements.push(getTimelineElement(
            (lastElement.data.index + 1) % timelineTiles,
            parseFloat(lastElement.style.left) + timelineWidth * timelineResize
        ))
        timelineElement.appendChild(last(timelineElements))
    }
    if (speed < maxSpeed || acceleration <= 0) {
        speed += acceleration
    }
    setTimeout(play, 25)
}

function resize() {
    timelinesLeft = (window.innerWidth - 4096) * timelineResize
}

function slice(nodelist) {
    return Array.prototype.slice.call(nodelist)
}

function start() {
    acceleration = maxAcceleration
    if (paused) {
        paused = false
        timelineLink.style.display = 'block'
        play()
    }
}

function stop() {
    acceleration = -maxAcceleration
}

hashchange()
resize()
init()
window.addEventListener('hashchange', hashchange)
window.addEventListener('resize', resize)
timeline.addEventListener('mouseenter', start)
timeline.addEventListener('mouseleave', stop)
timelineLink.addEventListener('mouseenter', function() {
    timelineLinkEntered = true
})
timelineLink.addEventListener('mouseleave', function() {
    if (paused) {
        setTimeout(function() {
            if (paused) {
                timelineLink.style.display = 'none'
            }
        }, 1000)
    }
    timelineLinkEntered = false
})