"use strict";
class Category {
    constructor(raw) {
        this.name = raw['name'];
        this.thumbnail_b64 = raw['thumbnail'];
    }
    title_link() {
        let container = document.createElement('h2');
        let link = document.createElement('a');
        link.href = `/collection?c=${this.name}`;
        link.text = this.name;
        container.appendChild(link);
        return container;
    }
    thumbnail_div() {
        let nail = document.createElement('img');
        nail.className = 'pure-img';
        if (!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
            nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`);
        }
        else {
            nail.setAttribute('src', '/cantfindshit.gif');
        }
        return nail;
    }
    as_div() {
        let container = document.createElement('div');
        container.className = 'video-block';
        let title = this.title_link();
        let thumbnail = this.thumbnail_div();
        container.appendChild(title);
        container.appendChild(thumbnail);
        // Dump gallery onto the main page
        document.getElementById('main-container').appendChild(container);
        return container;
    }
}
function ready_handler(e) {
    // Only let this make a get request once we're ready on the page
    if (document.readyState != 'complete') {
        return e;
    }
    // All we do here is basically make a get request to /api/categories
    const endpoint = 'http://localhost/api/categories';
    let xml = new XMLHttpRequest();
    xml.open('GET', endpoint, false); // sync request
    xml.send(null); // nothing required for stuff
    if (xml.getResponseHeader('Content-Type') == 'application/json') {
        let raw = JSON.parse(xml.responseText);
        for (const cat_raw of raw['categories']) {
            let cat = new Category(cat_raw);
            cat.as_div();
        }
    }
    return e;
}
document.addEventListener('readystatechange', ready_handler);