const fetch = (url) => new Promise((resolve, reject) => {
    const listener = ({ srcElement: req }) => {
        req.status === 200 ? resolve(req.responseText) : reject("busted");
    };

    const req = new XMLHttpRequest();
    req.addEventListener('load', listener);
    req.open('GET', url);
    req.send();
});

const main = {
    generateDiagram: (eventKey) => {
        const metaMatrix = Matrices.buildMetaMatrix(main.json, eventKey);
        const chordMatrix = Matrices.buildChordMatrix(main.json, eventKey);
        Diagram.clear();
        Diagram.build(main.json, eventKey, metaMatrix, chordMatrix);
    },

    generateUI: () => {
        UI.buildEventsPane();
    },

    initJSON: (strData) => {
        main.json = JSON.parse(strData);
    },
}

fetch('worldcup.json')
    .then(main.initJSON)
    .then(main.generateUI)
    .then(main.generateDiagram.bind(null, 1930));