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

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

let timelineElement = document.getElementById('timeline')
let timelineElements = []
let timelineWidth = 1500
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 / 2 + '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) / 2
    }]
    let windowWidth = window.innerWidth
    while (last(timelines).left < windowWidth + timelineWidth / 2) {
        timelines.push({
            index: (last(timelines).index + 1) % timelineTiles,
            left: last(timelines).left + timelineWidth / 2
        })
    }
    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
        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 / 2) {
        timelineElement.removeChild(timelineElements.shift())
        let lastElement = last(timelineElements)
        timelineElements.push(getTimelineElement(
            (lastElement.data.index + 1) % timelineTiles,
            parseFloat(lastElement.style.left) + timelineWidth / 2
        ))
        timelineElement.appendChild(last(timelineElements))
    }
    if (speed < maxSpeed || acceleration <= 0) {
        speed += acceleration
    }
    setTimeout(play, 25)
}

function resize() {
    timelinesLeft = (window.innerWidth - 4096) / 2
}

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

function start() {
    acceleration = maxAcceleration
    if (paused) {
        paused = false
        play()
    }
}

function stop() {
    acceleration = -maxAcceleration
}

hashchange()
resize()
init()
window.addEventListener('hashchange', hashchange)
window.addEventListener('resize', resize)
timeline.addEventListener('mouseenter', start)
timeline.addEventListener('mouseleave', stop)