function buildPortfolio() {
	// Set up some variables:
	var portfolioList = document.getElementById('portfolio_list');
	var portfolioListItems = portfolioList.getElementsByTagName('li');
	var thumbnailArray = new Array();	
	
	// First off, we're going to want to set a class on the parent list--this
	// should minimize the 'flash' of content on page load:
	portfolioList.className = 'js';
	
	// First, we're going to loop quickly through the list items to turn off
	// all but the first of them (we do this separately so that it happens
	// as QUICKLY as possible):
	for (var i=1; i<portfolioListItems.length; i++) {
		portfolioListItems[i].style.display = 'none';
	}
	
	// Once we've done that, we can create a new element after the ol to hold the
	// new images. First off, we need to find out the parent of the ol:
	var parentContainer = portfolioList.parentNode;
	
	// Then create another element just after it
	var imageDiv = document.createElement('div');
	imageDiv.id = "js_imageDiv";
	parentContainer.appendChild(imageDiv);
	
	
	// Next, we'll loop through the list items again to do the heavy lifting:
	for (var j=0; j<portfolioListItems.length; j++) {		
		// To start with, we'll load a thumbnail image for each of the bigger ones,
		// but first we need to build the path. To start, get the image and cache
		// the value of the src attribute:
		var currentImage = portfolioListItems[j].getElementsByTagName('img')[0];
		var currentImageSrc = currentImage.src;
		
		// Then, split the src value of full-sized image by the final occurrence
		// of '/':
		var currentImageFinalSlashPosition = currentImageSrc.lastIndexOf('/');
		
		// Check to see if we were ABLE to split the string:
		if (currentImageFinalSlashPosition != -1) {
			// Get part 1 and 2 of the image path using substr:
			var currentImageFileName = currentImageSrc.substr(currentImageFinalSlashPosition+1);
			var currentImagePath = currentImageSrc.substr(0,currentImageFinalSlashPosition+1);
		} else {
			// If the path was e.g. just the image name--this is really the only way
			// that the .src property will contain no slashes--set the file name of
			// the current image to the complete value of the .src property, and the
			// path to an empty string:
			var currentImageFileName = currentImageSrc;
			var currentImagePath = '';
		}
		
		// Now we can insert a blank image into the document, and set its background image
		// to the thumbnail version of the current image. We do it this way so we can have 
		// fine-grained control over the mouseover effect from inside the CSS file:
		
		// First, create the image and set its src attribute:
		var clearGif = new Image();
		clearGif.src = currentImagePath + 'clear.gif';
		
		// Set this to a variable, we'll need it a couple of times:
		var humanIntelligibleNumber = j+1;
		
		// Now, we set some of the attributes of the image element--including the background-image
		// of the image:
		clearGif.alt = 'thumbnail ' + humanIntelligibleNumber;
		clearGif.style.backgroundImage = 'url(' + currentImagePath + 't_' + currentImageFileName + ')'
				
		// Because this function gets called onload, we can assume that the highlighted thumbnail is
		// the FIRST one in the series. Therefore, we'll just set a classname on it so it's active
		// as soon as it's inserted into the document:
		if (j == 0) {
			clearGif.className = 'js_active';
		}
				
		// Now we need to create a LINK for the image to live in. We need to set:
		// 	1. The href attribute--this goes to one of the main images
		//	2. The className property--this lets us style any given image in the series differently
		//	3. The onclick event--this calls a function named 'swapMainImage'
		// Then, we need to add the new image into the link.
		var tempLink = document.createElement('a');
		tempLink.href = '#portfolio_' + humanIntelligibleNumber;
		tempLink.className = 'js_thumbnail_' + humanIntelligibleNumber;
		tempLink.onclick = swapMainImage;
		tempLink.appendChild(clearGif);
		
		// Once that's done, we can just pop it into the div we've prepared, and that's it for
		// this function:
		imageDiv.appendChild(tempLink);				
	}
}

// This is the function that actually does the work when we click a link:
function swapMainImage() {
	// Get the list items again:
	var portfolioListItems = document.getElementById('portfolio_list').getElementsByTagName('li');
	var thumbnailImages = document.getElementById('js_imageDiv').getElementsByTagName('img');
	
	// Do some jiggery-pokery on the incoming href value to get the list item to SHOW--
	// we can just hide the rest:
	var listItemNumber = this.href.substr(this.href.lastIndexOf('_')+1)-1;
	
	// Then loop through the items:
	for(var i=0; i<portfolioListItems.length; i++) {
		if (i != listItemNumber) {
			// Hide the non-current item:
			portfolioListItems[i].style.display = 'none';
			// Turn off the 'js_active' class on any non-current thumbnails:
			thumbnailImages[i].className = '';
		} else {
			// Then show the current item:
			portfolioListItems[i].style.display = 'block';
			// And set the current thumbnail's class name in a useful way:
			thumbnailImages[i].className = 'js_active';
		}
	}
	
	// Don't follow the link :)
	return false;
}