// Get the modal
var modal = document.getElementById("optionsModal");

// Get the button that opens the modal
var btn = document.getElementById("btn_options");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  document.getElementById("color_pickers").style.display= (document.getElementById("displays").value!="points" ? "none" : "inline");
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


var output = document.getElementById("dotsNumber");
var amount = (getCookie("dotsAmount")=="" ? 4 : getCookie("dotsAmount"));
output.innerHTML = amount;

document.getElementById("+").width=size/4;
document.getElementById("-").width=size/4;

function less()
{
  if(amount > 2)
  {
    amount--;
  }
  output.innerHTML = amount;
}

function more()
{
  if(amount<8)
  {
    amount++;
  }
  output.innerHTML = amount;
}

document.getElementById("displays").addEventListener("click", function(){
  document.getElementById("color_pickers").style.display= (document.getElementById("displays").value!="points" ? "none" : "inline");
})

function saveOptions() {
    setCookie("dotsAmount",amount,30);
    setCookie("displayMode",document.getElementById("displays").value,30);
    setCookie("pause",(document.getElementById("no_pause").checked ? 0 : 1),30);
    modal.style.display = "none";
}

//initialisation des valeurs des préférences

document.getElementById("gems_di").width=size/6;
document.getElementById("points_di").style.height=size/6;
document.getElementById("points_di").style.width=size/6;
document.getElementById("both_di").style.height=size/6;
document.getElementById("both_di").style.width=size/6;
document.getElementById("both_di").style.backgroundSize=size/8+"px";
document.getElementById("btn_confirm").width=size/4;

if(getCookie("pause")!=1)
  document.getElementById("no_pause").checked=true;
else
  document.getElementById("yes_pause").checked=true;

function selectDisplay(e)
{
  setCookie("displayMode",e,30);
  document.getElementById("points_di").classList.remove("selected");
  document.getElementById("gems_di").classList.remove("selected");
  document.getElementById("both_di").classList.remove("selected");
  document.getElementById(e+"_di").classList.add("selected");
}

var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"];


for(var cpt=1;cpt<9;cpt++)
{
  eval('pickr'+cpt+` = Pickr.create({
    el: '.col`+cpt+`',
    theme: 'monolith',
    default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
    useAsButton: true,
  
    components: {
  
        // Main components
        preview: true,
        hue: true,
  
        // Input / output Options
        interaction: {
            hex: true,
            input: true,
            clear: true,
            save: true
        }
    }
  });`);
  
  eval("pickr"+cpt+`.on('init', function() {
    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
  }).on('save', function () {
    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
    setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
    pickr`+cpt+`.hide();
});`);

}