"use strict";

class Media {
    constructor(type, src, width, height, location, date) {
        this.type = type;
        this.src = src;
        this.width = width;
        this.height = height;
        this.location = location;
        this.date = date;
    }
}

class Image extends Media {
    constructor(src, width, height, location, date, transform) {
        super('image', src, width, height, location, date);
        this.transform = transform;
    }
}

class Video extends Media {
    constructor(src, width, height, location, date, length) {
        super('video', src, width, height, location, date);
        this.length = length;
    }
}

var media = [];

function show_location(lat, lng) {
    window.open("https://google.com/maps?q=" + lat + "," + lng);

    // Avoid default action
    return false;
}

function show_media(index, push_state) {
    let m = media[index];

    if (push_state) {
        window.history.pushState(
            {'index': index}, document.title, '?media=' + index);
    }

    let previous = index > 0 ? index - 1 : media.length - 1;
    let next = index + 1;
    if (next == media.length)
        next = 0;

    document.getElementById('number').innerText =
        (1 + index) + '/' + (1 + media.length);
    let img = document.querySelector('img.content');
    let video = document.querySelector('video.content');
    if (m.type == 'image') {
        video.style.display = 'none';
        img.onload = function() { img.style.transform = m.transform; };
        img.src = m.src;
        img.style.display = 'inline';
    } else {
        img.style.display = 'none';
        video.src = m.src;
        video.style.display = 'inline';
    }

    let location = document.getElementById('location');
    if (m.location.length == 0) {
        location.style.display = 'none';
    } else {
        location.style.display = 'inline';
        location.onclick = function(event) {
            return show_location(m.location[0], m.location[1]);
        };
    }

    document.getElementById('previous').onclick =
        function(event) { return show_media(previous, true); };
    document.getElementById('next').onclick =
        function(event) { return show_media(next, true); };
    document.getElementById('download').href = m.src;

    // Avoid default action
    return false;
}

function show_from_query_string() {
    let params = new URLSearchParams(window.location.search);
    let index = parseInt(params.get("media"), 10);
    if (isNaN(index))
        index = 0;
    show_media(index, false);
}

window.onpopstate = function(event) {
    if (event.state) {
        show_media(event.state.index, false);
    } else {
        show_from_query_string();
    }
};

document.addEventListener('DOMContentLoaded', (event) => {
    show_from_query_string();

    document.getElementById('close').onclick =
        function(event) {
            let slash = window.location.pathname.lastIndexOf('/')
            let new_path = window.location.pathname.substring(0, slash);
            window.location.assign(window.location.protocol + "//" +
                                  window.location.host + new_path);
            return false;
        };
});

document.addEventListener('keydown', (event) => {
    if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey ||
        event.isComposing) {
        return;
    }
    if (event.key == 'ArrowLeft') {
        document.getElementById('previous').onclick();
    } else if (event.key == 'ArrowRight') {
        document.getElementById('next').onclick();
    } else if (event.key == 'Escape') {
        document.getElementById('close').onclick();
    } else if (event.key == 'D') {
        document.getElementById('download').onclick();
    }
});