/*
  Create variables with lang
 */

const langVariable = document.getElementsByTagName('html')[0].lang;

/*
  Change carousel all 10sec
 */

setInterval(function() {
  var number = Math.floor(Math.random() * 81) +1;

  do {
    number = Math.floor(Math.random() * 81) +1;
  }
  while(document.getElementsByClassName('nameCharacters')[0].textContent == listCharacters[number].fr);


    //console.log(number);
    //console.log('nom', listCharacters[number].fr);
    //console.log('image', "https://smashpro.tips.maxime-blouin.fr/wp-content/themes/smashpro/assets/images/pages/common/artworks/" + listCharacters[number].fr + "/artwork.png");

    if(document.getElementsByClassName('firstSlideCharacters')[0].classList.contains('inactive')) {
      document.getElementsByClassName('firstSlideCharacters')[0].className = 'firstSlideCharacters ' + listCharacters[number].tagFr;

      if(langVariable === "en-US") {
        document.getElementsByClassName('titleCharacters')[0].href = "/characters/" + listCharacters[number].tagEn;
        document.getElementsByClassName('nameCharacters')[0].textContent = listCharacters[number].en;
      } else {
        document.getElementsByClassName('titleCharacters')[0].href = "/personnages/" + listCharacters[number].tagFr;
        document.getElementsByClassName('nameCharacters')[0].textContent = listCharacters[number].fr;
      }

      document.getElementsByClassName('numberCharacters')[0].textContent = "- " + listCharacters[number].number + " -";
      document.getElementsByClassName('firstSlideCharacters')[0].classList.remove('inactive');
      document.getElementsByClassName('secondSlideCharacters')[0].classList.add('inactive');
    } else {
      document.getElementsByClassName('secondSlideCharacters')[0].className = 'secondSlideCharacters ' + listCharacters[number].tagFr;

      if(langVariable === "en-US") {
        document.getElementsByClassName('titleCharacters')[1].href = "/characters/" + listCharacters[number].tagEn;
        document.getElementsByClassName('nameCharacters')[1].textContent = listCharacters[number].en;
      } else {
        document.getElementsByClassName('titleCharacters')[1].href = "/personnages/" + listCharacters[number].tagFr;
        document.getElementsByClassName('nameCharacters')[1].textContent = listCharacters[number].fr;
      }

      document.getElementsByClassName('numberCharacters')[1].textContent = "- " + listCharacters[number].number + " -";
      document.getElementsByClassName('firstSlideCharacters')[0].classList.add('inactive');
      document.getElementsByClassName('secondSlideCharacters')[0].classList.remove('inactive');
    }
}, 10000);



/*
  Initialize swpier news
 */

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },

  breakpoints: {
    // when window width is >= 320px
    320: {
    },
    // when window width is >= 480px
    480: {
    },
    // when window width is >= 640px
    640: {
      width: 600,
      height: 300,
    }
  }
});


/*
  Json object with trad to change Top characters on Home
 */

