source: gs3-installations/mars/trunk/sites/mars/collect/amc-essentia/js/av_document.js@ 37256

var AMC_SONG_DURATION = 30;

var currentPosIsZero = true;
var currentPosRunup  = 0;


function AVEnsurePaused()
{
    if (!wavesurfer.backend.isPaused()) {   
    $('#ws-pause-icon').hide();
    $('#ws-play-icon' ).show();
    $('#ws-playpause-label').html("Play");
    }
    
    wavesurfer.pause();
}

function AVPlay()
{
    // Restore play/pause toggle button back to 'ready to play' i.e., showing pause button
    $('#ws-play-icon' ).hide();
    $('#ws-pause-icon').show();
    $('#ws-playpause-label').html("Pause");

    if (currentPosRunup>0) {
    var skip_amount = -1 * currentPosRunup;
    wavesurfer.skip(skip_amount);
    currentPosRunup = 0;    
    }
    
    wavesurfer.play();
    
}

function AVPlayPause()
{
    if (wavesurfer.backend.isPaused()) {
    AVPlay();
    }
    else {
    AVEnsurePaused();
    }
    
    //return wavesurfer.backend.isPaused() ? wavesurfer.play() : wavesurfer.pause();
}

function AVSeekTo(progressPos)
{
    wavesurfer.seekTo(progressPos);

    if (progressPos == 0) {
    recommendFromStart();
    }
}



/*                
    function playFromOffset(id,frameOffset) 
    {
      var msecOffset = 250 * frameOffset; 
      idElem = document.getElementById(id);
      pagePlayer.handleClick({target:idElem}); // fake a click 
      soundManager.stopAll();
      // soundManager.setPosition(id,5000); 
      soundManager.play(id,{position: msecOffset});
    }
    */
    

