function buildGallery(){
	
	var myImages = getImageArray();
	var imageCount = myImages.length;
	var i=0;
	var imageSrc = "/images/portfolio/";
	var nav=0; // change to 0 to turn off nav elements
	
	/*********************** build main gallery image **********************/

	document.write("<div class='gallery' id='gallery'>");
	document.write("<img src='" + imageSrc + myImages[1] + ".jpg' name='portfolioImage' id='portfolioImage'/>");
	document.write("</div>");


	/*********************** build gallery links **********************/
	document.write("<div class='galleryLinks'>");
	
	if(nav==1){document.write("<a href='javascript:void(0)' onclick='imageControl(0)'> << </a>");}
	
	for (i = 1; i < imageCount - 1; i++){	
		document.write("<a href='javascript:void(0)' onclick='imageControl("+i+")'>" + i + "</a>");
	}
	
	if(nav==1){document.write("<a href='javascript:void(0)' onclick='imageControl(" + (imageCount - 1) + ")'> >> </a>");}
	
	document.write("</div>");
}





	
function imageControl(getImage) {
	var getImage = getImage;
	var myImages = getImageArray();
	var imageCount = myImages.length;
	var imageHolder = document.getElementById("gallery");
	var popUpImage = document.getElementById("popUpImage");
	var showImage = 0;
	var imageSrc = "/images/portfolio/";
	var currentImage;
	
	if (currentImage ==""){currentImage = 1;}

	if (getImage){

		showImage = getImage;

		if (getImage == 0){ 
			showImage = getImage - 1;
			}
		if (getImage == imageCount){ 
			showImage = getImage + 1; 
			}
			
			
		if (getImage > imageCount){
			showImage=1 ; 
			}
		if (getImage < 1){ 
			showImage = imageCount-1; 
			}
		currentImage = showImage;	
	}	
	
	var popUpHTML = imageSrc + myImages[showImage] + "_large.jpg";
	var imageHolderHTML = "<a href='javascript:void(0)' onclick='openImageOverlay()'><img src='" + imageSrc + myImages[showImage] + ".jpg' /></a>";
	
	imageHolder.innerHTML = imageHolderHTML;
	popUpImage.src = popUpHTML;
	

}



function openImageOverlay(){
	var overlay1 = document.getElementById("gray-overlay");
	var overlay2 = document.getElementById("overlayContainer");
	overlay1.style.display = "block";
	overlay2.style.display = "block";
}

function closeImageOverlay(){
	var overlay1 = document.getElementById("gray-overlay");
	var overlay2 = document.getElementById("overlayContainer");
	overlay1.style.display = "none";
	overlay2.style.display = "none";
}