function toggleDetails(e) {
  var parentElement = e.parentElement
  var detailsElement = parentElement.querySelector(".details");
  console.log(detailsElement.style.display)
  if (detailsElement.style.display === "flex") {
    detailsElement.style.display = "none";
  } else {
    detailsElement.style.display = "flex";
  }
  return false;
}

// Fetch a list of all online player hashes
function getSkins() {
  let xhr = new XMLHttpRequest();
  xhr.open ( "GET",  "getPlayerSkins", true );
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      skins = JSON.parse(xhr.responseText)["skins"];
      skins.forEach(skin_hash => addSkin(skin_hash));
    }
  }
  xhr.send ();
}

// Add a new canvas to the container and render the given skin
function addSkin(hash) {
  var container = document.querySelector("#skin_container");
  var canvas = document.createElement("canvas");
  container.appendChild(canvas);
  canvas.id = hash;
  renderSkin(hash, canvas);
}

// Create a new instance of the renderer in the given canvas with the given hash as player skin
function renderSkin(hash, canvas) {
  let skinViewer = new skinview3d.SkinViewer({
    canvas: canvas,
    width: 60,
    height: 80,
    skin: "/img/skins/" + hash
  });

  let control = skinview3d.createOrbitControls(skinViewer);
  control.enableRotate = false;
  control.enableZoom = false;
  control.enablePan = false;

  let walk = skinViewer.animations.add(skinview3d.WalkingAnimation);
  let rotate = skinViewer.animations.add(skinview3d.RotatingAnimation);
}

window.onload = function () {
  getSkins();
}