const audioPlayer =  document.getElementById('player');
const playerPlayPauseButton = document.getElementById('playerPlayPauseButton');
const nowPlayingPlayingTime = document.getElementById('nowPlayingPlayingTime');
const clipProgressBarCanvas = document.getElementById('clipProgressBarCanvas');
const nowPlayingSeconds = document.getElementById('nowPlayingSeconds');
const nowPlayingDuration = document.getElementById('nowPlayingDuration');
const lastUpdateTimeSpan = document.getElementById('lastUpdateTimeSpan');
const lastUpdateSizeSpan = document.getElementById('lastUpdateSizeSpan');
const lastUpdateCountSpan = document.getElementById('lastUpdateCountSpan');
const lastUpdatedTimeSpan = document.getElementById('lastUpdatedTimeSpan');
const currentTimeSpan = document.getElementById('currentTimeSpan');

function syncPlayerPlayPauseButton() {
    if (audioPlayer.paused) {
        playerPlayPauseButton.innerHTML= '  ▶  ';
    } else {
        playerPlayPauseButton.innerHTML = '  ■  ';
    }
}

function updateRealtimePlaybackInfo () {
    nowPlayingPlayingTime.innerText = ptime(lastPlayedCall['start_time'] + audioPlayer.currentTime);
    horizBarChart(clipProgressBarCanvas, [audioPlayer.currentTime], audioPlayer.duration);
    nowPlayingSeconds.innerText = audioPlayer.currentTime.toFixed(1);
    nowPlayingDuration.innerText = audioPlayer.duration.toFixed(1);
}

function drawLatencyGraph () {
    pixelgraph_multiseries('latencyHistoryCanvas', [playbackLatencyHistory], '#010101', '#010101');
}

function drawUpdateStatsGraph () {
    pixelgraph_multiseries('updateStatsCanvas', [updateSizeHistory, updateTimeHistory, updateCountHistory], '#010101', '#010101', ['#6666dd', '#33FF33', '#FF33FF'], 1, false);
}

function drawLastUpdateSpanText (luTime, luSize, luCount) {
    // time in ms, size in kB
    lastUpdateTimeSpan.innerText = luTime.toFixed(0);
    lastUpdateSizeSpan.innerText = luSize.toFixed(1);
    lastUpdateCountSpan.innerText = luCount;
    lastUpdatedTimeSpan.innerText = ptime(lastUpdateTime);
}

function updateCurrentTime () {
    currentTimeSpan.innerText = ptime(Date.now());
}