var listCharacters = {
  1: {"number": "1","tagFr": "mario","tagEn": "mario","fr": "mario","en": "mario","es": ""},
  2: {"number": "2","tagFr": "donkey-kong","tagEn": "donkey-kong","fr": "donkey kong","en": "donkey kong","es": ""},
  3: {"number": "3","tagFr": "link","tagEn": "mario","fr": "link","en": "link","es": ""},
  4: {"number": "4","tagFr": "samus","tagEn": "link","fr": "samus","en": "samus","es": ""},
  5: {"number": "4E","tagFr": "samus-sombre","tagEn": "dark-samus","fr": "samus sombre","en": "dark samus","es": ""},
  6: {"number": "5","tagFr": "yoshi","tagEn": "yoshi","fr": "yoshi","en": "yoshi","es": ""},
  7: {"number": "6","tagFr": "kirby","tagEn": "kirby","fr": "kirby","en": "kirby","es": ""},
  8: {"number": "7","tagFr": "fox","tagEn": "fox","fr": "fox","en": "fox","es": ""},
  9: {"number": "8","tagFr": "pikachu","tagEn": "pikachu","fr": "pikachu","en": "pikachu","es": ""},
  10: {"number": "9","tagFr": "luigi","tagEn": "luigi","fr": "luigi","en": "luigi","es": ""},
  11: {"number": "10","tagFr": "ness","tagEn": "ness","fr": "ness","en": "ness","es": ""},
  12: {"number": "11","tagFr": "captain-falcon","tagEn": "captain-falcon","fr": "captain falcon","en": "captain falcon","es": ""},
  13: {"number": "12","tagFr": "rondoudou","tagEn": "jigglypuff","fr": "rondoudou","en": "jigglypuff","es": ""},
  14: {"number": "13","tagFr": "peach","tagEn": "peach","fr": "peach","en": "peach","es": ""},
  15: {"number": "13E","tagFr": "daisy","tagEn": "daisy","fr": "daisy","en": "daisy","es": ""},
  16: {"number": "14","tagFr": "bowser","tagEn": "bowser","fr": "bowser","en": "bowser","es": ""},
  17: {"number": "15","tagFr": "ice-climbers","tagEn": "ice-climbers","fr": "ice climbers","en": "ice climbers","es": ""},
  18: {"number": "16","tagFr": "sheik","tagEn": "sheik","fr": "sheik","en": "sheik","es": ""},
  19: {"number": "17","tagFr": "zelda","tagEn": "zelda","fr": "zelda","en": "zelda","es": ""},
  20: {"number": "18","tagFr": "dr-mario","tagEn": "dr-mario","fr": "dr. mario","en": "dr. mario","es": ""},
  21: {"number": "19","tagFr": "pichu","tagEn": "pichu","fr": "pichu","en": "pichu","es": ""},
  22: {"number": "20","tagFr": "falco","tagEn": "falco","fr": "falco","en": "falco","es": ""},
  23: {"number": "21","tagFr": "marth","tagEn": "marth","fr": "marth","en": "marth","es": ""},
  24: {"number": "21E","tagFr": "lucina","tagEn": "lucina","fr": "lucina","en": "lucina","es": ""},
  25: {"number": "22","tagFr": "link-enfant","tagEn": "young-link","fr": "link enfant","en": "young link","es": ""},
  26: {"number": "23","tagFr": "ganondorf","tagEn": "ganondorf","fr": "ganondorf","en": "ganondorf","es": ""},
  27: {"number": "24","tagFr": "mewtwo","tagEn": "mewtwo","fr": "mewtwo","en": "mewtwo","es": ""},
  28: {"number": "25","tagFr": "roy","tagEn": "roy","fr": "roy","en": "roy","es": ""},
  29: {"number": "25E","tagFr": "chrom","tagEn": "chrom","fr": "chrom","en": "chrom","es": ""},
  30: {"number": "26","tagFr": "mr-game-and-watch","tagEn": "mr-game-and-watch","fr": "mr game & watch","en": "mr game & watch","es": ""},
  31: {"number": "27","tagFr": "meta-knight","tagEn": "meta-knight","fr": "meta knight","en": "meta knight","es": ""},
  32: {"number": "28","tagFr": "pit","tagEn": "pit","fr": "pit","en": "pit","es": ""},
  33: {"number": "28E","tagFr": "pit-malefique","tagEn": "dark-pit","fr": "pit malefique","en": "dark pit","es": ""},
  34: {"number": "29","tagFr": "samus-sans-armure","tagEn": "zero-suit-samus","fr": "samus sans armure","en": "zero suit samus","es": ""},
  35: {"number": "30","tagFr": "wario","tagEn": "wario","fr": "wario","en": "wario","es": ""},
  36: {"number": "31","tagFr": "snake","tagEn": "snake","fr": "snake","en": "snake","es": ""},
  37: {"number": "32","tagFr": "ike","tagEn": "ike","fr": "ike","en": "ike","es": ""},
  38: {"number": "33","tagFr": "dresseur-de-pokemon","tagEn": "pokemon-trainer","fr": "dresseur de pokemon","en": "pokemon trainer","es": ""},
  39: {"number": "36","tagFr": "diddy-kong","tagEn": "diddy-kong","fr": "diddy kong","en": "diddy kong","es": ""},
  40: {"number": "37","tagFr": "lucas","tagEn": "lucas","fr": "lucas","en": "lucas","es": ""},
  41: {"number": "38","tagFr": "sonic","tagEn": "sonic","fr": "sonic","en": "sonic","es": ""},
  42: {"number": "39","tagFr": "roi-dadidou","tagEn": "king-dedede","fr": "roi dadidou","en": "king dedede","es": ""},
  43: {"number": "40","tagFr": "olimar","tagEn": "olimar","fr": "olimar","en": "olimar","es": ""},
  44: {"number": "41","tagFr": "lucario","tagEn": "lucario","fr": "lucario","en": "lucario","es": ""},
  45: {"number": "42","tagFr": "rob","tagEn": "rob","fr": "rob","en": "rob","es": ""},
  46: {"number": "43","tagFr": "link-cartoon","tagEn": "toon-link","fr": "link cartoon","en": "toon link","es": ""},
  47: {"number": "44","tagFr": "wolf","tagEn": "wolf","fr": "wolf","en": "wolf","es": ""},
  48: {"number": "45","tagFr": "villageois","tagEn": "villager","fr": "villageois","en": "villager","es": ""},
  49: {"number": "46","tagFr": "mega-man","tagEn": "mega-man","fr": "mega man","en": "mega man","es": ""},
  50: {"number": "47","tagFr": "entraineuse-wii-fit","tagEn": "wii-fit-trainer","fr": "entraineuse wii fit","en": "wii fit trainer","es": ""},
  51: {"number": "48","tagFr": "harmonie-and-luma","tagEn": "harmonie-and-luma","fr": "harmonie & luma","en": "rosalina & luma","es": ""},
  52: {"number": "49","tagFr": "little-mac","tagEn": "little-mac","fr": "little mac","en": "little mac","es": ""},
  53: {"number": "50","tagFr": "amphinobi","tagEn": "greninja","fr": "amphinobi","en": "greninja","es": ""},
  54: {"number": "51","tagFr": "boxeur","tagEn": "brawler","fr": "mii boxeur","en": "mii brawler","es": ""},
  55: {"number": "52","tagFr": "epeiste","tagEn": "sword-fighter","fr": "mii epeiste","en": "mii swordfighter","es": ""},
  56: {"number": "53","tagFr": "tireur","tagEn": "gunner","fr": "mii tireur","en": "mii gunner","es": ""},
  57: {"number": "54","tagFr": "palutena","tagEn": "palutena","fr": "palutena","en": "palutena","es": ""},
  58: {"number": "55","tagFr": "pac-man","tagEn": "pac-man","fr": "pac-man","en": "pac-man","es": ""},
  59: {"number": "56","tagFr": "daraen","tagEn": "robin","fr": "daraen","en": "robin","es": ""},
  60: {"number": "57","tagFr": "shulk","tagEn": "shulk","fr": "shulk","en": "shulk","es": ""},
  61: {"number": "58","tagFr": "bowser-jr","tagEn": "bowser-jr","fr": "bowser jr.","en": "bowser jr.","es": ""},
  62: {"number": "59","tagFr": "duo-duck-hunt","tagEn": "duck-hunt","fr": "duo duck hunt","en": "duck hunt","es": ""},
  63: {"number": "60","tagFr": "ryu","tagEn": "ryu","fr": "ryu","en": "ryu","es": ""},
  64: {"number": "60E","tagFr": "ken","tagEn": "ken","fr": "ken","en": "ken","es": ""},
  65: {"number": "61","tagFr": "cloud","tagEn": "cloud","fr": "cloud","en": "cloud","es": ""},
  66: {"number": "62","tagFr": "corrin","tagEn": "corrin","fr": "corrin","en": "corrin","es": ""},
  67: {"number": "63","tagFr": "bayonetta","tagEn": "bayonetta","fr": "bayonetta","en": "bayonetta","es": ""},
  68: {"number": "64","tagFr": "inkling","tagEn": "inkling","fr": "inkling","en": "inkling","es": ""},
  69: {"number": "65","tagFr": "ridley","tagEn": "ridley","fr": "ridley","en": "ridley","es": ""},
  70: {"number": "66","tagFr": "simon","tagEn": "simon","fr": "simon","en": "simon","es": ""},
  71: {"number": "66E","tagFr": "richter","tagEn": "richter","fr": "richter","en": "richer","es": ""},
  72: {"number": "67","tagFr": "king-k-rool","tagEn": "king-k-rool","fr": "king k. rool","en": "king k. rool","es": ""},
  73: {"number": "68","tagFr": "marie","tagEn": "isabelle","fr": "marie","en": "isabelle","es": ""},
  74: {"number": "69","tagFr": "felinferno","tagEn": "incineroar","fr": "felinferno","en": "incineraor","es": ""},
  75: {"number": "70","tagFr": "plante-piranha","tagEn": "piranha-plant","fr": "plante piranha","en": "piranha plant","es": ""},
  76: {"number": "71","tagFr": "joker","tagEn": "joker","fr": "joker","en": "joker","es": ""},
  77: {"number": "72","tagFr": "le-heros","tagEn": "hero","fr": "le heros","en": "hero","es": ""},
  78: {"number": "73","tagFr": "banjo-et-kazooie","tagEn": "banjo-and-kazooie","fr": "banjo et kazooie","en": "banjo & kazooie","es": ""},
  79: {"number": "74","tagFr": "terry","tagEn": "terry","fr": "terry","en": "terry","es": ""},
  80: {"number": "75","tagFr": "byleth","tagEn": "byleth","fr": "byleth","en": "byleth","es": ""},
  81: {"number": "76","tagFr": "min-min","tagEn": "min-min","fr": "min min","en": "min min","es": ""},
  82: {"number": "77","tagFr": "steve","tagEn": "steve","fr": "steve","en": "steve","es": ""},
  83: {"number": "78","tagFr": "sephiroth","tagEn": "sephiroth","fr": "sephiroth","en": "sephiroth","es": ""},
  84: {"number": "79","tagFr": "pyra","tagEn": "pyra","fr": "pyra","en": "pyra","es": ""},
  85: {"number": "81","tagFr": "kazuya","tagEn": "kazuya","fr": "kazuya","en": "kazuya","es": ""},
  86: {"number": "82","tagFr": "sora","tagEn": "sora","fr": "sora","en": "sora","es": ""}
};

