function fourColumRow(gallery, entries, i) {
  let entry1 = document.createElement("div");
  entry1.classList.add("col-lg-6", "m-0", "p-0");
  entry1.appendChild(entries[i].cloneNode(true));
  entry1.children[0].classList.add("img-type-1");
  gallery.appendChild(entry1);
  i++;

  let entry2 = document.createElement("div");
  entry2.classList.add("col-lg-3", "m-0", "p-0");
  entry2.appendChild(entries[i].cloneNode(true));
  entry2.children[0].classList.add("img-type-1");
  gallery.appendChild(entry2);
  i++;

  let entry3 = document.createElement("div");
  entry3.classList.add("col-lg-3", "m-0", "p-0");
  entry3.appendChild(entries[i].cloneNode(true));
  entry3.children[0].classList.add("img-type-2");
  i++;
  entry3.appendChild(entries[i].cloneNode(true));
  entry3.children[1].classList.add("img-type-2");
  gallery.appendChild(entry3);
  i++;
}

function fourColumnReversedRow(gallery, entries, i) {
  let entry1 = document.createElement("div");
  entry1.classList.add("col-lg-3", "m-0", "p-0");
  entry1.appendChild(entries[i].cloneNode(true));
  entry1.children[0].classList.add("img-type-2");
  i++;
  entry1.appendChild(entries[i].cloneNode(true));
  entry1.children[1].classList.add("img-type-2");
  gallery.appendChild(entry1);
  i++;

  let entry2 = document.createElement("div");
  entry2.classList.add("col-lg-3", "m-0", "p-0");
  entry2.appendChild(entries[i].cloneNode(true));
  entry2.children[0].classList.add("img-type-1");
  gallery.appendChild(entry2);
  i++;

  let entry3 = document.createElement("div");
  entry3.classList.add("col-lg-6", "m-0", "p-0");
  entry3.appendChild(entries[i].cloneNode(true));
  entry3.children[0].classList.add("img-type-1");
  gallery.appendChild(entry3);
  i++;
}

function threeColumnRow(gallery, entries, i) {
  console.log(i);
  let entry1 = document.createElement("div");
  entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
  entry1.appendChild(entries[i].cloneNode(true));
  entry1.children[0].classList.add("img-type-1");
  gallery.appendChild(entry1);
  i++;

  let entry2 = document.createElement("div");
  entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
  entry2.appendChild(entries[i].cloneNode(true));
  entry2.children[0].classList.add("img-type-1");
  gallery.appendChild(entry2);
  i++;

  let entry3 = document.createElement("div");
  entry3.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
  entry3.appendChild(entries[i].cloneNode(true));
  entry3.children[0].classList.add("img-type-1");
  gallery.appendChild(entry3);
  i++;
}

function threeColumnReversedRow(gallery, entries, i) {
  let entry1 = document.createElement("div");
  entry1.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
  entry1.appendChild(entries[i].cloneNode(true));
  entry1.children[0].classList.add("img-type-1");
  gallery.appendChild(entry1);
  i++;

  let entry2 = document.createElement("div");
  entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
  entry2.appendChild(entries[i].cloneNode(true));
  entry2.children[0].classList.add("img-type-1");
  gallery.appendChild(entry2);
  i++;

  let entry3 = document.createElement("div");
  entry3.classList.add("col-lg-6", "col-md-3", "m-0", "p-0");
  entry3.appendChild(entries[i].cloneNode(true));
  entry3.children[0].classList.add("img-type-1");
  gallery.appendChild(entry3);
  i++;
}

function twoColumnRow(gallery, entries, i) {
  let entry1 = document.createElement("div");
  entry1.classList.add("col-6", "m-0", "p-0");
  entry1.appendChild(entries[i].cloneNode(true));
  entry1.children[0].classList.add("img-type-1");
  gallery.appendChild(entry1);
  i++;

  let entry2 = document.createElement("div");
  entry2.classList.add("col-6", "m-0", "p-0");
  entry2.appendChild(entries[i].cloneNode(true));
  entry2.children[0].classList.add("img-type-1");
  gallery.appendChild(entry2);
  i++;
}

function singleColumnRow(gallery, entries, i) {
  let entry1 = document.createElement("div");
  entry1.classList.add("col-12", "m-0", "p-0");
  entry1.appendChild(entries[i].cloneNode(true));
  entry1.children[0].classList.add("img-type-1");
  gallery.appendChild(entry1);
  i++;
}

function showAchievements() {
  // show achievements from achievements-holder div
  let gallery = document.getElementById("gallery");
  if (gallery == null) {
    return
  }
  gallery.innerHTML = "";
  const entries = document.getElementById("achievements-holder").children;
  let len = entries.length;
  let i = 0;
  let rowNumber = 1;
  while (i < len) {
    if (isLaptop) {
      if (i + 4 <= len) {
        if (rowNumber % 2) {
          fourColumRow(gallery, entries, i);
        } else {
          fourColumnReversedRow(gallery, entries, i);
        }
        i += 4;

      } else if (i + 3 <= len) {
        if (rowNumber % 2) {
          threeColumnRow(gallery, entries, i);
        } else {
          threeColumnReversedRow(gallery, entries, i);
        }
        i += 3;
      } else if (i + 2 <= len) {
        twoColumnRow(gallery, entries, i);
        i += 2;
      } else {
        singleColumnRow(gallery, entries, i);
        i++;
      }
    } else if (isTablet) {
      if (i + 2 <= len) {
        twoColumnRow(gallery, entries, i);
        i += 2;
      } else {
        singleColumnRow(gallery, entries, i);
        i++;
      }
    } else {
      singleColumnRow(gallery, entries, i);
      i++;
    }
    rowNumber++;
  }

  // show full image on click
  let elements = document.getElementsByClassName("achievement-entry");
  len = elements.length;
  for (let i = 0; i < len; i++) {
    elements[i].onclick = function () {
      let achievements = document.getElementsByClassName("achievement-entry");
      let len2 = achievements.length;
      for (let j = 0; j < len2; j++) {
        achievements[j].classList.toggle("hidden");
      }
      this.classList.toggle("achievement-details");
      this.classList.toggle("hidden");
      this.parentElement.classList.toggle("col-lg-12");
      this.parentElement.classList.toggle("col-md-12");
      this.parentElement.classList.toggle("col-sm-12");
      if (this.children["SmallImage"].hasAttribute("active")) {
        let mainLogo = this.children["LargeImage"].getAttribute("Style");
        this.children["LargeImage"].setAttribute("active", true);
        this.children["SmallImage"].removeAttribute("active");

        this.setAttribute("Style", mainLogo);
      } else {
        let mainLogo = this.children["SmallImage"].getAttribute("Style");
        this.children["SmallImage"].setAttribute("active", true);
        this.children["LargeImage"].removeAttribute("active");
        this.setAttribute("Style", mainLogo);
      }

      if (this.children["caption"] != undefined) {
        this.children["caption"].classList.toggle("hidden");
      }
      if (this.children["enlarge-icon"] != undefined) {
        this.children["enlarge-icon"].classList.toggle("fa-search-plus");
        this.children["enlarge-icon"].classList.toggle("fa-times");
      }
      if (this.children["achievement-title"] != undefined) {
        this.children["achievement-title"].classList.toggle("hidden");
      }
    }
  }
}

['DOMContentLoaded', 'resize'].forEach((event) => 
  document.addEventListener(event, showAchievements));