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

function insertAfter(newElement,targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement,targetElement.nextSibling);
	}
}

function preparePlaceholder() {
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;

	//create the placeholder container:
	var placeholderContainer = document.createElement("div");
	placeholderContainer.setAttribute("id","imgBox");

	//create the image placeholder:
	//in CSS styling, it's sometimes necessary to put one div inside another and apply styles to both divs as a group and individually
	//I want to create a styled div (placeholderContainer) on the fly, then insert another styled div (imgBox) inside the first div
//Q: how do I get this "placeholder" div to insert inside the placeholderContainer div? insertInside???
	//placeholder2 = placeholderContainer+placeholder; ?????????????????
	var placeholder = document.createElement("img");
	placeholder.setAttribute("id","placeholder");
	placeholder.setAttribute("src","images/placeholder.jpg");
	placeholder.setAttribute("alt","my image gallery");
	placeholder.setAttribute("width","400");
	placeholder.setAttribute("height","300");
	//W3C VALIDATION FAILS DUE TO UNCLOSED IMG TAG. WHY DOESNT JAVASCRIPT CLOSE THE IMAGE TAG CORRECTLY ???
	//CLOSES IT LIKE THIS: id="placeholder"> INSTEAD OF THIS: id="placeholder" />
	
	//create the description:
	var description = document.createElement("p");
	description.setAttribute("id","description");
	var descriptiontext = document.createTextNode("Choose an image");
	description.appendChild(descriptiontext);

	//create author notification:
	var content = document.getElementById("content");
	var author = document.createElement("p");
	author.setAttribute("id","author");
	var authorText = document.createTextNode("by Ted Dejony");
	author.appendChild(authorText);

	//get the link-container div ready for inserting content into:
	var gallery = document.getElementById("link-container");

	//insert the content into link-container div:
	insertAfter(placeholder,gallery);
	insertAfter(description,placeholder);
	insertAfter(author,content);
}

function prepareGallery() {
	if (!document.getElementsByTagName) {
		return false;
	}
	if (!document.getElementById) {
		 return false;
	}
	if (!document.getElementById("imagegallery")) {
		return false;
	}
	var gallery = document.getElementById("imagegallery");
	var links = gallery.getElementsByTagName("a");
	for ( var i=0; i < links.length; i++) {
		links[i].onclick = function() {
			return showPic(this);
		}
	}
}
function showPic(whichpic) {
	if (!document.getElementById("placeholder")) {
		return true;
	}
	//HTML-DOM method:
	var source = whichpic.href;
	var placeholder = document.getElementById("placeholder");
	if (placeholder.nodeName != "IMG") return true;
	//placeholder.setAttribute("src",source);
	//HTML-DOM method:
	placeholder.src = source;
	if (!document.getElementById("description")) {
		return false;
	}
    //if (whichpic.getAttribute("title")) {
    //  var text = whichpic.getAttribute("title");
    //} else {
    //  var text = "Enter a value in the \"title\" attribute of this link to display it here";
    //}
    //below = Ternary Operator method. Same as above but shorter and more fun to use!
	var text = whichpic.getAttribute("title") ?
	whichpic.getAttribute("title") : "Enter a value in the \"title\" attribute of this link to display it here";
	var description = document.getElementById("description");
	if (description.firstChild.nodeType == 3) {
		description.firstChild.nodeValue = text;
	}
	return false;
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);