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