function progress(position, duration, pause, $element) {
    console.log('position ' + position)
    console.log('duration ' + duration)
    var progressBarWidth = position * $element.width() / duration;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(position/60) + ":"+ position%60);
    if(position < duration && !pause) {
        setTimeout(function() {
            progress(position + 1, duration, pause, $element);
        }, 1000);
    }
};

function progress(position, duration, pause, $element) {
    console.log('position ' + position)
    console.log('duration ' + duration)
    var progressBarWidth = position * $element.width() / duration;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(Math.floor(position/60) + ":"+ position%60);
    if(position < duration && !pause) {
        setTimeout(function() {
            progress(position + 1, duration, pause, $element);
        }, 1000);
    }
};

window.onSpotifyWebPlaybackSDKReady = () => {
    const token = '{{access_token}}';

    var percentage = 0;

    const player = new Spotify.Player({
        name: '{{party_name}}',
        getOAuthToken: cb => { cb(token); }
    });

    // Error handling
    player.addListener('initialization_error', ({ message }) => { alert(message); });
    player.addListener('authentication_error', ({ message }) => { alert(message); });
    player.addListener('account_error', ({ message }) => { alert(message); });
    player.addListener('playback_error', ({ message }) => { alert(message); });

    // Playback status updates
    player.addListener('player_state_changed', state => {
        document.getElementById("album_cover").src = state['track_window']['current_track']['album']['images'][0]['url'];
        var position = 0;
        var duration = 0;
        if (state['position'] != 0) {
            position = Math.floor(state['position'] / 1000);
        }
        if (state['duration'] != 0) {
            duration = Math.floor(state['duration'] / 1000);
        }
        progress(position, duration, state['paused'], $('#myProgress'));
        console.log(state);
    });

    // Ready
    player.addListener('ready', ({ device_id }) => {
        postAjax('{{callback}}', { 'player_id' : device_id }, function(data){
            console.log(data);
        });
        console.log('Ready with Device ID', device_id);
    });

    // Not Ready
    player.addListener('not_ready', ({ device_id }) => {
        console.log('Device ID has gone offline', device_id);
    });

    // Connect to the player!
    player.connect();

};