/*************************************************************
* pages.js
* 
* Contains all the functions for showing the different pages
* of the test, and all helping functions. This is the main logic 
* for the test.
*
* Author: Willy Xiao
* Adapted From: Yuechen Zhao
*
* Last Modified: August 2, 2013
*
*
* © Copyright 2013 Intelligent and Interactive Systems
* Group, Harvard University.
* For questions about this file and permission to use
* the code, contact us at info@labinthewild.org
*************************************************************/
// for php_gettext

/* splash page displayed at the start of the test */
function splash() {
	$("#header").show(); 
	showSlide("splash"); 
	showNextButton(studyInfo); 
}

/* study info and consent form, can only continue if the box is checked */
function studyInfo() {
	$("#header").show();
	showSlide("studyinfo");
	$$$("next_button").innerHTML = "<span class='bolded-blue'><br/>" + "You must check the box to continue." + "</span>";
	$$$("agreeToStudy").onclick = 
		function () { 
			if ($$$("agreeToStudy").checked) {
				showNextButton(showDemographics);
			} else {
				disableKeyboard();
				$$$("next_button").innerHTML = "<span class='bolded-blue'><br/>" + "You must check the box to continue." + "</span>";
			}
		}
}

/* demographics page */
function showDemographics() {
	$("#header").hide();
	showSlide("demographics");
	showNextButton(submit);
	demographics();
}

/* initial instructions for all the tests */
function init() {
	// disable elastic scrolling on touch
	if (withTouch)
		disableElasticScrolling();
		
	// remove loader
	$$$("ajax_working").style.display = "none";
	$$$("next_button").style.opacity = '1';
	
	function startTrials() {
		motorLogger.startMouseLog("initialization"); 
		nextTrial(globals.tests[0]); 
	}
	
	// don't show the general instructions if there's only one test
	if(globals.tests.length > 1) {

		$$$("inst").innerHTML = 
			"<br/><h3 class='bolded-blue'>General Instructions</h3><p>This test consists of multiple trials, each of which will present you with a different task. At the beginning of each individual trial, you will be shown an instructions page specific to that trial.</p><p>Click <span class='bolded-blue'>next</span> to move on to the first set of instructions.</p>";


		showSlide("inst");

		// start the first test in the array of tests
		showNextButton(startTrials);
	}
	else {
		startTrials();
	}
}


/* for any failures */
function showFailPage() {
	$$$("content").style.display = "none";
	window.onbeforeunload = null;
	$$$("error").style.display = "block";
	throw new Error('Fatal Error');
}

/* comments page at the end of the test */
function showCommentsPage() {
	$$$("progress").innerHTML = "";
	$$$("heading").innerHTML = "";
	$("#header").show();
	if (withTouch)
		enableElasticScrolling();
	
	$$$("comments").innerHTML = 
		"<h2 class='bolded-blue'> Thank you for your participation! </h2><p><br/>Before you continue to your results, please let us know what you thought of the test!<br/><em>If you require our response, please include your email.</em><br/><br/></p><form id='comments_form'><p>Do you have any comments for the researcher? Questions, Suggestions, or Concerns?</p><textarea class='comments_box' id='general' name='general' onfocus='onFocusBox(this);' onblur='onBlurBox(this);'>You may leave this area blank.</textarea><br/><p>Did you encounter any technical difficulties or interruptions during this study? &nbsp; <input type='radio' name='tech' id='tech_yes' value='yes' /> <label for='tech_yes'>Yes</label><input type='radio' name='tech' id='tech_no' value='no' /> <label for='tech_no'>No</label> </p><textarea class='comments_box' id='technical' name='technical' style='display:none;' onfocus='onFocusBox(this);' onblur='onBlurBox(this);'>You may leave this area blank.</textarea><br/><p>Did you cheat or in any way provide false information? If yes, how? &nbsp; <input type='radio' name='cheat' id='cheat_yes' value='yes' /> <label for='cheat_yes'>Yes</label><input type='radio' name='cheat' id='cheat_no' value='no' /> <label for='cheat_no'>No</label> </p><textarea class='comments_box' id='cheating' name='cheating' style='display:none;' onfocus='onFocusBox(this);' onblur='onBlurBox(this);'>You may leave this area blank.</textarea></form><br/><br/>Alternatively, you may email us at <b>info@labinthewild.org</b>.<br/>"	
	$("input[name=tech]").click( function() {
		if ($$$('tech_yes').checked)
			$$$("technical").style.display = 'block';
		else
			$$$("technical").style.display = 'none';
	});
	
	$("input[name=cheat]").click( function() {
		if ($$$('cheat_yes').checked)
			$$$("cheating").style.display = 'block';
		else
			$$$("cheating").style.display = 'none';
	});
	
	showSlide("comments");
	showNextButton(submitComments);
	disableKeyboard();
}

