let shaderHandler, gl, c, actx, analyser, peak, isInit = false;

function createAudioContextStream(audio) {
    let AudioContext = window.AudioContext || window.webkitAudioContext;
    if (actx) {
        actx.close();
    }
    actx = new AudioContext();
    analyser = actx.createAnalyser();
    let MEDIA_ELEMENT_NODES = new WeakMap();
    let Source;

    analyser.fftSize = 4096;
    analyser.maxDecibels = 0;
    analyser.smoothingTimeConstant = .4;
    if (audio) {
        if (MEDIA_ELEMENT_NODES.has(audio)) {
            Source = MEDIA_ELEMENT_NODES.get(audio);
        } else {
            Source = actx.createMediaElementSource(audio);
            MEDIA_ELEMENT_NODES.set(audio, Source);
        }

        Source.connect(analyser);
        analyser.connect(actx.destination);
        audio.oncanplay = () => {
            actx.resume();
        };
        audio.onended = function () {
            actx.pause();
        };
    }
    return null;
}

async function init() {
    c = document.body.querySelector('#c');
    gl = c.getContext("webgl2");
    if (!gl) {
        console.error("GL not found");
        return false;
    }
    shaderHandler = new Shaders(gl);
    await shaderHandler.loadShader("wave", "shaders/");

    //sphere shader
    await shaderHandler.loadShader("sphere", "shaders/", gl.VERTEX_SHADER);
    return shaderHandler.createProgramForEach(["wave", "sphere"]);
}

function createView() {
    if (!isInit) {
        createAudioContextStream(audioFile);
        init().then(b => {
            if (b) {
                loadConfig();
                draw();
            }
        })
        isInit = true;
    }
}

function initGUI() {
    generateRotationSliders();
    generateColorSliders();
    generateWorldSliders();
    generateDrawSliders();
    generateTranslateSliders();
}

(function () {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        initGUI()
    } else {
        document.addEventListener('DOMContentLoaded', initGUI);
    }
})()