function initBrowse() {
  if (!document.getElementById) return false;
  if (!document.getElementById("forward")) return false;
  if (!document.getElementById("back")) return false;

  // First, let's attach the onclick event handlers to the browse buttons 
  // and assign functions to those actions...

  var rightArrow = document.getElementById("forward");
  var leftArrow = document.getElementById("back");
  rightArrow.onclick = moveThumbsForward;
  leftArrow.onclick = moveThumbsBack;
}

function toggleArrows() {
  if (!document.getElementById) return false;
  if (!document.getElementById("forward")) return false;
  if (!document.getElementById("back")) return false;
  if (!document.getElementById("browse")) return false;
  if (!document.getElementById("thumbs")) return false;

  // ...then let's decide which browse buttons are needed, if any.

  var rightArrow = document.getElementById("forward");
  var leftArrow = document.getElementById("back");
  var browse = document.getElementById("browse");
  var thumbs = document.getElementById("thumbs");
  var totalThumbs = thumbs.getElementsByTagName("li").length;
  
  // If there are more than six thumbnails, make the browse buttons visible.
  // (By default, the CSS hides them.)

   if (totalThumbs > 6) {
    browse.style.visibility = "visible";
    } else {
      return true;
  }
  
  // Make a number out of the current left value for the thumbs list.
  // If the value's not a number (ie. when first entering the page), hide the left button.

  var left = parseInt(thumbs.style.left);
  
  if (isNaN(left)) {
    leftArrow.style.visibility = "hidden";
    } else {
      return true;
  }
}

function moveThumbsForward() {
  if (!document.getElementById) return false;
  if (!document.getElementById("forward")) return false;
  if (!document.getElementById("back")) return false;
  if (!document.getElementById("thumbs")) return false;

  // Now, let's define what a click on the forward button will do.

  var rightArrow = document.getElementById("forward");
  var leftArrow = document.getElementById("back");
  leftArrow.style.visibility = "visible";
  var browse = document.getElementById("browse");
  var thumbs = document.getElementById("thumbs");
  var left = thumbs.style.left;
  var totalThumbs = thumbs.getElementsByTagName("li").length;

  // If there is no value for left (ie. when first entering the page), give left a value. 

  if (left == "") {
    left = "0px";
  }
	  
  if (left == (totalThumbs - 7) * (-95) + "px") {
    leftInt = parseInt(left);
    newLeft = leftInt - 95;
    leftStr = newLeft + "px";
    thumbs.style.left = leftStr;
    rightArrow.style.visibility = "hidden";
 
	} else {
	  leftInt = parseInt(left);
	  newLeft = leftInt - 95;
	  leftStr = newLeft + "px";
	  thumbs.style.left = leftStr;
  }
}

function moveThumbsBack() {
  if (!document.getElementById) return false;
  if (!document.getElementById("forward")) return false;
  if (!document.getElementById("back")) return false;
  if (!document.getElementById("thumbs")) return false;

  // Now, let's define what a click on the back button will do.
  // This is the opposite of the moveThumbsForward() function.

  var rightArrow = document.getElementById("forward");
  var leftArrow = document.getElementById("back");
  leftArrow.style.visibility = "visible";
  var thumbs = document.getElementById("thumbs");
  var totalThumbs = thumbs.getElementsByTagName("li").length;
  var left = thumbs.style.left;

  // If the total number of thumbs is anything other than seven, follow this branch. 

  if (left == "") {
    left = "0px";
  }

  if (left == "-95px") {
    leftInt = parseInt(left);
    newLeft = leftInt + 95;
    leftStr = newLeft + "px";
    thumbs.style.left = leftStr;
    leftArrow.style.visibility = "hidden";
    if (totalThumbs == 7) {
      rightArrow.style.visibility = "visible";
    }

	} else {
	  leftInt = parseInt(left);
	  newLeft = leftInt + 95;
	  leftStr = newLeft + "px";
	  thumbs.style.left = leftStr;
	  rightArrow.style.visibility = "visible";
  }
}

