// Generic function for replacing the source image in an <img> tag
function replace_image(img_name,img_src,alt_text) {
    document.getElementById(img_name).src=img_src;
	document.getElementById(img_name).alt=alt_text;
}


function replace_piece(id, caption) {

    replace_image('thumbnail', 'images/installations/thumbnails/'+id+'.jpg');   

    document.getElementById('zoom_link1').href = 'images/installations/full_size/full.'+id+'.jpg';
   	document.getElementById('zoom_link1').alt = caption;

    document.getElementById('zoom_link2').href = 'images/installations/full_size/full.'+id+'.jpg';
  	document.getElementById('zoom_link2').alt = caption;

	// Hide all div's with class 'details'
    var inputs = document.getElementsByTagName('div'); 
	for(var k=0;k<inputs.length;k++) {
		if (inputs[k].className == 'details') {
			inputs[k].style.display = 'none';
		}
	}

	// Show the appropriate details div
	document.getElementById('piece_'+id).style.display = 'block';


	// Turn off highlight for all menu labels
    var inputs = document.getElementsByTagName('span'); 
	for(var k=0;k<inputs.length;k++) {
		if (inputs[k].id.substr(0, 9) == 'menu_item') {
			inputs[k].className = 'no_highlight';
		}
	}

	// Highlight the appropriate menu label
	var menu_item = document.getElementById("menu_item_" + id);	
	menu_item.className = 'highlight';
			
}