var modes=["points","temps","survie"];
var diffs=["easy","med","hard"];
var diffSelected="";
var modeSelected="";
size=screen.height/6;
hideAll();

document.getElementById("btn_play").width=size;
document.getElementById("btn_play_des").width=size;
document.getElementById("btn_play").style.display="none";

document.getElementById("btn_high").width=size;
document.getElementById("btn_high_des").width=size;
document.getElementById("btn_high").style.display="none";

modes.forEach(element => {

    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
    eval("img_"+element+".width=size");
    eval("img_"+element).addEventListener("mousedown",function(e){disp(e);});
    var tab=document.getElementById(element).children;
    for(var i=1;i<tab.length;i+=2){
        tab.item(i).children[0].width=size;
        tab.item(i).children[0].addEventListener("mousedown",function(e)
        {
            var tab=document.getElementById("modeSelection").children;
            for(var cpt=1;cpt<tab.length;cpt++)
            {
                var tabChilds=document.getElementById(tab.item(cpt).id).children;
                for(var cptChild=1;cptChild<tabChilds.length;cptChild+=2)
                {
                    //console.log("j'enlève selected à "+ tabChilds.item("img_"+cptChild));
                    tabChilds.item(cptChild).children[0].classList.remove("selected");
                }
            }
            
            modeSelected= e.currentTarget.id.substring(4,e.currentTarget.id.length);

            document.getElementById(e.currentTarget.id).classList.add("selected");
            if(diffSelected!="" && modeSelected!="")
        {
            document.getElementById("btn_play").style.display="inline";
            document.getElementById("btn_play_des").style.display="none";

            document.getElementById("btn_high").style.display="inline";
            document.getElementById("btn_high_des").style.display="none";
        }
        });
    }
});

diffs.forEach(element => {
    eval("var img_"+element+"= document.getElementById('img_"+element+"')");
    eval("img_"+element+".width=size");
    eval("img_"+element).addEventListener("mousedown",function(e)
    {
        diffSelected= e.currentTarget.id.substring(4);
        var tab=document.getElementById("diff").children;
        for(var cpt=1;cpt<tab.length;cpt+=2)
        {
            tab.item(cpt).children[0].classList.remove("selected");
        }
        document.getElementById(e.currentTarget.id).classList.add("selected");
        if(diffSelected!="" && modeSelected!="")
        {
            document.getElementById("btn_play").style.display="inline";
            document.getElementById("btn_play_des").style.display="none";

            document.getElementById("btn_high").style.display="inline";
            document.getElementById("btn_high_des").style.display="none";
        }
    });
})

function disp(what)
{
    what=what.currentTarget.id.substring(4);
    console.log(what);
    modes.forEach(element => {
        document.getElementById(element).style.display=what==element ? "flex":"none";
    })
}

function hideAll()
{
    document.getElementById("temps").style.display="none";
    document.getElementById("points").style.display="none";
    document.getElementById("survie").style.display="none";
}

// Dots amount

var slider = document.getElementById("range_dots");
var output = document.getElementById("dotsNumber");
document.getElementById("range_dots").value= (getCookie("dotsAmount")!="" ? getCookie("dotsAmount") : 4 );
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

// pause oui/non

document.getElementById("pause"+ (getCookie("pause")!="" ? getCookie("pause") : 0)).checked=true;

// play button

function play()
{
    setCookie("dotsAmount",document.getElementById("range_dots").value,30);
    setCookie("pause",(document.getElementById("pause0").checked ? 0 : 1),30);
    window.location.replace("./game.html?mode="+modeSelected+"&diff="+diffSelected+"&pseudo="+document.getElementById("field_pseudo").value);
}