function displayClampedCurrentTimeAndAV()
{
    // Note, the Arousal and Valence feature window values used is:
    //   6 secs + 50% overlap
    // So the Weka computed AV values are spaced out:
    //   6s, 9s, 12s, ...
    
    // clamp to ensure >= 6.0 secs 

    var current_time = Math.max(6.0,wavesurfer.getCurrentTime());
    var current_time_1dp = current_time.toFixed(1);
    
    var arousal_val = parseFloat($('#arousal-val').text());
    var valence_val = parseFloat($('#valence-val').text());

    var arousal_val_str = (arousal_val>0) ? "+"+arousal_val : ""+arousal_val;
    var valence_val_str = (valence_val>0) ? "+"+valence_val : ""+valence_val;
    
    $('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal = ${arousal_val_str}, valence = ${valence_val_str})`);

    return current_time;
}

function preSubmit(form) 
{
    // Note, the Arousal and Valence feature window values used is:
    //   6 secs + 50% overlap
    // So the Weka computed AV values are spaced out:
    //   6s, 9s, 12s, ...
    
    // clamp to ensure >= 6.0 secs 
    //var current_time = Math.max(6.0,wavesurfer.getCurrentTime());
    //var current_time_1dp = current_time.toFixed(1);

    var clamped_current_time = displayClampedCurrentTimeAndAV();
    
    AVEnsurePaused();
    
    weka_segment = Math.round(clamped_current_time/3) * 3;
    form.elements["s1.offset"].value = weka_segment;
    
    var arousal_val = parseFloat($('#arousal-val').text());
    var valence_val = parseFloat($('#valence-val').text());

    //$('#makeRecommendationFrom-AV').html(`(@${current_time_1dp} secs: arousal=${arousal_val}, valence=${valence_val})`);

    return submitAVRecommendation(form, arousal_val,valence_val, clamped_current_time);
}

function AVPlotRecommendations()
{
    var $av_recommendations = $('.AVRecommendation');

    var min_arousal_val = +1.0;
    var max_arousal_val = -1.0;

    var min_valence_val = +1.0;
    var max_valence_val = -1.0;

    $av_recommendations.each(function(index_unused) {
    var arousal_val = $(this).data("arousalval");
    var valence_val = $(this).data("valenceval");

    if (arousal_val < min_arousal_val) {
        min_arousal_val = arousal_val;
    }
    if (arousal_val > max_arousal_val) {
        max_arousal_val = arousal_val;
    }

    
    if (valence_val < min_valence_val) {
        min_valence_val = valence_val;
    }
    if (valence_val > max_valence_val) {
        max_valence_val = valence_val;
    }

    });

    console.log(`AVRecommendations Arousal limits: ${min_arousal_val} <-> ${max_arousal_val}`);
    console.log(`AVRecommendations Valence limits: ${min_valence_val} <-> ${max_valence_val}`);

    var av_cluster_x_org = (min_arousal_val + max_arousal_val)/2.0;
    var av_cluster_y_org = (min_valence_val + max_valence_val)/2.0;

    var av_cluster_x_delta = Math.abs(min_arousal_val - max_arousal_val)/2.0;
    var av_cluster_y_delta = Math.abs(min_valence_val - max_valence_val)/2.0;

    //var av_cluster_rad = Math.max(Math.max(av_cluster_x_delta,av_cluster_y_delta),3.0);

    var av_cluster_rad   = Math.max(av_cluster_x_delta,av_cluster_y_delta);
    var disp_cluster_coord = av_to_display_coord(av_cluster_rad,av_cluster_rad);
    var disp_cluster_rad = disp_cluster_coord.x - av_chart_disp_x_mid; // **** **** ????
    var disp_cluster_rad_maxed = Math.max(disp_cluster_rad,3.0);

    var disp_coord = av_to_display_coord(av_cluster_x_org,av_cluster_y_org);
    var disp_x = disp_coord.x;
    var disp_y = disp_coord.y;

    var av_chart_canvas = document.getElementById('av-chart-canvas');
    
    var ctx = av_chart_canvas.getContext("2d");
    ctx.clearRect(0, 0, av_chart_canvas.width, av_chart_canvas.height);
    ctx.beginPath();
    ctx.arc(disp_x/2, disp_y/2, disp_cluster_rad_maxed/2, 0, 2*Math.PI, false);
    ctx.fillStyle = 'rgba(50,50,128,0.5)';
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgba(0,0,160,0.5)';
    ctx.stroke();
    
}

function ajaxUpdateDocumentDisplayed()
{
    var $resultsTable = $('#resultsTable');

    var $resultsTable_trs = $resultsTable.find('tr');

    if ($resultsTable_trs.length>0) {
    var $resultsTable_tr1 = $resultsTable_trs.first();
    var div_doc_id = $resultsTable_tr1.attr('id')
    var doc_id = div_doc_id.substring(3);
    
    console.log("first AV recommendation doc id = " + doc_id);

    var $av_recommendation = $resultsTable_tr1.find('.AVRecommendation').first();

    var new_doc_url = $av_recommendation.attr('href');
    var new_doc_url_parts = new_doc_url.split("#");

    var new_doc_metadata_url     = new_doc_url_parts[0] + "&excerptid=metadata-documenttext#" + new_doc_url_parts[1];
    var new_doc_playervisual_url = new_doc_url_parts[0] + "&excerptid=playervisual-documenttext#" + new_doc_url_parts[1];

    //console.log("new doc metadata url = " + new_doc_metadata_url);
    //console.log("new doc playervisual url = " + new_doc_playervisual_url);


    // current URL ends with  collect/amc-essentia/document/ds_51017_15513?p.frameOffset=...
    // Need to remove old '/document/ds_...' and replace with new doc
    
    const current_doc_url_str = window.location.href;
    
    console.log(current_doc_url_str);
    var push_doc_url_str = current_doc_url_str.replace(/document\/\w+\?/,"document/"+doc_id+"?");
    console.log("new doc url str = " + push_doc_url_str);
    const push_doc_url = new URL(push_doc_url_str);
    
    var frameOffset = $av_recommendation.data("frameoffset");       
    push_doc_url.searchParams.set('p.frameOffset', frameOffset);
    push_doc_url.searchParams.set('d', doc_id);     
    window.history.pushState({}, '', push_doc_url);
    //window.history.replaceState({}, '', push_doc_url);


    
    $('#metadata-documenttext').css("cursor","wait");
    $('#playervisual-documenttext').css("cursor","wait");

    $.ajax({
        method: "GET",
        url: new_doc_metadata_url,
    })
        .always(function() {
        $('#metadata-documenttext').css("cursor","revert");
        })

        .fail(function(jqXHR,textStatus) {
        console.error( "metadata-documenttext ajax request failed: " + textStatus);
        })
        .done(function(html_result) {
        $('#metadata-documenttext').replaceWith(html_result);
        });

    
    $.ajax({
        method: "GET",
        url: new_doc_playervisual_url,
    })
        .always(function() {
        $('#playervisual-documenttext').css("cursor","revert");
        })
        .fail(function(jqXHR,textStatus) {
        console.error( "playervisual-documenttext equest failed: " + textStatus);
        })
        .done(function(html_result) {
        
        $('#playervisual-documenttext').replaceWith(html_result);

        gs.cgiParams['p_frameOffset'] = frameOffset;
        gs.documentMetadata["assocfilepath"] = $('#ajax-loaded-assocfilepath').text();
        
        initPlayerVisual();
        initWavesurferPlayer();

        wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
        
        postInitWavesurfer(wavesurfer);

        
        });

    
    $resultsTable_tr1.slideUp();
    
    //var arousal_val = $av_recommendation.data("arousalval");
    //var valence_val = $av_recommendation.data("valenceval");

    
    }

}

function submitAVRecommendation(form, arousal_val,valence_val, current_time)
{
    form.elements["s1.arousal"].value = arousal_val;
    form.elements["s1.valence"].value = valence_val;
        
    var args = {
    "a":  "q",
    "rt": "rd",
    "s": "AudioQuery",
    "sa": "",
    "c":  gs.cgiParams["c"],
    "q":  gs.cgiParams["d"],
    "s1.query":       gs.cgiParams["d"],
    "s1.maxDocs":     form.elements["s1.maxDocs"].value,
    "s1.hitsPerPage": form.elements["s1.hitsPerPage"].value,
    "s1.offset":      form.elements["s1.offset"].value,
    "s1.length":      form.elements["s1.length"].value,
    "s1.arousal": arousal_val,
    "s1.valence": valence_val,
    "startPage": 1,
    "excerptid": "resultsArea"
    };

    
    var url = "https://mars.so-we-must-think.space/greenstone3/library";

    $('#recommendationArea').css("cursor","wait");
    $('#resultsAreaDiv').slideDown();
    $('#resultsAreaDiv').html("Retrieving recommendation ...");
    
    $.ajax({
    method: "GET",
    url: url,
    data: args
    })
    .always(function() {
        $('#recommendationArea').css("cursor","revert");
    })
    .fail(function(jqXHR,textStatus) {
        console.error( "Request failed: " + textStatus);
    })
    .done(function(html_result) {
        $('#resultsAreaDiv').html("<div>Recommendations:</div>"+html_result);
        $('#av-chart-div').show();

        AVPlotRecommendations();
        
        if (current_time) {
        const updated_url = new URL(window.location);
        updated_url.searchParams.set('p.frameOffset', current_time);
        //window.history.pushState({}, '', url + "?p.frameOffset=" + current_time);
        //window.history.pushState({}, '', updated_url);
        window.history.replaceState({}, '', updated_url);
        }
        else {
        // The result of a click on the AV-chart
        ajaxUpdateDocumentDisplayed();
        }
    });
    
    // stop submit
    return false;

    // force GET method request to go ahead
    //return true;
}



function recommendFromStart()
{    
    currentPosIsZero = true;
    $('#makeRecommendationFrom').html("Based on the start of this musical/sound art work: ");
}


function recommendFromPos()
{
    currentPosIsZero = false;
    $('#makeRecommendationFrom').html("Based on the current timeline position of this musical/sound art work: ");
}



function postInitWavesurfer(wavesurfer)
{
    console.log("postInitWavesurfer called with wavesufer = " + wavesurfer);
    
    wavesurfer.load(gs.variables.mp3url);
    
    wavesurfer.on('audioprocess', function () {
    var current_time = wavesurfer.getCurrentTime();
    var current_time_rounded = Math.round(current_time * 10) / 10
    var current_time_rounded = current_time.toFixed(1);
    $('#audioCurrentPos').html(current_time_rounded + " secs");
    
    if (current_time == 0) {
        recommendFromStart();
    }
    else if ((currentPosIsZero) && (current_time > 0)) {
        recommendFromPos();
    }
    displayClampedCurrentTimeAndAV();

    if (isRecordingUserAV) {
        appendRecordedUserAVVals();
    }
    });

    wavesurfer.on('finish', function () {
    // auto stop RecordingUserAV
    av_chart_record_finish();
    });
    
    wavesurfer.on('ready', function () {

    console.log("**** wavesurfer ready()");
    
    if ('p_frameOffset' in gs.cgiParams) {
        var frameOffset = gs.cgiParams['p_frameOffset'];
        //console.log("**** starting play @ " + frameOffset);
        //wavesurfer.play(frameOffset);
        //console.log("**** setting play seek @ " + frameOffset);
        wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
        recommendFromPos();
        displayClampedCurrentTimeAndAV();
        
        console.log("av_document.js: **** Keeping 'currentPosRunup' at 0 for now!");
        /*if (frameOffset>1.0) {
        currentPosRunup = 1.0; // 1 second
        }*/
    }
    else {
        recommendFromStart();
        displayClampedCurrentTimeAndAV();
    }
    });

}

/*

y-top: 146

Centre: 412,443

y-bot:735

x-left: 120

x-right 710


Full image:
  911 x 825 pxs



  AV centre: 412,443
  
delta x/y: from centre: 292 <-> 298
-1 <-> 0 <-> +1
   295   295


SVG:

  241 x 248 
    scaled 
    0.26458

*/

var av_chart_orig_r = 295;

var av_chart_orig_x_org = 412;
var av_chart_orig_y_org = 443;

var av_chart_orig_x_dim = 911;
var av_chart_orig_y_dim = 825;

var av_chart_disp_x_dim = 300; // **** av-chart-width
var av_chart_disp_x_mid = av_chart_disp_x_dim/2.0;

var av_chart_scale = av_chart_orig_x_dim / av_chart_disp_x_dim;

function display_to_av_coord(disp_x,disp_y)
{
    var scaled_disp_x = disp_x * av_chart_scale;
    var scaled_disp_y = disp_y * av_chart_scale;

    var orig_av_x = scaled_disp_x - av_chart_orig_x_org; 
    var orig_av_y = -1 * (scaled_disp_y - av_chart_orig_y_org); // flip y axis

    var av_x = orig_av_x / av_chart_orig_r;
    var av_y = orig_av_y / av_chart_orig_r;
    
    var capped_av_x = Math.max(Math.min(av_x,1.0),-1.0);
    var capped_av_y = Math.max(Math.min(av_y,1.0),-1.0);

    return { "x": capped_av_x, "y": capped_av_y };
}


function av_to_display_coord(av_x,av_y)
{
    //var capped_av_x = Math.max(Math.min(av_x,1.0),-1.0);
    //var capped_av_y = Math.max(Math.min(av_y,1.0),-1.0);

    // transform the coord system from av [-1,1] to be the original SVG AV chart size
    var orig_av_x = av_x * av_chart_orig_r;
    var orig_av_y = av_y * av_chart_orig_r;

    // tranform the coord system to be expressed from the top-left as the origin
    var scaled_disp_x = orig_av_x + av_chart_orig_x_org;
    var scaled_disp_y = (-1 * orig_av_y) + av_chart_orig_y_org;
    
    var disp_x = scaled_disp_x / av_chart_scale;
    var disp_y = scaled_disp_y / av_chart_scale;
    
    return { "x": disp_x, "y": disp_y };
}


function av_chart_click(elem,e)
{
    var offset = $(elem).offset();

    var elem_x_org = offset.left;
    var elem_y_org = offset.top;

    var disp_x = e.pageX - elem_x_org;
    var disp_y = e.pageY - elem_y_org;

    console.log(`(disp_x,disp_y) = (${disp_x},${disp_y})`);
    var av_coord = display_to_av_coord(disp_x,disp_y);
    var capped_av_x = av_coord.x;
    var capped_av_y = av_coord.y;
    
    console.log(`av x,y: (${capped_av_x},${capped_av_y})`);

    //var disp_coord = av_to_display_coord(capped_av_x,capped_av_y);
    //var reconverted_disp_x = disp_coord.x;
    //var reconverted_disp_y = disp_coord.y;
    
    //console.log(`reconverted (disp_x,disp_y) = (${reconverted_disp_x},${reconverted_disp_y})`);
    
    var form = $('#av-query-form')[0];

    var clamped_current_time = 6;
    AVEnsurePaused();
    weka_segment = Math.round(clamped_current_time/3) * 3;
    console.log("**** av_chart_click(): dynamically setting form[s1.offset] = " + weka_segment);
    form.elements["s1.offset"].value = weka_segment;
    
    submitAVRecommendation(form, capped_av_x, capped_av_y, null);
    
}

var hasExistingUserRecording = false;

var isRecordingUserAV = false;

var recordedUserArousalVal = 0;
var recordedUserValenceVal = 0;
var recordedUserCanvasX    = 0;
var recordedUserCanvasY    = 0;

var recordedAVs = {
    predArousal: [],
    predValence: [],
    userArousal: [],
    userValence: [],
    diffArousal: [],
    diffValence: [],

    canvasX: [],
    canvasY: []
    
};

function resetRecordedAVs() {
    recordedAVs.predArousal = [];
    recordedAVs.predValence = [];
    recordedAVs.userArousal = [];
    recordedAVs.userValence = [];
    recordedAVs.diffArousal = [];
    recordedAVs.diffValence = [];

    recordedAVs.canvasX = [];
    recordedAVs.canvasY = [];
}

function appendRecordedUserAVVals()
{
    var current_time = wavesurfer.getCurrentTime();

    // Predicted AV vals
    var pred_arousal_val = parseFloat($('#arousal-val').text());
    var pred_valence_val = parseFloat($('#valence-val').text());

    var user_arousal_val = recordedUserArousalVal;
    var user_valence_val = recordedUserValenceVal;

    var diff_arousal_val = pred_arousal_val - user_arousal_val;
    var diff_valence_val = pred_valence_val - user_valence_val;
    
    recordedAVs.predArousal.push(pred_arousal_val);
    recordedAVs.predValence.push(pred_valence_val);

    recordedAVs.userArousal.push(user_arousal_val);
    recordedAVs.userValence.push(user_valence_val);
    
    recordedAVs.diffArousal.push(diff_arousal_val);
    recordedAVs.diffValence.push(diff_valence_val);

    recordedAVs.canvasX.push(recordedUserCanvasX);
    recordedAVs.canvasY.push(recordedUserCanvasY);

            
    var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
    var av_context = av_canvas.getContext("2d");
        
    av_context.fillStyle = "rgba(190,0,0,0.05)";
    //av_context.fillStyle = "rgba(130,0,0,0.1)";
    //av_context.fillStyle = "rgba(78,196,108,0.1)";
    av_context.beginPath();
    av_context.arc(recordedUserCanvasX, recordedUserCanvasY, 5, 0, 2 * Math.PI);
    av_context.fill();

}

function displayPersonalBias(overall_personal_bias_rec)
{
    var bias_arousal_2dp = overall_personal_bias_rec['bias-arousal'].toFixed(2);
    var bias_valence_2dp = overall_personal_bias_rec['bias-valence'].toFixed(2);
    
    $('#overall-personal-bias')
    .html("Personal Bias (Arousal,Valence):"
          + " ("
          + bias_arousal_2dp
          + ","
          + bias_valence_2dp
          + ")");
    
}

function clearRecordedUserAVChart()
{
    var doc_storage_key = gs.cgiParams.c + "." + gs.cgiParams.d;

    var doc_personal_bias_arousal = 0.0;
    var doc_personal_bias_valence = 0.0;
    
    var recordedAVs_str = window.localStorage.getItem(doc_storage_key);
    if (recordedAVs_str) {
    recordedAVs = JSON.parse(recordedAVs_str);

    doc_personal_bias_arousal = recordedAVs.personalBiasArousal;
    doc_personal_bias_valence = recordedAVs.personalBiasValence;

    }
    
    window.localStorage.removeItem(doc_storage_key);

    var overall_personal_bias_key = "mars.overall-personal-bias";

    var overall_personal_bias_rec_str = window.localStorage.getItem(overall_personal_bias_key);

    var overall_personal_bias_rec;
    if (overall_personal_bias_rec_str) {
    overall_personal_bias_rec = JSON.parse(overall_personal_bias_rec_str);

    overall_personal_bias_rec['bias-arousal'] -= doc_personal_bias_arousal;
    overall_personal_bias_rec['bias-valence'] -= doc_personal_bias_valence;
    }
    
    window.localStorage.setItem(overall_personal_bias_key, JSON.stringify(overall_personal_bias_rec));

    displayPersonalBias(overall_personal_bias_rec);
    

    // Now proceed to visually clear the av-chart-canvas
    var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
    var av_context = av_canvas.getContext("2d");
    av_context.clearRect(0, 0, av_canvas.width, av_canvas.height);
    
    resetRecordedAVs();
    hasExistingUserRecording = false;
}

function renderRecordedUserAVVals()
{

    var doc_storage_key = gs.cgiParams.c + "." + gs.cgiParams.d;
    
    var recordedAVs_str = window.localStorage.getItem(doc_storage_key);
    if (recordedAVs_str) {
    recordedAVs = JSON.parse(recordedAVs_str);
    
    var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
    var av_context = av_canvas.getContext("2d");

    var num_canvas_coords = recordedAVs.canvasX.length;
    
    for (var i=0; i<num_canvas_coords; i++) {

        var canvas_x = recordedAVs.canvasX[i];
        var canvas_y = recordedAVs.canvasY[i];
        
        av_context.fillStyle = "rgba(190,0,0,0.05)";
        //av_context.fillStyle = "rgba(130,0,0,0.1)";
        //av_context.fillStyle = "rgba(78,196,108,0.1)";
        av_context.beginPath();
        av_context.arc(canvas_x, canvas_y, 5, 0, 2 * Math.PI);
        av_context.fill();
    }

    hasExistingUserRecording = true;
    }
    else {
    hasExistingUserRecording = false;
    }

}

function crsc_popup_close($elem)
{
    $elem.parents('.dialog-ovelay').fadeOut(500, function () {
    $elem.remove();
    });
}

function crsc_popup_cancel_callback()
{
    console.log("Canceling RecordingUserAV");

    var av_canvas = document.getElementById("av-chart-canvas-unlabeled");
    var av_context = av_canvas.getContext("2d");

    av_context.clearRect(0, 0, av_canvas.width, av_canvas.height);
    resetRecordedAVs();
    hasExistingUserRecording = false;
    
    crsc_popup_close($(this));

    
    if ('p_frameOffset' in gs.cgiParams) {
    var frameOffset = gs.cgiParams['p_frameOffset'];
    wavesurfer.seekTo(frameOffset/AMC_SONG_DURATION);
    recommendFromPos();
    displayClampedCurrentTimeAndAV();
    }
    else {
    AVSeekTo(0);
    }
    
}

function crsc_popup_resume_callback()
{
    console.log("Resuming RecordingUserAV");
    isRecordingUserAV = true;
    crsc_popup_close($(this));
    AVPlay();
}

function crsc_popup_save_callback()
{
    console.log("Saving to your browser RecordingUserAV");
    crsc_popup_close($(this));

    var num_av_vals = recordedAVs.userArousal.length;

    var doc_personal_bias_arousal = 0;
    var doc_personal_bias_valence = 0;

    for (var i=0; i<num_av_vals; i++) {
    doc_personal_bias_arousal += recordedAVs.diffArousal[i];
    doc_personal_bias_valence += recordedAVs.diffValence[i];
    }

    doc_personal_bias_arousal /= num_av_vals;
    doc_personal_bias_valence /= num_av_vals;

    recordedAVs.personalBiasArousal = doc_personal_bias_arousal;
    recordedAVs.personalBiasValence = doc_personal_bias_valence;
    
    var doc_storage_key = gs.cgiParams.c + "." + gs.cgiParams.d;    
    window.localStorage.setItem(doc_storage_key,JSON.stringify(recordedAVs));

    var overall_personal_bias_key = "mars.overall-personal-bias";

    var overall_personal_bias_rec_str = window.localStorage.getItem(overall_personal_bias_key);

    var overall_personal_bias_rec;
    if (overall_personal_bias_rec_str) {
    overall_personal_bias_rec = JSON.parse(overall_personal_bias_rec_str);

    }
    else {
    overall_personal_bias_rec = { 'bias-arousal': 0.0, 'bias-valence': 0.0 };
    }
    
    overall_personal_bias_rec['bias-arousal'] += doc_personal_bias_arousal;
    overall_personal_bias_rec['bias-valence'] += doc_personal_bias_valence;
    
    window.localStorage.setItem(overall_personal_bias_key, JSON.stringify(overall_personal_bias_rec));
    displayPersonalBias(overall_personal_bias_rec);
    
    hasExistingUserRecording = true;
}



function av_chart_record_click(elem,event)
{
    if (hasExistingUserRecording) {
    return;
    }
    
    var av_chart_position_info = get_av_chart_unlabeled_position_info(elem,event);

    var av_inside = av_chart_position_info.av_inside;
    if (av_inside) {
    recordedUserValenceVal = av_chart_position_info.valence_val;
    recordedUserArousalVal = av_chart_position_info.arousal_val;    

    recordedUserCanvasX = av_chart_position_info.canvas_x;
    recordedUserCanvasY = av_chart_position_info.canvas_y;  
    
    
    if (isRecordingUserAV == false) {
        isRecordingUserAV = true;
        
        if (!wavesurfer.backend.isPaused()) {
        console.log("Starting recording user's AV values");
        AVSeekTo(0);
        }
        else {
        console.log("Resuming recording user's AV values");
        }
        AVPlay()
    }
    else {
        AVEnsurePaused();
        // Have stopped recording
        // => Store recorded values into LocalStorage
        isRecordingUserAV = false;
        

        CancelResumeSaveConfirm('Customised AV Recording', 'Would you like to save this AV Recording?',
                    'Cancel and Start Over',                   'Resume Recording',         "Save",
                    crsc_popup_cancel_callback, crsc_popup_resume_callback, crsc_popup_save_callback
                   ); 
    }
    }
}

function av_chart_record_finish(elem,event)
{
    // Restore play/pause toggle button back to 'ready to play'
    AVSeekTo(0);
    $('#ws-play-icon' ).show();
    $('#ws-pause-icon').hide();
    $('#ws-playpause-label').html("Play");

    if (isRecordingUserAV == true) {
    isRecordingUserAV = false;

    CancelResumeSaveConfirm('Customised  AV Recording', 'Would you like to save this AV Recording?',
                'Cancel and Start Over',                   null, "Save",
                crsc_popup_cancel_callback, null, crsc_popup_save_callback
                   );
    }

    
}

    
function initPlayerVisual() {

    const doc_url = new URL(window.location);
    var renderWave = doc_url.searchParams.get('renderWave');

    if (renderWave && (renderWave == 1)) {
    // showing the waveform => offer link to spectrogram
    const sts_url = new URL(window.location);
    sts_url.searchParams.set('renderWave', 0);
    $('#switch-to-spectrogram').attr("href",sts_url);
    $('#switch-to-waveform').hide();

    $('#av-timelinebar-help').hide();
    }
    else {
    // show the spectrogram => offer link to waveform
    
    const stw_url = new URL(window.location);
    stw_url.searchParams.set('renderWave', 1);
    $('#switch-to-waveform').attr("href",stw_url);
    $('#switch-to-spectrogram').hide();

    $('#av-timelinebar-help').show();   
    }
}

function showAVChart()
{
    if ($('#av-chart-outerdiv').is(":hidden")) {
    var wave_form_height = $('#waveform').height();
    
    $('#waveform')
        .css("transform-origin","top")
        .css("transform","scale(1.0,0.5)")
        .height(wave_form_height/2.0);
    
    
    $('#av-chart-img-unlabeled').hide();
    $('#av-chart-canvas-unlabeled').hide();
    $('#clear-user-av-chart-rtab').hide();
    $('#av-chart-img').show();
    $('#av-chart-canvas').show();

    $('#start-av-recommendation').show();
    $('#start-av-recording').hide();

    $('#av-chart-outerdiv').slideDown();
    $('#show-av-chart').hide();
    $('#hide-av-chart').show();
    }
    
    return false;
}

function hideAVChart()
{
    if ($('#av-chart-outerdiv').is(':visible')) {

    // Slide up the chart display area
    $('#av-chart-outerdiv').slideUp(function() {

        // Reset what is being display to the default (the av-chart, not the record one)
        $('#av-chart-img-unlabeled').hide();
        $('#av-chart-chart-unlabeled').hide();
        $('#av-chart-img').show();
        $('#av-chart-canvas').show();

        $('#start-av-recommendation').show();
        $('#start-av-recording').hide();
    });
    
    // Fix up the labels
    
    $('#hide-av-chart').hide();
    $('#clear-user-av-chart-rtab').hide();
    $('#show-av-chart').show();


    // Restore the renderWave/Frequency height

    const doc_url = new URL(window.location);
    var renderWave = doc_url.searchParams.get('renderWave');
    
    if (renderWave && renderWave == 1) {
        $('#waveform').find('wave canvas').css("display","block");
    }
    var wave_form_height = $('#waveform').height();
    $('#waveform')
        .height(wave_form_height*2.0)
        .css("transform","scale(1.0,1.0)")
    }
    
    return false;
}



function loginToRecord()
{

    if (gs.variables.loggedInUsername == "") {
    // Example login redirect
    //   https://www.greenstone.org/greenstone3/library?a=p&sa=login&redirectURL=library%3Fa=p%26sa=about%26c=kjcoll%26favouritebasket=on

    var this_url = new URL(window.location)
    this_url.searchParams.set('showRecordAV', '1'); 
    var encoded_this_url = encodeURIComponent(this_url.href);
    
    var base_url = window.location.origin + window.location.pathname;
    
    window.location.href = base_url + "?a=p&sa=login&redirectURL=" + encoded_this_url;
    }
    else {
    /*
    var av_chart_svg = document.getElementById("av-chart-svg");
    //get the inner DOM of alpha.svg
    var svgDoc = av_chart_svg.contentDocument;

    //get the inner element by id
    var av_labels = svgDoc.getElementClass("av-label");
    var $av_labels = $(av_labels);

    $av_labels.css("display","none");
    */

    //console.log("Away to hide standard av-chart-img and show av-chart-img-unlabeled");



    if ($('#av-chart-outerdiv').is(":hidden")) {
        
        const doc_url = new URL(window.location);
        var renderWave = doc_url.searchParams.get('renderWave');

        if (renderWave && renderWave == 1) {
        $('#waveform').find('wave canvas').css("display","none");
        }
        var wave_form_height = $('#waveform').height();
        
        $('#waveform')
        .css("transform-origin","top")
        .css("transform","scale(1.0,0.5)")
        .height(wave_form_height/2.0);
    }
    
    // Ensure the RecordAV Chart if showing
    if ($('#av-chart-img-unlabeled').is(":hidden")) {

        // Ensure it is the RecordAV chart that is shown
        $('#av-chart-img').hide();
        $('#av-chart-canvas').hide();
        $('#av-chart-img-unlabeled').show();
        $('#av-chart-canvas-unlabeled').show();
        $('#clear-user-av-chart-rtab').show();
        
        $('#start-av-recommendation').hide();
        $('#start-av-recording').show();

        // Which is then slid-down
        $('#av-chart-outerdiv').slideDown();

        // Fix up the control label
        $('#show-av-chart').hide();
        $('#hide-av-chart').show();
    }
        
    }

}

// circ_.* parameters express position of the circle, relative to the top-left position of the elem
function mouse_xy_to_av(elem,event,circ_x_org,circ_y_org,circ_radius)
{
    var relX = event.pageX - $(elem).offset().left;
    var relY = event.pageY - $(elem).offset().top;
    
    var valenceVal = -1 * (circ_x_org - relX) / circ_radius;
    var arousalVal = +1 * (circ_y_org - relY) / circ_radius;
    
    var avRadius = Math.sqrt(valenceVal*valenceVal + arousalVal*arousalVal);

    return { 'valence': valenceVal, 'arousal': arousalVal, 'avRadius': avRadius };
}


// Need to be very careful with order of valenceVal and arousalVal
// Here they are ordered to match x,y

function av_to_canvas_xy__UNTESTED(valenceVal, arousalVal, circ_x_org,circ_y_org,circ_radius)
{
    //var canvasX = (valenceVal * circ_radius) - circ_x_org; // effectively "times -1"
    var canvasX = circ_x_org - (valenceVal * circ_radius);
    var canvasY = circ_y_org - (arousalVal * circ_radius);
    

    return { 'canvasX': canvasX, 'canvasY': canvasY };
}

function get_av_chart_unlabeled_position_info(elem,event)
{
    var circ_x_org = 183;
    var circ_y_org = 194;
    var circ_radius = 130;
    
    var av_rec = mouse_xy_to_av(elem,event,circ_x_org,circ_y_org,circ_radius);
    
    var valence_val = av_rec.valence;
    var arousal_val = av_rec.arousal;
    var av_radius   = av_rec.avRadius;
    
    var av_inside = (av_radius <= 1.0);

    var return_rec = { 'av_inside': av_inside };

    if (av_inside) {
    return_rec.arousal_val = arousal_val;
    return_rec.valence_val = valence_val;
        
    var canvas_x = event.pageX - $(elem).offset().left;
    var canvas_y = event.pageY - $(elem).offset().top;

    return_rec.canvas_x = canvas_x;
    return_rec.canvas_y = canvas_y; 
    }

    return return_rec;
}

$(document).ready(function() {

    console.log("AV Recording now always possible, without logging in (pseudo username: mars)");
    gs.variables.loggedInUsername = "mars";
    //console.log(`loggedInUsername = '${gs.variables.loggedInUsername}'`);
    if (gs.variables.loggedInUsername != "") {
    // Logged in
    $('#login-to-record-av').hide();
    $('#record-av').show();

    var this_url = new URL(window.location);
    var show_record_av = this_url.searchParams.get("showRecordAV");

    
    if (show_record_av && show_record_av == 1) {
        loginToRecord();
    }

    renderRecordedUserAVVals();
    }

    //var arg_add = (window.location.search != "")  ? "&" : "?";    
    //$('#record-av-logout').attr("href",window.location.href + arg_add + "logout=");

    var $record_av_logout = $('#record-av-logout');
    
    //record_av_logout_url = new URL($record_av_logout.attr("href"));    
    record_av_logout_url = new URL(window.location);    
    record_av_logout_url.searchParams.set('logout', '');
    record_av_logout_url.searchParams.set('showRecordAV', '0');
    $record_av_logout.attr("href",record_av_logout_url.href);
          
    initPlayerVisual();

    var overall_personal_bias_key = "mars.overall-personal-bias";
    var overall_personal_bias_rec_str = window.localStorage.getItem(overall_personal_bias_key);

    var overall_personal_bias_rec;
    if (overall_personal_bias_rec_str) {
    overall_personal_bias_rec = JSON.parse(overall_personal_bias_rec_str);
    displayPersonalBias(overall_personal_bias_rec);
    }
    
    $('#av-chart-img').on("click",function(event) {
    av_chart_click(this,event)
    });

    $('#av-chart-img').on("mousemove",function(event) {
    var circ_x_org = 137;
    var circ_y_org = 145;
    var circ_radius = 97;
    
    var av_rec = mouse_xy_to_av(this,event,circ_x_org,circ_y_org,circ_radius);

    var recValenceVal = av_rec.valence;
    var recArousalVal = av_rec.arousal;
    var avRadius      = av_rec.avRadius;
    
    var recAVInside = (avRadius <= 1.0);

    if (recAVInside) {

        var roundedA = Math.round(recArousalVal * 100) / 100
        var roundedV = Math.round(recValenceVal * 100) / 100

        var relBoxCoords = "AV coord: (" + roundedV + "," + roundedA + ")";
            $("#av-recording-coords").text(relBoxCoords);
    }
    
    if (recAVInside != prevRecAVInside) {
        if (recAVInside) {
        // crosshairs on
        $('#av-chart-img').css("cursor","crosshair");
        }
        else {
        // revert
        $('#av-chart-img').css("cursor","default");
        }
    }

    prevRecAVInside = recAVInside;
    });


    
    $('#av-chart-img-unlabeled').on("click",function(event) {
    av_chart_record_click(this,event);
    });

    
    var prevRecAVInside   = true;

    $('#av-chart-img-unlabeled').on("mouseover",function(event) {
    //console.log("**** mouseenter")
    var av_chart_position_info = get_av_chart_unlabeled_position_info(this,event);

    var av_inside = av_chart_position_info.av_inside;
    
    if (av_inside) {
        //console.log("**** inside")

        // crosshairs on
        var crosshair_record_url = gs.variables.collImagesURL + "/crosshair-cursor-red32.png";
        $('#av-chart-img-unlabeled').css("cursor","url('"+crosshair_record_url+"') 16 16, crosshair");
    }
    else {
        // revert
        $('#av-chart-img-unlabeled').css("cursor","default");
    }
    });                 

                    
    $('#av-chart-img-unlabeled').on("mousemove",function(event) {
/*
    var circ_x_org = 183;
    var circ_y_org = 194;
    var circ_radius = 130;
    
    var av_rec = mouse_xy_to_av(this,event,circ_x_org,circ_y_org,circ_radius);

    var recValenceVal = av_rec.valence;
    var recArousalVal = av_rec.arousal;
    var avRadius      = av_rec.avRadius;
    
    var recAVInside = (avRadius <= 1.0);
*/
    
    var av_chart_position_info = get_av_chart_unlabeled_position_info(this,event);

    var recValenceVal = av_chart_position_info.valence_val;
    var recArousalVal = av_chart_position_info.arousal_val; 
    var recAVInside = av_chart_position_info.av_inside;
    
    if (recAVInside) {

        var roundedA = Math.round(recArousalVal * 100) / 100
        var roundedV = Math.round(recValenceVal * 100) / 100

        var relBoxCoords = "AV coord: (" + roundedV + "," + roundedA + ")";
            $("#av-recording-coords").text(relBoxCoords);
    }

    if ((recAVInside) && (isRecordingUserAV)) {
        //var xy_rec = av_to_canvas_xy(recValenceVal,recArousalVal, circ_x_org,circ_y_org, circ_radius);
        //var canvas_x = xy_rec.canvasX;
        //var canvas_y = xy_rec.canvasY;

        //var canvas_x = event.pageX - $(this).offset().left;
        //var canvas_y = event.pageY - $(this).offset().top;

        var canvas_x = av_chart_position_info.canvas_x;
        var canvas_y = av_chart_position_info.canvas_y; 

        //console.log("**** canvas x,y = " + canvas_x + " , " + canvas_y);
        
        recordedUserArousalVal = recArousalVal;
        recordedUserValenceVal = recValenceVal;

        recordedUserCanvasX = canvas_x;
        recordedUserCanvasY = canvas_y;

    }

    if (hasExistingUserRecording) {
        $('#av-chart-img-unlabeled').css("cursor","default");
    }
    else {    
        if (recAVInside != prevRecAVInside) {
        if (recAVInside) {
            // crosshairs on
            var crosshair_record_url = gs.variables.collImagesURL + "/crosshair-cursor-red32.png";
            $('#av-chart-img-unlabeled').css("cursor","url('"+crosshair_record_url+"') 16 16, crosshair");
        }
        else {
            // revert
            $('#av-chart-img-unlabeled').css("cursor","default");
        }
        }
    }

    prevRecAVInside = recAVInside;
    });
    
});

// A circumplex model of affect.
//   https://psycnet.apa.org/record/1981-25062-001


// Russell, J. A. (1980). A circumplex model of affect. Journal of Personality and Social Psychology, 39(6), 1161–1178.
// https://doi.org/10.1037/h0077714