function switchView(){
	obj = document.getElementById("controls");
	tempVar = obj.getElementsByTagName("a");
	for(i=0;i<dls.length;i++){
		dls[i].style.display = "none";
		tempVar[i].className = "";
	}
	dls[this.id].style.display = "block";
	this.className = "current";
	return false;
}

function createCSS(){
	cssVAR = "<style>";
	cssVAR += "#controls {margin:0;padding:0;}";
	cssVAR += "#controls tbody, #controls tr, #controls td{margin:0;padding:0;}";
	cssVAR += "#controls a,#controls a.current {display: block;float: left;padding:2px 10px;margin:0;text-align: center;font-family: Verdana;font-size: 10px;text-decoration: none;color: #333;}";
	cssVAR += "#controls a.current,#controls a.current:hover {background: #6B9ED5;color:#fff;font-weight:bold}";
	cssVAR += "#controls a {background: #ededed;border: 1px solid #6B9ED5;}";
	cssVAR += "#controls a:hover {margin-top: 0;border-color: #666;background: #FFF7CD;}";
	cssVAR += "</style>";
	return cssVAR;
}

function createControls(){
	//document.write(createCSS());//write style sheet to the page
	metadataDiv = document.getElementById("metadata");
	newBODY = document.createElement("tbody"); //done foe IE sake
	newList = document.createElement("table");  //list control created
	newTR = document.createElement("tr");
	newList.setAttribute('id','controls');
	newList.appendChild(newBODY);
	newBODY.appendChild(newTR);
	metadataDiv.parentNode.insertBefore(newList,metadataDiv);
	dls = metadataDiv.getElementsByTagName("div");

	for(i=0;i<dls.length;i++){
		if(i>0){
			dls[i].style.display = "none";
		}
		tempLi = document.createElement('td');//create the li element
		newLink = document.createElement('a');//create the href
		newLink.setAttribute('href','#');
		newLink.setAttribute('id',i);
		if(i==0){newLink.className = 'current';}
		newLink.onclick = switchView;
		linkText=document.createTextNode(dls[i].id);
		newLink.appendChild(linkText);
		tempLi.appendChild(newLink);
		newTR.appendChild(tempLi);//add the new li to the ul
	}
}

function initControls() {
	//check to make sure the browser can handle the script and the target div exists
	if (document.getElementById && document.getElementsByTagName && document.createTextNode && document.getElementById("metadata")) {
		createControls();
	}
}


//Assumes the image being switched is in the same directory as the new image
function changeImage(imageObj, newImageName)
{
  var imageDir = imageObj.src.substring(0,imageObj.src.lastIndexOf('/'));
  imageObj.src = imageDir + "/" + newImageName;
}