var slides = [],
    slideData = [],
    current = 0,
    timeout;


init()

function init() {
    document.querySelectorAll('.slide').forEach(function(slide) {
        slides.push(slide)
        var data = slideData[slides.length - 1] = load_slide(slide)
        if (data.video && data.video.length) {
            data.embed = init_embed(data)
        }
    })
    go(0)
}

function go(idx) {
    var old = current
    slides[current].style.zIndex = 0
    slides[idx].style.zIndex = 10
    current = idx
    if (timeout) {
        clearTimeout(timeout)
        timeout = null
    }
    timeout = setTimeout(next, Math.round(slides[current].dataset.duration) * 1000)

    stop(old)
    start(current)
}

function next() {
    var idx = (current + 1) % slides.length
    console.log(current, idx)
    go(idx)
}

function previous() {
    var idx = (current - 1) % slides.length
    if (idx < 0) {
        idx += slides.length
    }
    go(idx)
}

function start(idx) {
    var data = slideData[idx]
    console.log(current, data)
    if (data.zoom_to) {
        start_zoom(data)
    } else if (data.video && data.video.length) {
        start_video(data)
    }
}

function stop(idx) {
    var data = slideData[idx]
    console.log(current, data)
    if (data.zoom_to) {
        reset_zoom(data)
    } else if (data.video && data.video.length) {
        pause_video(data)
    }
}

function load_urls(dataset) {
    var urls = [], idx = 0
    while (dataset['url_' + idx]) {
        urls.push(dataset['url_' + idx])
        idx += 1
    }
    return urls
}

function load_slide(slide) {
    var data = {}
    data.duration = slide.dataset.duration
    var video = slide.querySelector('.video')
    if (video) {
        data.video = load_urls(video.dataset)
        data.container = video
        // fixme only doucments
        if (data.video.length == 2) {
            data.zoom_from = data.video[0].split('/').pop().split('#')[0].split(',').map(a => Math.round(a))
            data.zoom_to = data.video[1].split('/').pop().split('#')[0].split(',').map(a => Math.round(a))
        }
    }
    return data
}

function init_embed(data) {
    var embed = window.currentEmbed = new PandoraEmbed({
        id: 'fixme',
        url: data.video[0],
        container: data.container
    });
    embed.on('init', function(data) {
    });
    return embed;
}

window.addEventListener('blur', function(){
    setTimeout(function(){
        // using the 'setTimout' to let the event pass the run loop
        if (document.activeElement instanceof HTMLIFrameElement) {
            window.focus();
        }
    },0);
}, false);


function reset_zoom(data) {
    data.embed.postMessage('options', {
        'area': data.zoom_from
    })
}

function start_zoom(data) {
    console.log('start zoon', Math.round(1000 * data.duration / 2))
    setTimeout(function() {
        console.log('now zoom')
        data.embed.postMessage('options', {
            'area': data.zoom_to
        })
    }, Math.round(1000 * data.duration / 2))
}


function start_video(data) {
    data.embed.postMessage('options', {
        'paused': false
    })
}

function pause_video(data) {
    data.embed.postMessage('options', {
        'paused': true
    })
}

document.addEventListener('keydown', function(event) {
    if (event.key == 'ArrowRight') {
        next()
        event.preventDefault()
    } else if (event.key == 'ArrowLeft') {
        previous()
        event.preventDefault()
    }
}, false)