/*
  Init carousel
 */

var number = Math.floor(Math.random() * 81) +1;
document.getElementsByClassName('firstSlideCharacters')[0].className = 'firstSlideCharacters ' + listCharacters[number].tagFr;
if(langVariable === "en-US") {
  document.getElementsByClassName('titleCharacters')[0].href = "/characters/" + listCharacters[number].tagEn;
  document.getElementsByClassName('nameCharacters')[0].textContent = listCharacters[number].en;
} else {
  document.getElementsByClassName('titleCharacters')[0].href = "/personnages/" + listCharacters[number].tagFr;
  document.getElementsByClassName('nameCharacters')[0].textContent = listCharacters[number].fr;
}
document.getElementsByClassName('numberCharacters')[0].textContent = "- " + listCharacters[number].number + " -";

/**
 * options tab system
 *
 * @by Gorn
 *
 * @return null
 */

const tabGuide = document.querySelectorAll('.itemGuides');
const panelGuide = document.querySelectorAll('.panelGuide section');

function switchContentTab(list, classListValue = "active", flag = "remove") {
  list.forEach(function(elt) {
    if(flag === "remove") elt.classList.remove(classListValue);
    else elt.classList.add(classListValue);
  });
}

document.getElementById('menuCharacters').addEventListener('click', function() {
  if(!document.getElementById('menuCharacters').classList.contains('active')) {
    if(tabGuide) switchContentTab(tabGuide);
    if(panelGuide) switchContentTab(panelGuide);
    document.getElementById('menuCharacters').classList.toggle('active');
    document.getElementsByClassName('panelCharacters')[0].classList.toggle('active');
  }
});

