{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block content %}

<div id="trialcontainer">
	<div id="dmatrix">
		<table class="table table-bordered">
		  <tr>
		  	<td></td>
		  	<th class="option">
		  		<button name="choice" class="btn btn-primary btn-large" type="button" disabled onclick="makeDecision(1);">
		  			Aktie&nbsp;{{ option1name }}
		  		</button>
		  	</th>
		  	<th class="option">
		  		<button name="choice" class="btn btn-primary btn-large" type="button" disabled onclick="makeDecision(2);">
		  			Aktie&nbsp;{{ option2name }}
		  		</button>
		  	</th>
		  </tr>
		  <tr>
		  	<td class="cuename">Experte {{ cue1name }}<br/>{{ cue1val }} von 100 korrekt</td>
		  	<td class="cuevalue">{{ cue1value1 }}</td><td class="cuevalue">{{ cue1value2 }}</td>
		  </tr>
		  <tr>
		  	<td class="cuename">Experte {{ cue2name }}<br/>{{ cue2val }} von 100 korrekt</td>
		  	<td class="cuevalue">{{ cue2value1 }}</td><td class="cuevalue">{{ cue2value2 }}</td>
		  </tr>
		  <tr>
		  	<td class="cuename">Experte {{ cue3name }}<br/>{{ cue3val }} von 100 korrekt</td>
		  	<td class="cuevalue">{{ cue3value1 }}</td><td class="cuevalue">{{ cue3value2 }}</td>
		  </tr>
		  <tr>
		  	<td class="cuename">Experte {{ cue4name }}<br/>{{ cue4val }} von 100 korrekt</td>
		  	<td class="cuevalue">{{ cue4value1 }}</td><td class="cuevalue">{{ cue4value2 }}</td>
		  </tr>
		  <tr>
		  	<td class="cuename">Experte {{ cue5name }}<br/>{{ cue5val }} von 100 korrekt</td>
		  	<td class="cuevalue">{{ cue5value1 }}</td><td class="cuevalue">{{ cue5value2 }}</td>
		  </tr>
		  <tr>
		  	<td class="cuename">Experte {{ cue6name }}<br/>{{ cue6val }} von 100 korrekt</td>
		  	<td class="cuevalue">{{ cue6value1 }}</td><td class="cuevalue">{{ cue6value2 }}</td>
		  </tr>
		</table>
	</div>
	<div id="certainty">
		<span class="title">Bitte geben Sie an, wie sicher Sie sich sind, dass Sie die gewinnbringendere Aktie gewählt haben.</span><br/>
		<span>Sehr unsicher <input type="range" name="certainty" required="" min="-100" id="id_certainty" step="1" max="100" class="form-control"> Sehr sicher</span>
	</div>
	<div id="results">
		<input type="hidden" name="decisionStart" value="">
		<input type="hidden" name="decisionEnd"   value="">
		<input type="hidden" name="certaintyEnd"  value="">
		<input type="hidden" name="decisionRT"    value="">
		<input type="hidden" name="certaintyRT"   value="">
		<input type="hidden" name="choice"        value="">

	</div>
	<div class="clear"></div>
</div>

{% endblock %}

{% block scripts %}

<script>
    window.onbeforeunload = function() {
        return "Bitte neu laden der Seite vermeiden!";
    }
</script>	

<script>
	var decisionStart = null;
	var decisionEnd   = null;
	var certaintyEnd  = null;

	// Give the window some time to load everything
	$(window).load(function(){
		setTimeout(startDecision, 500);
	});

	function startDecision(){
		// Record timestamp
		decisionStart = new Date();

		$( "#results input[name='decisionStart']").val( decisionStart.getTime() );

		// enable buttons
		$( "#dmatrix button" ).each( function() { $(this).prop('disabled', false);} );

		// Make matrix visible
		$( "#trialcontainer" ).css("visibility", "visible");
	}

	function makeDecision(choice){
		decisionEnd = new Date();

		// Store results
		$( "#results input[name='decisionEnd']").val( decisionEnd.getTime() );
		$( "#results input[name='decisionRT']").val( decisionEnd - decisionStart );
		$( "#results input[name='choice']").val( choice );

		// disable buttons
		$( "#dmatrix button" ).each( function() { $(this).prop('disabled', true);} );

		// enable certainty and finish button
		$( "#certainty" ).css("visibility", "visible");
		$( "#finish" ).css("visibility", "visible");

		// enable next button as soon as the slider is changed
		//$('#certainty input[type="range"]').change( function(){
			//$( "#finish button" ).prop("disabled", false);
		//	finishTrial();
		//});

		$('#certainty input[type="range"]').mouseup( function(){
			//$( "#finish button" ).prop("disabled", false);
			finishTrial();
		});

	}

	function finishTrial(){
		window.onbeforeunload = null;
		certaintyEnd = new Date();

		$( "#results input[name='certaintyEnd']").val( certaintyEnd.getTime() );
		$( "#results input[name='certaintyRT']").val( certaintyEnd - decisionEnd );

		$( "#form" ).submit();
	}
</script>

{% endblock %}

{% block styles %}
 <style type="text/css">
 	img.productimage {
 		max-width: 100%;
 		height: auto;
 	}

 	.clear {
 		clear: both;
 	}

 	div#trialcontainer {
 		width: 100%;
 		visibility: hidden;
 	}

 	div#certainty {
 		width: 100%;
 		visibility: hidden;
 		margin: 30px 0px;
 		text-align: center;
 	}

 	#certainty .title {
 		font-weight: bold;
 	}

 	#certainty span {
 		width: 100%;
 	}

 	#certainty input {
 		margin: 0px 20px;
 		display: inline;
 		width: 60%;
 	}

 	div#finish {
 		width: 100%;
 		visibility: hidden;
 	}

 	div#dmatrix {
 		width: 100%;
 		margin: auto;
 		float: right;
 	}
 	#dmatrix button {
 		font-size: 150%;

 	}
 	#dmatrix th.option {
 		text-align: center;;
 	}
	#dmatrix td.cuename {
    	width: 20%;
  		height: 70px;
  		padding-top: 20px;
    	font-size: 150%;
	}
	#dmatrix td.cuevalue {
    	width: 20%;
    	height: 70px;
    	padding-top: 20px;
    	font-size: 250%;
    	font-weight: bold;
    	text-align: center;
	}
</style>
{% endblock %}