function setup () {

	
	// get reference to thumbContainer
	var infoContainer = document.getElementById("navContainer"); 
	//var thumbContainer = document.getElementById("thumbnailContainer1");
	var imgContainer = document.getElementById("PictureBox");
	var captionContainer = document.getElementById("caption");
	var picContainer = document.getElementById("lgimgs");
	//var navBtnContainer = document.getElementById("navButtons");
	var docStyles = document.styleSheets[0];


/* CREATE FOR PEOPLE WITH JAVASCRIPT */
	
	
//set height of containers
	//document.getElementById('container').className = "enhancedContainer";
	//document.getElementById('navContainer').className = "enhancedNavContainer";
	//document.getElementById('PictureBox').className = "enhancedPictureBox";

//set image sizes
	var imageArray = infoContainer.getElementsByTagName('img');
	for (i=0; i<imageArray.length;i++) {
		if (imageArray[i].parentNode.tagName.toLowerCase() == "a") {
		//imageArray[i].width = thumbSize;
		//imageArray[i].height = thumbSize;
		imageArray[i].parentNode.className = "thumbnailBox";
		imageArray[i].style.display = "block";
		}
	}
	
//create navButton div 
	var navBtnContainer = document.createElement('div');
	navBtnContainer.id = "navButtons";
	navBtnContainer.innerHTML = '<a href="javascript:;" class="outOfUse">Back</a>  |  <a href="javascript:;">Next</a>';
	infoContainer.insertBefore(navBtnContainer,infoContainer.firstChild);
	
	
	//imgContainer.innerHTML ="";
//create PictureBox img 
/*	var mainImg = document.createElement('img');
	mainImg.src = "images/1.jpg";
	mainImg.id = "mainImg";
	imgContainer.appendChild(mainImg);*/
	//imgContainer.innerHTML = imgContainer.innerHTML + "<div id=\"cwlogo\"></div>";
	
	//remove caption text from lgimg li's
	var picArray = picContainer.getElementsByTagName('li');
	for (i=0; i<picArray.length;i++) {
		picArray[i].innerHTML = "<img id=\"imgLg" + (i+1) + "\" src=\"images/" + (i+1) + ".jpg\" style=\"display: none;\"/>";
	}
	picContainer.style.display = "block";
	
	
//add selected class to first thumbnail image
	document.getElementById('img1').parentNode.className = "thumbnailBox selected";
	document.getElementById('imgLg1').style.display = "block";
	
	if (Caption != null) {
		captionContainer.innerHTML = Caption[0];
	}
//set size of img divs - this keeps things from moving with the img is enlarged
	//SET THIS LATER USING A LOOP TO FIND
//	docStyles.cssRules[17].style.setProperty('width','80px','');
	//docStyles.cssRules[17].style.setProperty('height','80px','');
	
	
	
	/*var i=oDivs.length; while(i-->0) 
	{ oDivs[i].className = "myNewClass"; }*/
	
	
	
/* START EVENT CONTROLLERS */
	

		// to do when img clicked
	infoContainer.onclick = function(e){
		
		var t = getTarget(e); // gets clicked object
		if (t.tagName.toLowerCase() == "img") {
			updateThumbnail(t);
			var thisThumbNum = Number(t.id.substring(3,t.id.length));
			updatePicture(thisThumbNum);
			currentImg = thisThumbNum;
			
			updateNavBtns();
		}
		

	}
	
	
	
	
	
	
	function updateThumbnail(t) {
		var thisThumb = t;
		for (i=0; i<infoContainer.getElementsByTagName('a').length; i++) {
				var thisTag = infoContainer.getElementsByTagName('a')[i];
				if(t.parentNode != thisTag) {
					thisTag.className = "thumbnailBox";
				} else if (t.parentNode == thisTag) {
					thisTag.className = "thumbnailBox selected";
				}
			}
	}
	
	
	function updatePicture(imgNum) {
		
		for (i=0; i<picArray.length;i++) {
		if(i==(imgNum-1)) {
				picArray[i].getElementsByTagName('img')[0].style.display = "block";
				   }else {
				picArray[i].getElementsByTagName('img')[0].style.display = "none";
				   }
	}
		
		
		/*var mainImageSrc =  "images/" + imgNum + ".jpg";
	document.getElementById("mainImg").src = mainImageSrc;*/
	if (Caption != null) {
		captionContainer.innerHTML = Caption[imgNum-1];
	} 
	return;
	}
	
	function updateNavBtns() {
		if (currentImg == 1) {
			navBtnContainer.getElementsByTagName('a')[0].className = "outOfUse";
			navBtnContainer.getElementsByTagName('a')[1].className = "";
		} else if (currentImg == numImages) {
			navBtnContainer.getElementsByTagName('a')[1].className = "outOfUse";
			navBtnContainer.getElementsByTagName('a')[0].className = "";
		} else {
			for (i=0; i < navBtnContainer.getElementsByTagName('a').length; i++) {
				navBtnContainer.getElementsByTagName('a')[i].className = "";
			}
		}
	}
	
	
	
	// to do when next/back clicked
	navBtnContainer.onclick = function(e){
		var t = getTarget(e); // gets clicked object

		
		if (t.innerHTML == "Back" && t.parentNode.className != "outOfUse") {
			if (currentImg != 1) {
				updatePicture(currentImg -1);
				updateThumbnail(document.getElementById('img' + (currentImg-1)));
				currentImg--;
			} else {
				null;
			}
		} else if (t.innerHTML == "Next" && t.parentNode.className != "outOfUse") {
			if (currentImg != numImages) {
				updatePicture(currentImg +1);	
				currentImg++;
				updateThumbnail(document.getElementById('img' + (currentImg)));
			} else {
				null;
			}
		}
		
		updateNavBtns();

	}




	function getTarget(x){ // here's the magic, really simple stuff
		x = x || window.event;
		return x.target || x.srcElement;
	}

};
	

window.onload = setup;