'use strict';
let audio = document.getElementById('audio');
let file_path = audio.src;

var wavesurfer;

// Init & load
document.addEventListener('DOMContentLoaded', function() {
    // Create an instance
    var options = {
        container: '#waveform',
        waveColor: 'white',
        progressColor: 'purple',
        loaderColor: 'purple',
        cursorColor: 'navy',
        plugins: [
            WaveSurfer.spectrogram.create({
                wavesurfer: wavesurfer,
                container: "#wave-spectrogram",
                labels: true
            })
        ]
    };

    wavesurfer = WaveSurfer.create(options);
    wavesurfer.load(file_path);
});

let play = document.getElementById('play').addEventListener('click', function() {
    wavesurfer.play();
});
let pause = document.getElementById('pause').addEventListener('click', function() {
    wavesurfer.pause();
});
let restart = document.getElementById('restart').addEventListener('click', function() {
    wavesurfer.play(0);
});

function getCursorXY(e) {
    return [e.pageX, e.pageY];
}

function measure(x, y) {
    let spectro = document.getElementById('wave-spectrogram');
    let spectro_x = spectro.offsetLeft;
    let spectro_y = spectro.offsetTop;
    let spectro_height = spectro.clientHeight;
    let spectro_width = spectro.clientWidth;
    x = (x - spectro_x);
    y = -(-(-y + spectro_y) - spectro_height);
    let t = (x / spectro_width) * audio.duration;
    let f = (y / spectro_height) * 24;
    document.getElementById('cursor-time').innerHTML = Math.round(t);
    document.getElementById('cursor-frequency').innerHTML = Math.round(f);
}

let spectro = document.getElementById("wave-spectrogram");
console.log(spectro);
spectro.addEventListener('mousemove', function() {
    let coords = getCursorXY(window.event);
    measure(coords[0], coords[1]);
    // console.log(getCursorXY(window.event));
});