document.getElementById('menuArchetypes').addEventListener('click', function() {
  if(!document.getElementById('menuArchetypes').classList.contains('active')) {
    if(tabGuide) switchContentTab(tabGuide);
    if(panelGuide) switchContentTab(panelGuide);
    document.getElementById('menuArchetypes').classList.toggle('active');
    document.getElementsByClassName('panelArchetypes')[0].classList.toggle('active');
  }
});

document.getElementById('menuMatchups').addEventListener('click', function() {
  if(!document.getElementById('menuMatchups').classList.contains('active')) {
    if(tabGuide) switchContentTab(tabGuide);
    if(panelGuide) switchContentTab(panelGuide);
    document.getElementById('menuMatchups').classList.toggle('active');
    document.getElementsByClassName('panelMatchups')[0].classList.toggle('active');
  }
});

let menuStages = document.getElementById('menuStages');
if(menuStages){
  document.getElementById('menuStages').addEventListener('click', function() {
    callStage('df');
    titleStage.innerHTML = 'Destination Finale';
    imageStagesRatio.className = 'imageStagesRatio df';

    if(!document.getElementById('menuStages').classList.contains('active')) {
      if(tabGuide) switchContentTab(tabGuide);
      if(panelGuide) switchContentTab(panelGuide);
      document.getElementById('menuStages').classList.toggle('active');
      document.getElementsByClassName('panelStages')[0].classList.toggle('active');
    }
  });
}

/*
  Trigger Matchups
 */

