/*************************************************************
 * motivation.js.php
 * 
 * Shows motivation inquiry form and processes response. 
 * 
 * Author: LITW Core Team
 * Last Modified: August 16, 2016
 *
 * © Copyright 2016 LabintheWild
 * For questions about this file and permission to use
 * the code, contact us at info@labinthewild.org
 *************************************************************/

var litw_locale = "en";

var MOTIVATION = {
  participant_id: 0,
  study_name: "",
  show_where: "",
  show_next: null,
  likert_labels_5: ["Not at all", "", "", "", "Very much"],
  likert_labels_7: ["Not at all true", "", "", "Somewhat true", "", "", "Very true"],
  data: {},
  timestamp_1: null,
  timestamp_2: null
}

function motivation_show(show_where, show_next, participant_id, study_name, args) {

  args = args || {};
	MOTIVATION.participant_id = participant_id;
  MOTIVATION.study_name = study_name;
  MOTIVATION.show_next = show_next;
  MOTIVATION.show_where = show_where;
  MOTIVATION.next_btn_msg = args.next_btn_msg;
  var likert_items = motivation_shuffle([
    "<p class='option-set-header'>" + "I want to help science" + "</p>"
    + "<label for='science_1'>" + MOTIVATION.likert_labels_5[0] + "</label>"
    + "<input type='radio' name='science' id='science_1' value='1'/>"
    + "<input type='radio' name='science' id='science_2' value='2'/>"
    + "<label for='science_2'>" + MOTIVATION.likert_labels_5[1] + "</label>"
    + "<input type='radio' name='science' id='science_3' value='3'/>"
    + "<label for='science_3'>" + MOTIVATION.likert_labels_5[2] + "</label>"
    + "<input type='radio' name='science' id='science_4' value='4'/>"
    + "<label for='science_4'>" + MOTIVATION.likert_labels_5[3] + "</label>"
    + "<input type='radio' name='science' id='science_5' value='5'/>"
    + "<label for='science_5'>" + MOTIVATION.likert_labels_5[4] + "</label>",

    "<p class='option-set-header'>" + "For fun" + "</p>"
    + "<label for='fun_1'>" + MOTIVATION.likert_labels_5[0] + "</label>"
    + "<input type='radio' name='fun' id='fun_1' value='1'/>"
    + "<input type='radio' name='fun' id='fun_2' value='2'/>"
    + "<label for='fun_2'>" + MOTIVATION.likert_labels_5[1] + "</label>"
    + "<input type='radio' name='fun' id='fun_3' value='3'/>"
    + "<label for='fun_3'>" + MOTIVATION.likert_labels_5[2] + "</label>"
    + "<input type='radio' name='fun' id='fun_4' value='4'/>"
    + "<label for='fun_4'>" + MOTIVATION.likert_labels_5[3] + "</label>"
    + "<input type='radio' name='fun' id='fun_5' value='5'/>"
    + "<label for='fun_5'>" + MOTIVATION.likert_labels_5[4] + "</label>",

    "<p class='option-set-header'>" + "I want to learn about myself" + "</p>"
    + "<label for='selfLearn_1'>" + MOTIVATION.likert_labels_5[0] + "</label>"
    + "<input type='radio' name='selfLearn' id='selfLearn_1' value='1'/>"
    + "<input type='radio' name='selfLearn' id='selfLearn_2' value='2'/>"
    + "<label for='selfLearn_2'>" + MOTIVATION.likert_labels_5[1] + "</label>"
    + "<input type='radio' name='selfLearn' id='selfLearn_3' value='3'/>"
    + "<label for='selfLearn_3'>" + MOTIVATION.likert_labels_5[2] + "</label>"
    + "<input type='radio' name='selfLearn' id='selfLearn_4' value='4'/>"
    + "<label for='selfLearn_4'>" + MOTIVATION.likert_labels_5[3] + "</label>"
    + "<input type='radio' name='selfLearn' id='selfLearn_5' value='5'/>"
    + "<label for='selfLearn_5'>" + MOTIVATION.likert_labels_5[4] + "</label>",

    "<p class='option-set-header'>" + "I want to compare myself to others" + "</p>"
    + "<label for='compare_1'>" + MOTIVATION.likert_labels_5[0] + "</label>"
    + "<input type='radio' name='compare' id='compare_1' value='1'/>"
    + "<input type='radio' name='compare' id='compare_2' value='2'/>"
    + "<label for='compare_2'>" + MOTIVATION.likert_labels_5[1] + "</label>"
    + "<input type='radio' name='compare' id='compare_3' value='3'/>"
    + "<label for='compare_3'>" + MOTIVATION.likert_labels_5[2] + "</label>"
    + "<input type='radio' name='compare' id='compare_4' value='4'/>"
    + "<label for='compare_4'>" + MOTIVATION.likert_labels_5[3] + "</label>"
    + "<input type='radio' name='compare' id='compare_5' value='5'/>"
    + "<label for='compare_5'>" + MOTIVATION.likert_labels_5[4] + "</label>",

    "<p class='option-set-header'>" + "I am bored" + "</p>"
    + "<label for='bored_1'>" + MOTIVATION.likert_labels_5[0] + "</label>"
    + "<input type='radio' name='bored' id='bored_1' value='1'/>"
    + "<input type='radio' name='bored' id='bored_2' value='2'/>"
    + "<label for='bored_2'>" + MOTIVATION.likert_labels_5[1] + "</label>"
    + "<input type='radio' name='bored' id='bored_3' value='3'/>"
    + "<label for='bored_3'>" + MOTIVATION.likert_labels_5[2] + "</label>"
    + "<input type='radio' name='bored' id='bored_4' value='4'/>"
    + "<label for='bored_4'>" + MOTIVATION.likert_labels_5[3] + "</label>"
    + "<input type='radio' name='bored' id='bored_5' value='5'/>"
    + "<label for='bored_5'>" + MOTIVATION.likert_labels_5[4] + "</label>"
  ]);
  var html = "<form id='motivation_form' class='motivation-form'>"
    + "<h4 class='bolded-blue motivation-header'>" 
    + "Before we get started, we have a quick question for you:" + "</h4>"
    + "<p class='bolded-blue'>" 
    + "To what extent are you participating in an experiment on LabintheWild for the following reasons?" + "</p>";
  likert_items.forEach(function(item) {
    html += item;
  });
  html += "</form>";
  $("#" + MOTIVATION.show_where).html(html);
  $("#.option-set-header:first").css("margin-top", "0");

  showSlide(show_where);
  showNextButton(function() { motivation_process(); }, MOTIVATION.next_btn_msg);
  disableKeyboard();
  $('body, html').scrollTop(0);
}

