var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

var coll = document.getElementsByClassName("clusters");
var x;

var wordlist = [
  'one',
  'two',
  'three',
  'four',
  'five',
  'six',
  'seven',
  'eight',
  'nine',
  'ten'
]

for (x = 0; x < coll.length; x++) {
  coll[x].addEventListener("click", function(x) {
    
    let clusters = document.getElementsByClassName("clusters");
    
    [].forEach.call(clusters, function(cluster) {
        cluster.classList.remove("active");
     });
    
    this.classList.add("active");
    
    if (x.target.id == "cluster1"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex2, .hex3');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
      
    } else if (x.target.id == "cluster2"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex1, .hex4, .hex5');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
               
    } else if (x.target.id == "cluster3"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex6');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
               
    } else if (x.target.id == "cluster4"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex3, .hex7');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
               
    } else if (x.target.id == "cluster5"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex8, .hex9');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
               
    } else if (x.target.id == "cluster6"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex10, .hex11');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
               
    } else if (x.target.id == "cluster7"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex1, .hex4, .hex8, .hex10');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
               
    } else if (x.target.id == "cluster8"){
      
      let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex2, .hex3, .hex9, .hex11');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
               
    } else if (x.target.id == "cluster9"){
      
     let hexes = document.getElementsByClassName('hex');
      
     [].forEach.call(hexes, function(hex) {
        hex.classList.remove("active");
     });
      
     let elems = document.querySelectorAll('.hex4, .hex5, .hex6');
      
     [].forEach.call(elems, function(elem, index) {
        elem.classList.add("active");
        elem.getElementsByClassName('title')[0].innerHTML = wordlist[index];
     });
       
    }
  });
}