// 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";
}

// 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 slider = document.getElementById("range_dots");
var output = document.getElementById("dotsNumber");
output.innerHTML = slider.value;

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

function saveOptions() {
    setCookie("dotsAmount",document.getElementById("range_dots").value,30);
    setCookie("displayMode",document.getElementById("displays").value,30);
    setCookie("pause",(document.getElementById("no_pause").checked ? 0 : 1),30);
}

//initialisation des valeurs des préférences

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

document.getElementById((getCookie("displayMode")!="" ? getCookie("displayMode")+"_disp" : "gems_disp")).selected=true;

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

// Simple example, see optional options for more configuration.
const pickr = Pickr.create({
  el: '.color-picker',
  theme: 'monolith', // or 'monolith', or 'nano'

  swatches: [
      'rgba(244, 67, 54, 1)',
      'rgba(233, 30, 99, 0.95)',
      'rgba(156, 39, 176, 0.9)',
      'rgba(103, 58, 183, 0.85)',
      'rgba(63, 81, 181, 0.8)',
      'rgba(33, 150, 243, 0.75)',
      'rgba(3, 169, 244, 0.7)',
      'rgba(0, 188, 212, 0.7)',
      'rgba(0, 150, 136, 0.75)',
      'rgba(76, 175, 80, 0.8)',
      'rgba(139, 195, 74, 0.85)',
      'rgba(205, 220, 57, 0.9)',
      'rgba(255, 235, 59, 0.95)',
      'rgba(255, 193, 7, 1)'
  ],

  components: {

      // Main components
      preview: true,
      opacity: true,
      hue: true,

      // Input / output Options
      interaction: {
          hex: true,
          rgba: true,
          hsla: true,
          hsva: true,
          cmyk: true,
          input: true,
          clear: true,
          save: true
      }
  }
});

pickr.on('init', instance => {
  console.log('init', instance);
}).on('hide', instance => {
  console.log('hide', instance);
}).on('show', (color, instance) => {
  console.log('show', color, instance);
}).on('save', (color, instance) => {
  console.log('save', color, instance);
}).on('clear', instance => {
  console.log('clear', instance);
}).on('change', (color, instance) => {
  console.log('change', color, instance);
}).on('changestop', instance => {
  console.log('changestop', instance);
}).on('cancel', instance => {
  console.log('cancel', instance);
}).on('swatchselect', (color, instance) => {
  console.log('swatchselect', color, instance);
});