function motivation_comments_show(show_where, participant_id, study_name) {
  MOTIVATION.participant_id = participant_id;
  MOTIVATION.study_name = study_name;
  MOTIVATION.show_where = show_where;

  var likert_items = motivation_shuffle([
    "<p class='option-set-header'>" + "This task was fun to do" + "</p>"
    + "<table><tr>"
    + "<td><input type='radio' name='wasFun' id='wasFun_1' value='1'/></td>"
    + "<td><input type='radio' name='wasFun' id='wasFun_2' value='2'/></td>"
    + "<td><input type='radio' name='wasFun' id='wasFun_3' value='3'/></td>"
    + "<td><input type='radio' name='wasFun' id='wasFun_4' value='4'/></td>"
    + "<td><input type='radio' name='wasFun' id='wasFun_5' value='5'/></td>"
    + "<td><input type='radio' name='wasFun' id='wasFun_6' value='6'/></td>"
    + "<td><input type='radio' name='wasFun' id='wasFun_7' value='7'/></td></tr>"
    + "<tr><td><label for='wasFun_1'>" + MOTIVATION.likert_labels_7[0] + "</label></td>"
    + "<td><label for='wasFun_2'>" + MOTIVATION.likert_labels_7[1] + "</label></td>"
    + "<td><label for='wasFun_3'>" + MOTIVATION.likert_labels_7[2] + "</label></td>"
    + "<td><label for='wasFun_4'>" + MOTIVATION.likert_labels_7[3] + "</label></td>"
    + "<td><label for='wasFun_5'>" + MOTIVATION.likert_labels_7[4] + "</label></td>"
    + "<td><label for='wasFun_6'>" + MOTIVATION.likert_labels_7[5] + "</label></td>"
    + "<td><label for='wasFun_7'>" + MOTIVATION.likert_labels_7[6] + "</label></td>"
    + "</tr></table>",

    "<p class='option-set-header'>" + "I thought this was a boring task" + "</p>"
    + "<table><tr>"
    + "<td><input type='radio' name='wasBoring' id='wasBoring_1' value='1'/></td>"
    + "<td><input type='radio' name='wasBoring' id='wasBoring_2' value='2'/></td>"
    + "<td><input type='radio' name='wasBoring' id='wasBoring_3' value='3'/></td>"
    + "<td><input type='radio' name='wasBoring' id='wasBoring_4' value='4'/></td>"
    + "<td><input type='radio' name='wasBoring' id='wasBoring_5' value='5'/></td>"
    + "<td><input type='radio' name='wasBoring' id='wasBoring_6' value='6'/></td>"
    + "<td><input type='radio' name='wasBoring' id='wasBoring_7' value='7'/></td></tr>"
    + "<tr><td><label for='wasBoring_1'>" + MOTIVATION.likert_labels_7[0] + "</label></td>"
    + "<td><label for='wasBoring_2'>" + MOTIVATION.likert_labels_7[1] + "</label></td>"
    + "<td><label for='wasBoring_3'>" + MOTIVATION.likert_labels_7[2] + "</label></td>"
    + "<td><label for='wasBoring_4'>" + MOTIVATION.likert_labels_7[3] + "</label></td>"
    + "<td><label for='wasBoring_5'>" + MOTIVATION.likert_labels_7[4] + "</label></td>"
    + "<td><label for='wasBoring_6'>" + MOTIVATION.likert_labels_7[5] + "</label></td>"
    + "<td><label for='wasBoring_7'>" + MOTIVATION.likert_labels_7[6] + "</label></td>"
    + "</tr></table>",

    "<p class='option-set-header'>" + "I would describe this task as very interesting" + "</p>"
    + "<table><tr>"
    + "<td><input type='radio' name='wasInteresting' id='wasInteresting_1' value='1'/></td>"
    + "<td><input type='radio' name='wasInteresting' id='wasInteresting_2' value='2'/></td>"
    + "<td><input type='radio' name='wasInteresting' id='wasInteresting_3' value='3'/></td>"
    + "<td><input type='radio' name='wasInteresting' id='wasInteresting_4' value='4'/></td>"
    + "<td><input type='radio' name='wasInteresting' id='wasInteresting_5' value='5'/></td>"
    + "<td><input type='radio' name='wasInteresting' id='wasInteresting_6' value='6'/></td>"
    + "<td><input type='radio' name='wasInteresting' id='wasInteresting_7' value='7'/></td></tr>"
    + "<tr><td><label for='wasInteresting_1'>" + MOTIVATION.likert_labels_7[0] + "</label></td>"
    + "<td><label for='wasInteresting_2'>" + MOTIVATION.likert_labels_7[1] + "</label></td>"
    + "<td><label for='wasInteresting_3'>" + MOTIVATION.likert_labels_7[2] + "</label></td>"
    + "<td><label for='wasInteresting_4'>" + MOTIVATION.likert_labels_7[3] + "</label></td>"
    + "<td><label for='wasInteresting_5'>" + MOTIVATION.likert_labels_7[4] + "</label></td>"
    + "<td><label for='wasInteresting_6'>" + MOTIVATION.likert_labels_7[5] + "</label></td>"
    + "<td><label for='wasInteresting_7'>" + MOTIVATION.likert_labels_7[6] + "</label></td>"
    + "</tr></table>",

    "<p class='option-set-header'>" + "I thought this task was quite enjoyable" + "</p>"
    + "<table><tr>"
    + "<td><input type='radio' name='wasEnjoyable' id='wasEnjoyable_1' value='1'/></td>"
    + "<td><input type='radio' name='wasEnjoyable' id='wasEnjoyable_2' value='2'/></td>"
    + "<td><input type='radio' name='wasEnjoyable' id='wasEnjoyable_3' value='3'/></td>"
    + "<td><input type='radio' name='wasEnjoyable' id='wasEnjoyable_4' value='4'/></td>"
    + "<td><input type='radio' name='wasEnjoyable' id='wasEnjoyable_5' value='5'/></td>"
    + "<td><input type='radio' name='wasEnjoyable' id='wasEnjoyable_6' value='6'/></td>"
    + "<td><input type='radio' name='wasEnjoyable' id='wasEnjoyable_7' value='7'/></td></tr>"
    + "<tr><td><label for='wasEnjoyable_1'>" + MOTIVATION.likert_labels_7[0] + "</label></td>"
    + "<td><label for='wasEnjoyable_2'>" + MOTIVATION.likert_labels_7[1] + "</label></td>"
    + "<td><label for='wasEnjoyable_3'>" + MOTIVATION.likert_labels_7[2] + "</label></td>"
    + "<td><label for='wasEnjoyable_4'>" + MOTIVATION.likert_labels_7[3] + "</label></td>"
    + "<td><label for='wasEnjoyable_5'>" + MOTIVATION.likert_labels_7[4] + "</label></td>"
    + "<td><label for='wasEnjoyable_6'>" + MOTIVATION.likert_labels_7[5] + "</label></td>"
    + "<td><label for='wasEnjoyable_7'>" + MOTIVATION.likert_labels_7[6] + "</label></td>"
    + "</tr></table>"
  ]);
  var html = "<form id='motivation_comments_form' class='motivation-form'>"
    + "<h4 class='bolded-blue motivation-header'>" 
    + "Also, one more question:" + "</h4>"
    + "<p class='bolded-blue'>" 
    + "For each of the following statements, please indicate how true it is for you:" + "</p>";
  likert_items.forEach(function(item) {
    html += item;
  });
  html += "</form>";

  $("#" + MOTIVATION.show_where).append(html);
  $("#.option-set-header:first").css("margin-top", "0");

  showSlide(show_where);
  $('body, html').scrollTop(0);
}

