function setFirstImage() {
	var thumbnails = document.getElementById('thumbnails').getElementsByTagName('img');
	var firstImage = thumbnails[0];
	var photoId = firstImage.getAttributeNode('id').nodeValue;
	var onclickValue = firstImage.getAttributeNode('onclick').nodeValue;
	var relatedPhotosStart = onclickValue.indexOf(',');
	var relatedPhotos = onclickValue.substring(relatedPhotosStart + 3, onclickValue.length-2);
	changeThumbnail(photoId, relatedPhotos);
}

function changeThumbnail(photoId, relatedPhotos) {
	/* get all thumbnails */
	var thumbnails = document.getElementById('thumbnails').getElementsByTagName('img');
	/* set class of all thumbnails to notSelected */
	for (i = 0; i < thumbnails.length; i++) {
		thumbnails[i].className = "notSelected";
	}
	/* for selected thumbnail, set class to selected */
	document.getElementById(photoId).className = "selected";
	/* change the large photo to the selected image */
	var photoFilename = photoId + "_01";
	var largePhoto = document.getElementById('photo').getElementsByTagName('img');
	largePhoto[0].src = "/portfolio/images/" + photoFilename + ".jpg";
	/* change title of large photo to alt text of selected image */
	var photoTitleText = document.getElementById(photoId).getAttribute('alt');
	var photoTitle = document.getElementById('title');
	photoTitle.firstChild.nodeValue = photoTitleText;
	/* get the related photos element */
	var relatedThumbnails = document.getElementById('relatedThumbnails');
	/* remove any old related thumbnails */
	while (relatedThumbnails.childNodes[0]) {
		relatedThumbnails.removeChild(relatedThumbnails.childNodes[0]);
	}
	/* add any new related thumbnails */
	if (relatedPhotos) {
		var relatedPhotos = photoFilename + relatedPhotos;
		var relatedViews = relatedPhotos.split(',');
		for (i = 0; i < relatedViews.length; i++) {
			var viewInfo = relatedViews[i].split('/');
			var newImage = document.createElement('img');
			newImage.id = viewInfo[0];
			if (i != 0) {
				newImage.className = "notSelected";
			}
			else {
				newImage.className = "selected";
			}
			newImage.src = "/portfolio/images/" + viewInfo[0] + ".jpg";
			newImage.width = "100";
			newImage.height = "100";
			newImage.alt = viewInfo[1];
			var newThumbnail = relatedThumbnails.appendChild(newImage);
			addEventSimple(newThumbnail,'mouseover',thumbMouseover);
			addEventSimple(newThumbnail,'mouseout',thumbMouseout);
			addEventSimple(newThumbnail,'click',thumbClick);			
		}
	}
}

function changeRelated(photoId) {
	/* get all thumbnails */
	var thumbnails = document.getElementById('relatedThumbnails').getElementsByTagName('img');
	/* set class of all thumbnails to notSelected */
	for (i = 0; i < thumbnails.length; i++) {
		thumbnails[i].className = "notSelected";
	}
	/* for selected thumbnail, set class to selected */
	document.getElementById(photoId).className = "selected";
	/* change the large photo to the selected image */
	var largePhoto = document.getElementById('photo').getElementsByTagName('img');
	largePhoto[0].src = "/portfolio/images/" + photoId + ".jpg";
}

function addEventSimple(obj,evt,fn) {
	if (obj.addEventListener) {
		obj.addEventListener(evt, fn, false);
	}
	else if (obj.attachEvent) {
		obj.attachEvent('on'+evt,fn);
	}
}

function thumbMouseover(e){
	var evt = e || window.event;
	var evtTarget = evt.target || evt.srcElement;
	evtTarget.style.cursor='pointer';
}

function thumbMouseout(e) {
	var evt = e || window.event;
	var evtTarget = evt.target || evt.srcElement;
	evtTarget.style.cursor='';
}

function thumbClick(e) {
	var evt = e || window.event;
	var evtTarget = evt.target || evt.srcElement;
	changeRelated(evtTarget.id)
}