function setImage(index) {
  var elImage = document.getElementById("gallery-image");

  var image = images[index];
  elImage.src = base + image["src"];
  elImage.alt = image["alt"];

  document.getElementById("gallery-caption").innerHTML = image["caption"];
}

function nextImage() {
  if (currentImage >= (images.length - 2)) return false;
  currentImage++;
  activateButtons();
  setImage(currentImage);
}

function prevImage() {
  if (currentImage <= 0) return false;
  currentImage--;
  activateButtons();
  setImage(currentImage);
}

function showImage(index) {
  currentImage = index;
  document.getElementById("gallery-image").src = "images/common/blank.png";
  setImage(index);
  activateButtons();
  document.getElementById("gallery-thumbs").style.display = "none";
  document.getElementById("gallery-image-container").style.display = "block";

}

function closeImage() {
  document.getElementById("gallery-thumbs").style.display = "block";
  document.getElementById("gallery-image-container").style.display = "none";
}

function activateButtons() {
  // do previous button
  var elPrevImage = document.getElementById("gallery-prev-image");
  if (currentImage <= 0) {
    elPrevImage.className = "inactive";
    elPrevImage.src = "images/common/prev-grey.png";
  }
  else {
    elPrevImage.className = "active";
    elPrevImage.src = "images/common/prev-red.png";
  }

  // do next button
  var elNextImage = document.getElementById("gallery-next-image");
  if (currentImage >= (images.length - 2)) {
    elNextImage.className = "inactive";
    elNextImage.src = "images/common/next-grey.png";
  }
  else {
    elNextImage.className = "active";
    elNextImage.src = "images/common/next-red.png";
  }
}

function mouseOver(elImage) {
  if (elImage.className == "inactive") return false;

  if (elImage.id == "gallery-prev-image") {
    elImage.src = "images/common/prev-hover.png";
  }
  else if (elImage.id == "gallery-next-image") {
    elImage.src = "images/common/next-hover.png";
  }
  else if (elImage.id == "gallery-stop-image") {
    elImage.src = "images/common/stop-hover.png";
  }
}

function mouseOut(elImage) {
  if (elImage.className == "inactive") return false;

  if (elImage.id == "gallery-prev-image") {
    elImage.src = "images/common/prev-red.png";
  }
  else if (elImage.id == "gallery-next-image") {
    elImage.src = "images/common/next-red.png";
  }
  else if (elImage.id == "gallery-stop-image") {
    elImage.src = "images/common/stop-red.png";
  }
}