function motivation_process() {
  MOTIVATION.timestamp_1 = new Date().getTime();

  $("#" + MOTIVATION.show_where).css("opacity", "0.5");
  $("#ajax_working").css("display", "block");

  // get form responses, ignoring blank text boxes
  // NOTE: in future studies, we may not want to ignore blank responses,
  // in order to make analysis easier
  $("#motivation_form :input[value!='']").serializeArray().forEach(function(resp) {
    MOTIVATION.data[resp.name] = resp.value;
  });

  motivation_submit();
}

function motivation_comments_process() {  
  MOTIVATION.timestamp_2 = new Date().getTime();

  $("#" + MOTIVATION.show_where).css("opacity", "0.5");
  $("#ajax_working").css("display", "block");

  // get form responses, ignoring blank text boxes
  $("#motivation_comments_form :input[value!='']").serializeArray().forEach(function(resp) {
    MOTIVATION.data[resp.name] = resp.value;
  });

  motivation_comments_submit();
}

function motivation_submit() {
	// We are shifting towards saving data in a json field as used below,
	// but I am also keeping previous columns for backwards compatibility
	var motivation_data = MOTIVATION.data;

	if (Object.keys(MOTIVATION.data).length > 0) {
		motivation_data['timestamp'] = MOTIVATION.timestamp_1;
		motivation_data['participant_id'] = MOTIVATION.participant_id;
		motivation_data['locale'] = MOTIVATION.locale;
		motivation_data['study_name'] = MOTIVATION.study_name;
		$.ajax({
			type: 'POST',
			url: '../motivation_inquiry/include/motivation.php',
			data: {
				participant_id: MOTIVATION.participant_id,
				study_name: MOTIVATION.study_name,
				locale: litw_locale,
				timestamp_1: MOTIVATION.timestamp_1,
				data: JSON.stringify(motivation_data),
			}
		}).done(function(response) {

			motivation_proceed();
		});
	} else {
		motivation_proceed();
	}
}

function motivation_comments_submit() {
  if (Object.keys(MOTIVATION.data).length > 0) {
    $.ajax({
      type: 'POST',
      url: '../motivation_inquiry/include/motivationComments.php',
      data: {
        participant_id: MOTIVATION.participant_id,
        study_name: MOTIVATION.study_name,
        locale: litw_locale,
        timestamp_1: MOTIVATION.timestamp_1,
        timestamp_2: MOTIVATION.timestamp_2,
        data: JSON.stringify(MOTIVATION.data),
      }
    }).done(function(response) {
      // nothing--study advancement is handled by the comments page already
    });
  }
}

function motivation_proceed() {
  setTimeout(function() {
    $("#ajax_working").css("display", "none");
    MOTIVATION.show_next();
  }, 1000);
}

// Fisher-Yates array shuffle algorithm
function motivation_shuffle(array) {
  var m = array.length, t, i;
  while (m) {
      i = Math.floor(Math.random() * m--);
      t = array[m];
      array[m] = array[i];
      array[i] = t;
  }
  return array;
}