//This function allows you to queue up functions to be executed.
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
		} else {
			window.onload = function() {
				oldonload();
				func();
				}
	}
}
//create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
	//target is what you want it to go after. Look for this elements parent.
	var parent = targetElement.parentNode;
 
	//if the parents lastchild is the targetElement...
	if(parent.lastchild == targetElement) {
		//add the newElement after the target element.
		parent.appendChild(newElement);
		} else {
		// else the target has siblings, insert the new element between the target and it's next sibling.
		//syntax for insertBefore: parentElement.insertBefore(newElement, targetElement);
		parent.insertBefore(newElement, targetElement.nextSibling);
		}
}
 
function preparePlaceholder() {
		//checks to make the script degrade if methods not supported.
		if(!document.createElement) return false;
		if(!document.createTextNode) return false;
		if(!document.getElementById) return false;
		if(!document.getElementById("list")) return false;
 
		var imageElement = document.createElement("img");
		imageElement.setAttribute("src","images/placeholder.jpg");
		imageElement.setAttribute("id", "placeholder");
		imageElement.setAttribute("alt", "Placeholder image");
 
		var descriptionPara = document.createElement("p");
		descriptionPara.setAttribute("id", "description");
		var desText = document.createTextNode("This is a description.");
		descriptionPara.appendChild(desText);
 
		//uses the insertAfter function above.
		var gallery = document.getElementById("list");//grab the ul list.
		insertAfter(imageElement,gallery);//insert the placeholder AFTER the list.
		insertAfter(descriptionPara, imageElement);//insert the description AFTER the placeholder image.
}
 
function applyEvent() {
	//Browser check to see if they are supported.
	if(!document.getElementById || !document.getElementsByTagName) return false;
	//Check to see that the elements exist.
	if (!document.getElementById("list")) return false;
	var list = document.getElementById("list");
	if (!list.getElementsByTagName("a")) return false;
	var links = list.getElementsByTagName("a");
	for (i=0; i < links.length; i++) {
		links[i].onclick = function() {
			return swapImg(this);
		}
	}
	function swapImg(selectedLink) {
		var source = selectedLink.getAttribute("href");//or selectedLink.href
		//if placeholder doesn't exist(no image on page), return true so the link clicks through.
		if (!document.getElementById("placeholder")) return true;
		//what if the id placeholder isn't on an image, make the link follow through.
		if (document.getElementById("placeholder").nodeName != "IMG") return true;
		var placeHolder = document.getElementById("placeholder");
		placeHolder.setAttribute("src", source);//or placeHolder.src = source.
 
		if (!document.getElementById("description")) return false;
		var description = document.getElementById("description");
		//if the link has a title, grab it, else set the variable to nothing.
		//variable = condition ? if true : if false; Ternary operator.
		var grabTitle = selectedLink.getAttribute("title") ? selectedLink.getAttribute("title") : " ";//or var grabTitle = selectedLink.title ? selectedLink.title : " ";
		//if the description firstchild is a text node, allow it to set the variable.
		if(description.firstChild.nodeType == 3) {
			description.firstChild.nodeValue = grabTitle; 
			} 
		//if it gets to here, this will stop the link clicking.
		return false;
	}	
}
addLoadEvent(applyEvent);
addLoadEvent(preparePlaceholder);