/* Listener click event on matchups icon */
function addListernetToMatchups(matchupsSelection) {
  for(var i = 0; i < matchupsSelection.length; i++) {
    matchupsSelection[i].addEventListener("click", function() {
      callMatchups(this.id);
    })
  }
}

addListernetToMatchups(document.getElementsByClassName('wordingCharactersLink'));

function callMatchups(nameFile) {
  fetch('/wp-content/themes/smashpro/assets/js/data/matchups/' + nameFile + '.json') // Call the fetch function passing the url of the API as a parameter
    .then(
      function(response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +
            response.status);
          return;
        }

        // Examine the text in the response
        response.json().then(function(data) {
          let resultCat = [], cat = [];

          for(i= 3; i>-4; i-=0.5) {
            if(data[i]) {
              for (const characterMatchups of data[i]) {
                resultCat[i] += `<img src="https://smashpro.tips.maxime-blouin.fr/wp-content/themes/smashpro/assets/images/pages/common/artworks/${characterMatchups}/stock.png" class="iconMatchups" alt="icône de ${characterMatchups}">\n`;
              }
              var titleCat = i > 0 ? '+' + i : i;
              var numberCat = i === parseInt(i, 10) ? i + 4 : i == 0.5 ? 9 : 8;
              cat[i] = '<div class="catMatchUps"><div class="titleCatMatchUps cat' + numberCat + '">' + titleCat + '</div><div class="charactersCatMatchUps cat' + (i + 4) + '">' + resultCat[i] + '</div></div>';
            } else  {
              cat[i] = '';
            }
          }

          document.getElementsByClassName('msgModal')[0].innerHTML = cat[3] + cat[2] + cat[1] + cat[0.5] + cat[0] + cat[-0.5] + cat[-1] + cat[-2] + cat[-3];

          document.getElementById('modalMatchUps').classList.toggle('show');
          document.getElementsByClassName('overlay')[0].classList.toggle('show');
        });
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
}

/**
 * Popin matchups
 *
 * @by Gorn
 *
 * @return null
 */

document.querySelectorAll('.closeModal')[0].addEventListener('click', function() {
  document.getElementById('modalMatchUps').classList.toggle('show');
  document.getElementsByClassName('overlay')[0].classList.toggle('show');
});

document.getElementsByClassName('overlay')[0].addEventListener('click', function() {
  document.getElementById('modalMatchUps').classList.toggle('show');
  document.getElementsByClassName('overlay')[0].classList.toggle('show');
});


/*
  Json object with trad to change Top characters on Home
 */

function callStage(nameFile) {
  fetch('/wp-content/themes/smashpro/assets/js/data/stages/' + nameFile + '.json') // Call the fetch function passing the url of the API as a parameter
    .then(
      function(response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +
            response.status);
          return;
        }

        // Examine the text in the response
        response.json().then(function(data) {
          let langStage = "fr";
          if (langVariable === "en-US") langStage = "en";
          document.getElementsByClassName('stagePresentation')[0].innerHTML = data[langStage]['presentation'];
          document.getElementsByClassName('stageComposition')[0].innerHTML = data[langStage]['composition'];
          document.getElementsByClassName('stageBlastzones')[0].innerHTML = data[langStage]['blastzones'];
          document.getElementsByClassName('stageHowtoplay')[0].innerHTML = data[langStage]['howtoplay'];
        });
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
}


/**
 * Dropdown js vanilla stages
 *
 * @by Gorn
 *
 * @return null
 */

var select = new CustomSelect({
  elem: "sortBy",  // id of the original select element
});

const sortStageByOptions = document.querySelectorAll('.js-Dropdown-list li');
const listStages = document.getElementById('listStages');

for (let i = 0; i < sortStageByOptions.length; i++) {
  sortStageByOptions[i].addEventListener('click', function(event) {
    listStages.className = 'listStages ' + event.target.dataset.value;
  });
}


/**
 * Change Background stages
 *
 * @by Gorn
 *
 * @return null
 */

const stagesLinkItem = document.querySelectorAll('.stagesLinkItem');
const imageStagesRatio = document.getElementById('imageStagesRatio');
const titleStage = document.getElementById('titleStage');

for (let i = 0; i < stagesLinkItem.length; i++) {
  stagesLinkItem[i].addEventListener('click', function(event) {
    titleStage.innerHTML = event.target.innerHTML;
    imageStagesRatio.className = 'imageStagesRatio ' + event.target.dataset.value;
    callStage(event.target.dataset.value);
  });
}