function initMeta() {
  if (!document.getElementById) return false;
  if (!document.getElementById("thumbs")) return false;

  // Let's get the meta information for the first thumbnail and put it next to the main image. 
  // Mozilla calls whitespace text the firstChild of thumbs. 
  // If firstChild is not an element (li) node, get the second child instead.

  if (document.getElementById("thumbs").firstChild.nodeType == 1) {
    var firstThumbMeta = document.getElementById("thumbs").firstChild;
  } else {
    var firstThumbMeta = document.getElementById("thumbs").childNodes[1];
  }

  // Then, let's get the meta info paragraphs and call them what they are...

  var metaParas = firstThumbMeta.getElementsByTagName("p");  
  if (metaParas[0]) {
    var title = metaParas[0];
  }
  if (metaParas[1]) {
    var loc = metaParas[1];
  }
  if (metaParas[2]) {
    var date = metaParas[2];
  }

  // ...so we can put them in place.
  // (The source HTML starts with an empty img_meta div, so we don't need to clear it.)

  var holder = document.getElementById("img_meta");
  if (title) {
    var newTitle = title.cloneNode(true);
    holder.appendChild(newTitle);
  }
  if (loc) {
    var newLoc = loc.cloneNode(true);
    holder.appendChild(newLoc);
  }
  if (date) {
    var newDate = date.cloneNode(true);
    holder.appendChild(newDate);
  }
  return false;
}

function showMeta(whichmeta) {
  if (!document.getElementById("img_meta")) return false;
  var holder = document.getElementById("img_meta");

  // Let's swap the initial meta info with the meta of a clicked image.
  // Clear out the img_meta div first...

  if (holder.hasChildNodes()) {
    while (holder.childNodes.length >= 1 ){
      holder.removeChild( holder.firstChild );       
    } 
  }
  
  var emptyHolder = document.getElementById("img_meta");

  // ...then get the meta info from the clicked thumb, call it what it is...

  var meta = whichmeta.getElementsByTagName("div");
  var metaParas = whichmeta.getElementsByTagName("p");
  if (metaParas[0]) {
    var title = metaParas[0];
  }
  if (metaParas[1]) {
    var loc = metaParas[1];
  }
  if (metaParas[2]) {
    var date = metaParas[2];
  }

  // ...then clone it. Move the clone so you don't delete the original data.

  if (title) {
    var newTitle = title.cloneNode(true);
    emptyHolder.appendChild(newTitle);
  }
  if (loc) {
    var newLoc = loc.cloneNode(true);
    emptyHolder.appendChild(newLoc);
  }
  if (date) {
    var newDate = date.cloneNode(true);
    emptyHolder.appendChild(newDate);
  }
  return false;
}

function showPic(whichpic) {
  if (!document.getElementById("main_img")) return true;
  
  // Get the source of a thumb's corresponding large image from the thumb's link
  // and swap it with the source of the current main image.
  // Also, use the title of the link as the new main image.
  // (A call to the EE gallery - separate from the thumbs call - is 
  // responsible for bringing the first image in.)

  var source = whichpic.getAttribute("href");
  var title = whichpic.getAttribute("title");
  var placeholder = document.getElementById("main_img");
  placeholder.setAttribute("src",source);
  placeholder.setAttribute("alt",title);

  return false;
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("thumbs")) return false;

  // Let's define what happens when a thumb is clicked.
  // Get the links...

  var gallery = document.getElementById("thumbs");
  var links = gallery.getElementsByTagName("a");

  // ...then attach the onclick handler to all links. When a thumb is clicked,
  // run showPic() and showMeta() from above.

  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      showPic(this);
      return showMeta(this.parentNode);
	}
    links[i].onkeypress = links[i].onclick;
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(initBrowse);
addLoadEvent(initMeta);
addLoadEvent(toggleArrows);
addLoadEvent(prepareGallery);