$(document).ready(function () {


    var tableau = [
        {hanzi: "我",
            pinyin: "wǒ",
            francais: "je"},
        {hanzi: "你",
            pinyin: "nǐ",
            francais: "tu"},
        {hanzi: "他",
            pinyin: "tā",
            francais: "il, lui"},
        {hanzi: "好",
            pinyin: "hǎo",
            francais: "aller bien, être bien"},
        {hanzi: "你好",
            pinyin: "nǐhǎo",
            francais: "bonjour"},
        {hanzi: "很",
            pinyin: "hěn",
            francais: "très"},
        {hanzi: "吗",
            pinyin: "ma",
            francais: "particule interrogative simple"},
        {hanzi: "呢",
            pinyin: "ne",
            francais: "particule interrogative qui reprend la question"}];

    var tableauBoutons = ["#ajB1", "#ajB2", "#ajB3", "#ajB4", "#ajB5", "#ajB6", "#ajB7", "#ajB8"];
    var item = 0;


    function shuffle(array) {
        var m = array.length, t, i;

        // While there remain elements to shuffle…
        while (m) {

            // Pick a remaining element…
            i = Math.floor(Math.random() * m--);

            // And swap it with the current element.
            t = array[m];
            array[m] = array[i];
            array[i] = t;
        }

        return array;
    }

    function displayDimensions() {
        var tailleFontePx = $(".fonteQuestion").css("font-size");
        console.log("taillefontepx: ", tailleFontePx);
        var tailleFonte = tailleFontePx.slice(0, -2);
        var tailleAire = $("#texteaera").width();
        var rapport = 400 / tailleAire;
        $(".fonteQuestion").css("font-size", Math.round(32 / rapport));
        $(".bouton").css("font-size", Math.round(18 / rapport));
        $("#textearea").css("margin", 20 / rapport);

    }


    // enregistrement du callback du redimenssionnement de la fenêtre
    $(window).resize(displayDimensions);



    function setFontSize() {
        // on récupère la taille de la fonte;
        // on  récupère la taille de la fenêtre
        // on calcule la proportion
        // on ajuste la taille de la fonte en fonction de ce ratio
    }

    function faux(item) {
        $(item).css("background-color", "red");
    }

    function juste(item) {
        $(item).css("background-color", "#4CAF50");
    }

    $("#ajB1").click(function () {
        console.log("je teste");
       if (item == 0) {
            juste($(this))
        } else {
            faux($(this))
        }
    });

    $("#ajB2").click(function () {
        console.log("je teste");
        if (item == 1) {
            juste($(this))
        } else {
            faux($(this))
        }
        
    });
    $("#ajB3").click(function () {
        console.log("je teste");
         console.log("je teste");
        if (item == 2) {
            juste($(this))
        } else {
            faux($(this))
        }
    });
    $("#ajB4").click(function () {
        console.log("je teste");
         console.log("je teste");
        if (item == 3) {
            juste($(this))
        } else {
            faux($(this))
        }
    });
    $("#ajB5").click(function () {
        console.log("je teste");
         console.log("je teste");
        if (item == 4) {
            juste($(this))
        } else {
            faux($(this))
        }
    });
    $("#ajB6").click(function () {
        console.log("je teste");
         console.log("je teste");
        if (item == 5) {
            juste($(this))
        } else {
            faux($(this))
        }
    });
    $("#ajB7").click(function () {
        console.log("je teste");
         console.log("je teste");
        if (item == 6) {
            juste($(this))
        } else {
            faux($(this))
        }
    });
    $("#ajB8").click(function () {
        console.log("je teste");
         console.log("je teste");
        if (item == 7) {
            juste($(this))
        } else {
            faux($(this))
        }
    });


    // on mélange les cartes
    tableau = shuffle(tableau);
    console.log(tableau);
    item = Math.floor((Math.random() * 8) + 1);
    console.log("nouvel item: ", item);

// DEBUG
    console.log("item: ", item);
    console.log("**********");
    for (var i = 0; i < 8; i++) {
        console.log(i + " " + "hanzi " + tableau[i].hanzi + " pinyin " + tableau[i].pinyin + " français " + tableau[i].francais);
    }
    console.log("**********");

// END DEBUG

    // on popularise la question ;)
    var txt1 = "<span class='fonteQuestion'>" + tableau[item].hanzi + "</span>";
    // DEBUG
    console.log("txt1 ", txt1);
    // END DEBUG
    var txt2 = "<span class='fonteQuestion'>" + tableau[item].pinyin + "</span>";
    // DEBUG
    console.log("txt2 ", txt2);
    // END DEBUG
    txt2.innerHTML = tableau[item].pinyin;
    $("#pp").append(txt1, txt2);

    // on popularise les réponses
    for (var i = 0; i < 8; i++) {
        $(tableauBoutons[i]).text(tableau[i].francais);
        // DEBUG
        console.log(i + " " + tableau[i].hanzi + " " + tableau[i].pinyin + " " + tableau[i].francais);
        // END DEBUG
    }

});