/**
 * Add Filter Main stages
 *
 * @by Gorn
 *
 * @return null
 */

const buttonMainStageItem = document.querySelectorAll('.buttonMainStageItem');
const filterMainStages = document.getElementById('filterMainStages');

for (let i = 0; i < buttonMainStageItem.length; i++) {
  buttonMainStageItem[i].addEventListener('click', function(event) {
    if(!filterMainStages.classList.contains(event.target.dataset.value)) {
      filterMainStages.className = 'filterMainStages ' + event.target.dataset.value;
      buttonMainStageItem[0].classList.remove('active');
      buttonMainStageItem[1].classList.remove('active');
      event.target.classList.add('active');
    } else {
      filterMainStages.className = 'filterMainStages';
      event.target.classList.remove('active');
    }
  });
}

/**
 * Call Archetype info
 *
 * @by Gorn
 *
 * @return null
 */

function callArchetype(nameFile) {
  const nameArchetype = nameFile;
  fetch('/wp-content/themes/smashpro/assets/js/data/archetypes/' + nameFile + '.json') // Call the fetch function passing the url of the API as a parameter
    .then(
      function(response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +
            response.status);
          return;
        }

        // Examine the text in the response
        response.json().then(function(data) {
          // Title
          document.querySelector('.' + data['category'] + ' .titleSelectedArchetype').innerHTML = data['title'];
          // Character example
          let characterExampleArchetype = data['characters'][Math.floor(Math.random() * data['characters'].length)];
          document.querySelector('.' + data['category'] + ' .imageArchetype').style.backgroundImage = `url(https://smashpro.tips.maxime-blouin.fr/wp-content/themes/smashpro/assets/images/pages/common/artworks/${characterExampleArchetype}/archetype.png)`;
          // Description
          if(langVariable === "en-US") {
            document.querySelector('.' + data['category'] + ' .msgArchetype').innerHTML = data['en'];
          } else {
            document.querySelector('.' + data['category'] + ' .msgArchetype').innerHTML = data['fr'];
          }
          // List of characters
          let charactersArchetype = '';
          for (const characterArchetype of data['characters']) {
            charactersArchetype += `<img src="https://smashpro.tips.maxime-blouin.fr/wp-content/themes/smashpro/assets/images/pages/common/artworks/${characterArchetype}/stock.png" class="iconCharactersArchetype" alt="icône de ${characterArchetype}">\n`;
          }
          document.querySelector('.' + data['category'] + ' .listCharactersArchetype').innerHTML = charactersArchetype;

          // Open selected Cat and close others
          let descriptionsArchetype = document.querySelectorAll('.descriptionArchetype');
          for (const descriptionArchetype of descriptionsArchetype) {
            descriptionArchetype.style.display = "none";
          }
          document.querySelector('.' + data['category'] + ' .descriptionArchetype').style.display = "flex";
        });
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
}

/**
 * Active or Inactive Archetype selected
 *
 * @by Gorn
 *
 * @return null
 */

function switchActivatedArchetype(list, classListValue = "active", flag = "remove") {
  list.forEach(function(elt) {
    if(flag === "remove") elt.classList.remove(classListValue);
    else elt.classList.add(classListValue);
  });
}

/**
 * Change Select Archetype
 *
 * @by Gorn
 *
 * @return null
 */

/* Icon Menu */
const archetypesLinkItem = document.querySelectorAll('.archetypesLinkItem');

for (let i = 0; i < archetypesLinkItem.length; i++) {
  archetypesLinkItem[i].addEventListener('click', function(event) {
    callArchetype(event.target.dataset.value);
    switchActivatedArchetype(archetypesLinkItem);
    event.target.classList.add("active");
  });
}

/* Link Menu under Pyramid */
const archetypesLinkItemMenu = document.querySelectorAll('.archetypesLinkItemMenu');

for (let i = 0; i < archetypesLinkItemMenu.length; i++) {
  archetypesLinkItemMenu[i].addEventListener('click', function(event) {
    switchActivatedArchetype(archetypesLinkItem);
    callArchetype(event.target.dataset.value);
    let archetypeActive = document.querySelectorAll('.archetypesLinkItem[data-value="' + event.target.dataset.value + '"]')[0];
    archetypeActive.classList.add("active");
    let delayToScroll = setTimeout(function() {
      archetypeActive.scrollIntoView()
    }, 100);
  });
}