// Les éléments visuels.
var Q, R = [], F = [], B, M;
// Les variables globales.
var G = {
    a: 0,
    b: 0,
    points: 0,
    indexAnswer: 0,
    indexGoodAnswer: 0,
    level: 0,
    colors: [
        "#fff",
        "#ffb",
        "#fb0",
        "#bfb",
        "#bbf"
    ],
    text: {
        fr: [
            ["Hum... Je pense qu'il faudrait que tu révises un peu tes calculs."],
            ["Tu en as quand même trouvé un. Courage, tu vas progresser."],
            ["C'est pas mal. Recommence pour t'entrainer encore un peu."],
            ["C'est bien ! Encore un effort et tu pourras passer au niveau suivant."],
            ["Pas de chance, à un poisson près tu pouvais passer au niveau suivant."],
            ["Excellent ! Tu vas pouvoir passer au niveau suivant."]
        ],
        en: [
            ["Hum... I think you had better ask your teacher for a little refresh.."],
            ["At leat you succeed one time! Keep trying, I'm sure you will progress."],
            ["Not too bad! Train a little more."],
            ["That\'s good! Try harder and you will pass to the next level."],
            ["You are so unluky! One more little fish and the next level is yours."],
            ["Excellent ! You gain access to the next level. Congratulation!"]
        ]
    }
};

function init() {
    B = $(document.querySelector("#board"));
    M = $(document.querySelector("#msg"));
    Q = cell("#question");
    for (var i=1 ; i<5 ; i++) {
        var r = cell("#prop" + i);
        r.$index = R.length;
        r.addEventListener("touchstart", onMouseDown, false);
        r.addEventListener("mousedown", onMouseDown, false);
        r.addEventListener("touchend", onMouseUp, false);
        r.addEventListener("mouseup", onMouseUp, false);
        R.push(r);
    }
    for (var k=0 ; k<5 ; k++) {
        F.push($(document.querySelector("#f" + (k + 1))));
    }
    G.indexAnswer = 0;
    B.addEventListener("touchstart", onBoardClick, false);
    B.addEventListener("mousedown", onBoardClick, false);
    M.addEventListener("touchstart", onBoardClick, false);
    M.addEventListener("mousedown", onBoardClick, false);
    reset();
}


/**
 * Prépare une nouvelle question.
 */
function reset() {
    var v, min, max, tmp;
    document.querySelector("body").style.background = G.colors[G.level];
    switch (G.level) {
        case 0:
        G.a = alea(1, 9);
        G.b = alea(1, 9);
        Q.innerHTML = G.a + " + " + G.b + " = ?";
        v = G.a + G.b;
        min = 0;
        max = 20;
        break;
        //-----
        case 1:
        G.a = alea(1, 9);
        G.b = alea(1, 9);
        if (G.b > G.a) {
            tmp = G.a;
            G.a = G.b;
            G.b = tmp;
        }
        Q.innerHTML = G.a + " - " + G.b + " = ?";
        v = G.a - G.b;
        min = 0;
        max = 10;
        break;
        //-----
        case 2:
        G.a = alea(10, 99);
        G.b = alea(10, 99);
        Q.innerHTML = G.a + " + " + G.b + " = ?";
        v = G.a + G.b;
        min = 0;
        max = 200;
        break;
        //-----
        case 3:
        G.a = alea(10, 99);
        G.b = alea(10, 99);
        if (G.b > G.a) {
            tmp = G.a;
            G.a = G.b;
            G.b = tmp;
        }
        Q.innerHTML = G.a + " - " + G.b + " = ?";
        v = G.a - G.b;
        min = 0;
        max = 100;
        break;
        //-----
        default:
        G.a = alea(1, 9);
        G.b = alea(1, 9);
        Q.innerHTML = G.a + " x " + G.b + " = ?";
        v = G.a * G.b;
        min = 1;
        max = 81;
        break;
    }
    G.indexGoodAnswer = alea(0, R.length - 1);
    for (var i = 0 ; i < R.length ; i++) {
        var r = R[i];
        r.parent().removeClass("invisible");
        if (i == G.indexGoodAnswer) {
            r.innerHTML = v;
        } else {
            var p = alea(min, max);
            while (p == v) {
                // La  mauvaise réponse  ne doit  pas donner  la bonne
                // valeur.
                p = alea(min, max);
            }
            r.innerHTML = p;
        }
    }

}


function alea(min, max) {
    return min + Math.floor(Math.random() * (.99999 + max - min));
}


function cell(id) {
    var e = document.querySelector(id);
    var c = document.createElement("div");
    c.className = "cell";
    e.appendChild(c);
    return $(c);
}


function onMouseDown(e) {
    e.stopPropagation();
    e.preventDefault();
    var r = R[e.target.$index];
    r.parent().addClass("prop_hover");
}


function onMouseUp(e) {
    e.stopPropagation();
    e.preventDefault();
    var idx = e.target.$index, r = R[idx];
    r.parent().removeClass("prop_hover");
    if (idx == G.indexGoodAnswer) {
        goodAnswer();
    } else {
        badAnswer();
        r.parent().addClass("invisible");
    }
}


function goodAnswer() {
    G.points++;
    answer("Good");
    reset();
}


function badAnswer() {
    answer("Bad");
}


function answer(t) {
    var f = F[G.indexAnswer];
    G.indexAnswer++;
    f.addClass("fish" + t);
    if (G.indexAnswer >= F.length) {
        var lang = navigator.language;
        if (!G.text[lang]) {
            lang = "en";
        }
        var text = G.text[lang][G.points];
        M.innerHTML = text[alea(0, text.length - 1)];
        if (G.points == F.length) {
            G.level++;
            if (G.level >= G.colors.length) {
                G.level = G.colors.length - 1;
            }
        }
        G.points = 0;
        B.addClass("big");
        M.removeClass("hide");
        M.addClass("show");
    }
}

function $(e) {
    if (!e) return e;
    if (e instanceof String) {
        console.log(e);
        e = document.querySelector(e);
        console.log(e);
    }

    if (!e.addClass) {
        e.addClass = function(cls) {
            e.removeClass(cls);
            e.className += " " + cls;
            return e;
        };
    }

    if (!e.removeClass) {
        e.removeClass = function(cls) {
            e.className = e.className.replace(cls, "");
            return e;
        };
    }

    if (!e.hasClass) {
        e.hasClass = function(cls) {
            if (cls.className.indexOf(cls) > -1) return true;
            return false;
        }
    }

    if (!e.parent) {
        e.parent = function() {
            return $(e.parentNode);
        };
    }
    return e;
}


function onBoardClick(e) {
    e.stopPropagation();
    e.preventDefault();

    for (var i = 0 ; i < F.length ; i++) {
        var f = F[i];
        f.removeClass("fishGood");
        f.removeClass("fishBad");
    }

    B.removeClass("big");
    M.removeClass("show");
    M.addClass("hide");

    G.indexAnswer = 0;
    reset();
}