$.fn.extend({
    animateCSS: function (animation) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animation).one(animationEnd, function() {
            $(this).removeClass('animated ' + animation);
        });
    }
});

// Process response given by the server
function updateQuestion(response){
    switch (response["method"]) {
    case "new_question":
        $("#question_div").html(response["params"]["question"]);
        $("#comments").html("");
        $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);

        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"question_div"]);

        // enable shift+enter to submit and tab to spaces conversion
        $("input:text, input:radio, input:checkbox").keydown(function (e) {
            if (e.keyCode == 13) {
                e.preventDefault();
                if (e.shiftKey) postQuestion();
                return false;
            }});
        $("textarea").keydown(function (e) {
            if (e.keyCode == 13 && e.shiftKey) { // shift enter
                e.preventDefault();
                postQuestion();
            }
            else if (e.keyCode == 9) { // tab
                e.preventDefault();     // prevent loosing focus
                // get caret position/selection
                var start = this.selectionStart;
                var end = this.selectionEnd;
                var value = $(this).val();

                // set textarea value to: text before caret + tab + text after caret
                $(this).val(value.substring(0, start) + " " + " " + " " + " " + value.substring(end));
                // put caret at right position again (add one for the tab)
                this.selectionStart = this.selectionEnd = start + 4;
            }});
        $('#question_div').animateCSS('zoomIn');
        break;

    case "shake":
        $('#topic_progress').css('width', (100*response["params"]["progress"])+'%').attr('aria-valuenow', 100*response["params"]["progress"]);
        $('#question_div').animateCSS('shake');
        $('#comments').html(response['params']['comments']);
        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"#comments"]);
        break;

    case "finished_topic":
        $('#submit').css("visibility", "hidden");
        $("#content").html(response["params"]["question"]);
        $('#topic_progress').css('width', '100%').attr('aria-valuenow', 100);
        $("#content").animateCSS('tada');
        setTimeout(function(){ window.location.replace('/'); }, 2000);
        break;
    }
}

// Get current question
function getQuestion() {
    $.ajax({
        type: "GET",
        url: "/question",
        dataType: "json", // expected from server
        success: updateQuestion,
        error: function() {alert("O servidor não responde.");}
    });
}

// Send answer and receive a response.
// The response can be a new_question or a shake if the answer is wrong.
function postQuestion() {
    $.ajax({
        type: "POST",
        url: "/question",
        data: $("#question_form").serialize(), // {'a':10,'b':20},
        dataType: "json", // expected from server
        success: updateQuestion,
        error: function() {alert("O servidor não responde.");}
    });
}

$(document).ready(function() {
    getQuestion();
    $("#submit").click(postQuestion);
});