function showPic(whichpic) {
	if (!document.getElementById("placeholder")) return true;
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);

	if (!document.getElementById("description")) return false;
	if (whichpic.getAttribute("title")) {
		var text = whichpic.getAttribute("title");
	} else {
		var text = "";
	}
	var description = document.getElementById("description");
	if (description.firstChild.nodeType == 3) {
		description.firstChild.nodeValue = text;
	}
	return false;
}


function preparePlaceholder() {
	/* Create div to show image and prep gallery
	 * that degrades if javascript is not on */
	// test browser
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementById) return false;
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById("leftside")) return false;
	if (!document.getElementById("rightside")) return false;
	
	// make image that holds thumbnail's larger version
	var placeholder = document.createElement("img");
	placeholder.setAttribute("id","placeholder");
	
	// place a temp image
	placeholder.setAttribute("src","images/placeholder_sml.gif");
	placeholder.setAttribute("alt","my image gallery");
	
	// create a caption
	var description = document.createElement("p")
	description.appendChild( document.createTextNode("larger view") );
	description.setAttribute("id","description"); // #description has CSS rules

	// create div to hold image
	var gallery = document.createElement("div");
	gallery.setAttribute("id","gallery"); // #gallery has CSS rules
	
	// add elements to html
	var rightside = document.getElementById("rightside");
	//alert(gallery.id);
	
	gallery.appendChild(description);
	gallery.appendChild(placeholder);
	rightside.appendChild(gallery);
	
	
}
var bigPic = []; // global array of preloaded big images
function prepareGallery() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("gallery")) return false;
	if (!document.getElementById("leftside")) return false;
	var newPic;
  
	// get references
	var gallery = document.getElementById("gallery");
	var ul = document.getElementById("leftside").getElementsByTagName("ul")[0];
	var links = ul.getElementsByTagName("a");
  
  
	// add new behaviors to images
	for ( var i=0; i < links.length; i++) {
		links[i].onclick = function() {
			return showPic(this);
		} // end onclick
		// preload large images
		bigPic[i] = new Image();
		bigPic[i].src = links[i].href;
	}// end foor loop
  
  
	// add hover effects, because of IE6
	 var imgs = ul.getElementsByTagName("img");
	for (var j=0; j<imgs.length; j++) {
		imgs[j].onmouseover = function() { this.style.borderColor="#CC0000"; }
		imgs[j].onmouseout = function() { this.style.borderColor="#666666"; }
	}
  
	// replace placeholder image with first large image
	var firstPic = bigPic[0];
	var placeholder = document.getElementById("placeholder");
  
	// fix for IE6
	placeholder.removeAttribute("width");
	placeholder.removeAttribute("height");
	
	
	placeholder.setAttribute("src",firstPic.src);
	
	if (!document.getElementById("description")) return false;
	if (links[0].getAttribute("title")) {
    	var text = links[0].getAttribute("title");
	} else {
		var text = "";
	}
	var description = document.getElementById("description");
	if (description.firstChild.nodeType == 3) {
		description.firstChild.nodeValue = text;
	}
	
}


addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);