{% extends 'participant_index.html' %}
{% block content %}
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div id="main-div" class="outer">
    <div id="overlay">
        <span id="overlay_crosshair">&#10010;</span>
    </div>
    <div id="instructions">
        <div class="card">
            <div class="card-body">
                <h2>Instructions</h2>
                <p>
                In this test, you will be presented with excerpts from a story.
                You will be asked questions about the content of the excerpts
                at the end of the test.
                </p>
                <button type="button" href="#" id="instr_continue" class="Btn Btn-primary">Continue</button>
            </div>
        </div>
    </div>
    <div id="question_overlay">
        <div class="card">
            <div class="card-body">
                <p id="question"></p>
                <div class="form-group">
                    <label for="answer">Answer:</label>
                    <textarea class="form-control" rows="5" id="answer"></textarea>
                </div> 
                <button type="button" href="#" id="submit_response" class="Btn Btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        jQuery.expr[':'].contains = function(a, i, m) {
        return jQuery(a).text().toUpperCase()
            .indexOf(m[3].toUpperCase()) >= 0;
        };
        // Initialise socketio with a namespace called "main"
        var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');
        var loading = true;
        var part_ready = false;
        waitingDialog.show('Loading... Please wait');

        function displayInstructions() {
            $("#instructions").css("display", "table-cell");
            $("#instructions").fadeIn();
            waitingDialog.hide();
        }

        function hideInstructions() {
            $("#instructions").css("display", "none");
            $("#instructions").fadeOut();
            if(loading) {
                waitingDialog.show('Loading... Please wait');
            }
        }

        $('#submit_response').click(function(event) {
            var text = $('#answer').val();
            socket.emit("submit_response", data=text);
        });

        $('#instr_continue').click(function(event) {
            hideInstructions();
            part_ready = true;
            socket.emit("part_ready")
            on()
        });

        socket.on('display_instructions', function(msg) {
            displayInstructions();
        });

        socket.on('set_question', function(msg) {
            $('#question').text("Question: " + msg);
        });

        socket.on('test_ready', function(msg) {
            loading = false;
            waitingDialog.hide();
        });

        socket.on('stim_playing', function(msg) {
            on()
        });

        socket.on('stim_done', function(msg) {
            off()
        });

        function on() {
            $("#overlay").css("display", "table-cell");
            $("#overlay_crosshair").css("display", "inline");
            $("#overlay").fadeIn();
            $("#overlay_crosshair").fadeIn();
        }

        function off() {
            $("#overlay").fadeOut();
        }

        // Catch message when asynchronous process is complete
        socket.on('processing-complete', function(msg) {
            alert("Story stimulus processing complete!")
            window.location.href = '/eeg/train/story/complete';
        });
    });
</script>
{% endblock %}