/* ~ ~ ~ ~ ~ Image gallery functions to create a polished image gallery from a list of images ~ ~ ~ ~ ~ */

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
} // Major improvement to the onload event, allowing you to load multiple functions "onload"

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
} /* Ready-bake function to allow a fully formed element to be added after an html element
	// ...fills in a missing method from the DOM */

function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imageGallery")) return false; // Makes sure the browser understands DOM methods

  var container = document.createElement("p");
  container.setAttribute("id","container"); // Creates am Id'ed containing <p> for the placeholder image 

  var placeholder = document.createElement("img");
  placeholder.setAttribute("id","placeholder");
  placeholder.setAttribute("src","images/placeholder.gif");
  placeholder.setAttribute("alt","my image gallery"); // Builds the placeholder <img> tag

  var description = document.createElement("p");
  description.setAttribute("id","description"); // Builds the description <p> tag
  var desctext = document.createTextNode("Choose an image");
  description.appendChild(desctext); // Creates the descriptive text for the description <p>

  var gallery = document.getElementById("imageGallery"); // Stores the gallery in a plain-language variable

  insertAfter(container,gallery); // Adds a <p> container tag after the gallery list
  container.appendChild(placeholder); // Adds the placeholder <img> inside the <p> container tag
  insertAfter(description,container); // Adds the descriptive text after the image
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imageGallery")) return false; // Verifies browser recognition of DOM methods

  var gallery = document.getElementById("imageGallery"); // Gets and stores the imageGallery list

  var links = gallery.getElementsByTagName("a"); // Gets the image links
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this); // A loop to make the img links call showPic()
	}
    links[i].onkeypress = links[i].onclick; // Sets a key press to trigger onclick also 
  }
}

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href"); // Identifies clicked picture and gets its href

  var placeholder = document.getElementById("placeholder"); // Stores the placeholder's information
  placeholder.setAttribute("src",source); // Sets the placeholder src to the above href "source"

  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title"); // Stores the title text of the picture
  } else {
    var text = "";
  }
  var description = document.getElementById("description");

  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;  // Sets the title to the desc. <p> created in preparePlaceholder()
  }
  return false;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);