var box_msg = "You may leave this area blank.";

// functions to control how the comment boxes display
function onFocusBox (box) {
	if (box.value === box_msg) {
		box.value = '';
		box.style.color = "#333";
	}
}
function onBlurBox (box) {
	if (box.value === '') {
		box.value = box_msg;
		box.style.color = "#999";
	}
}

var leave_blank_msg = "You may leave this area blank.";
var yes_msg = "Yes";

// The main function to handle running the trials.
// This calls the html for all the instructions and chain of events for each test
function nextTrial(test) {
	var trial;
	
	// Shift the next trial's information off the front of the trials array.
	if (trial = test.expment.trials[test.vars.phase].shift()) {
		// Show instructions, wait for user response
		if (trial.type === "inst") {
			$$$("progress").innerHTML = "";
			$$$("heading").innerHTML = "";
			$$$("inst").innerHTML = trial.html; 			
			showSlide("inst");
			showNextButton(function () {nextTrial(test)});
		} 
		else {
			// do a trial here - create the chain of timeouts for this memorization trial
			test.vars.ch = chain(test.nextTrialChain(trial)); 
		}
	} 
	else {
		// not completely done yet? go on to next phase!
		if (test.vars.phase < (test.vars.total_num_phases - 1)) {
			test.vars.phase++;
			nextTrial(test);
			return;
		}

		// otherwise submit the test
		test.submit(); 
		
		/* this moves the test to the next phase */
		if(test.index + 1 == globals.tests.length) { // if all the tests are done, show comments page
			$$$("ajax_working").style.display = 'block';
			$$$("ajax_working").style.top = '85px';
			$$$("probes").style.opacity = '0.3';

			setTimeout(
				function() {
					$$$("ajax_working").style.display = 'none';
					//Yan change this to finish()
					showCommentsPage();
					//finish();
			}, 1000); 
		}
		else {
			nextTrial(globals.tests[test.index + 1]); // otherwise run the next trial on the next test
		}
	}
}

// function to submit the comments about the test to the server
function submitComments() {
	// validate form
	if ($("input[name=cheat]:checked").length == 0 || $("input[name=cheat]:checked").length == 0) {
		alert("Please tell us whether you encountered technical difficulties or cheated.");
		return;
	}
	
	$$$("ajax_working").style.display = 'block';
	$$$("ajax_working").style.top = '-85px';
	$$$("comments").style.opacity = '0.3';
	$$$("next_button").style.opacity = '0.3';

	var technicalBool;
	var cheatingBool;
	
	// process the responses
	var general = ($$$("general").value == leave_blank_msg) ? "" : $$$("general").value;
	var cheating, technical;
	if ($$$("cheat_yes").checked) {
		cheatingBool = 1;
		cheating = ($$$("cheating").value == leave_blank_msg) ? yes_msg : $$$("cheating").value;
	}
	else
		cheating = "";
	if ($$$("cheat_no").checked) {
		cheatingBool = 0;
	}

	if ($$$("tech_yes").checked) {
		technicalBool = 1;
		technical = ($$$("technical").value == leave_blank_msg) ? yes_msg : $$$("technical").value;
	}
	else
		technical = "";
	
	if ($$$("tech_no").checked) {
		technicalBool = 0;
	}

	// AJAX request
    $.ajax({
    	type: 'POST',
    	url: 'includes/comments.php',
    	data: {
    		general: general,
    		cheatingBool: cheatingBool,
    		cheating: cheating,
    		technicalBool: technicalBool,
    		technical: technical,
    		participant_id: globals.participant_id
    	}
    }).done(function (data) {
    	setTimeout(finish, 1000);
    });
}

// function to finish the experiment
function finish() {	
	motorLogger.stopMouseLog(); 
	motorLogger.sendMotorLog("includes/motor_logger.php"); 
	
	// allow leaving the page
	window.onbeforeunload = null; 
	
	// hide working and next
	$$$("ajax_working").style.display = 'none';
	hideNextButton();

	// append all results_html from each test to the end
	var len = globals.tests.length; 

	$$$("results1").innerHTML += 
		"<h2 class='bolded-blue'>" + 'Let\'s see how you did!' + "</h2>"
	
	for(var i = 0; i < len; i++){
		$$$("results1").innerHTML += globals.tests[i].results_html; 
	}


	// show and done!
	showSlide("results");

	showFinalPage("#results_footer",
		globals.participant_id,
		"memory",
		$("meta[property='og:title']").attr('content'),
		$("meta[property='og:description']").attr('content'),
		['newsletter', 'formality-security']);		
}