function button_init(menuId) {
	buttonRoot = '../images/btn/';
	curButton = '';
	mainimg = document.getElementById('img');
	var menu = document.getElementById(menuId);
	var menuLinks = menu.getElementsByTagName('a');
	detailLink = document.getElementById('detail').getElementsByTagName('a').item(0);
	detailLink.swap = '01a.jpg';
	detailLink.onclick = detail_click;

	if(!document.preload) {
		document.preload = new Array();
	}

	var imgover, imgdown;
	for (var i=0; i<menuLinks.length; i++) {
		if (menuLinks[i].href) {
			menuLinks[i].onmouseover = button_over;
			menuLinks[i].onmouseout = button_out;
			menuLinks[i].onmousedown = button_down;
			menuLinks[i].onmouseup = button_up;
			menuLinks[i].onclick = button_click;
			if (i<9) {
				menuLinks[i].imgnum = '0' + (i+1);
			} else {
				menuLinks[i].imgnum = (i+1);
			}
		} else {
			menuLinks[i].onclick = function () { return false; };
		}
			

		imgover = new Image;
		imgover.src = buttonRoot + menuLinks[i].id + '_over.gif';
		imgdown = new Image;
		imgdown.src = buttonRoot + menuLinks[i].id + '_down.gif';
		// array.push doesn't work in IE mac. why??
		document.preload[document.preload.length] = imgover;
		document.preload[document.preload.length] = imgdown;
	}
	menuLinks[0].onmouseup();
	menuLinks[0].onclick();
}

function detail_click () {
	swapMain(this);
	this.blur();
	return false;
}

function button_over () {
	var img = this.getElementsByTagName('img').item(0);
	img.src = buttonRoot + this.id + '_over.gif';
}

function button_out () {
	if (this.visited) return;
	var img = this.getElementsByTagName('img').item(0);
	img.src = buttonRoot + this.id + '.gif';
}

function button_down () {
	var img = this.getElementsByTagName('img').item(0);
	img.src = buttonRoot + this.id + '_down.gif';
}
function button_up () {
	var img = this.getElementsByTagName('img').item(0);
	img.src = buttonRoot + this.id + '_over.gif';
}

function button_click () {
	var img;
	/* Leave buttons lit after visiting
	if (curButton && curButton != this.id) {
		var old = document.getElementById(curButton);
		img = old.getElementsByTagName('img').item(0);
		img.src = buttonRoot + old.id;
	}*/
	curButton = this.id;
	this.visited = 1;

	// Set the detail link to display a detail
	if (detailLink) {
		detailLink.swap = this.href + 'a';
		if (this.className == 'nodetail') {
			detailLink.style.visibility = 'hidden';
		} else {
			detailLink.style.visibility = 'hidden';
		}
	}

	this.swap = this.href;
	swapMain(this);

	this.blur();
	return false;
}

function swapMain(button) {
	if (!mainimg) return;

	var newmain = document.createElement('div');
	newmain.setAttribute('id', 'img');
	var newimg = document.createElement('img');
	newimg.src = button.swap+ '.jpg';
	
	newmain.appendChild(newimg);
	var newcaption = document.createElement('p');
	var spans = button.getElementsByTagName('span');
	if (spans.length >= 1) {
		//alert('setting new caption to: ' + spans[0].firstChild.nodeValue);
		for (var i=0; i<spans[0].childNodes.length; i++) {
			newcaption.appendChild(spans[0].childNodes[i].cloneNode(true));
		}
	} else {
		//alert('keeping old caption: ' + oldcaption.firstChild.nodeValue);
		var oldcaption = mainimg.getElementsByTagName('p').item(0);
		for (var i=0; i<oldcaption.childNodes.length; i++) {
			newcaption.appendChild(oldcaption.childNodes[i].cloneNode(true));
		}
	}
	newmain.appendChild(newcaption);
	var rent = mainimg.parentNode;
	for (var i=0; i<rent.childNodes.length; i++) {
		if (rent.childNodes[i].id == 'img') {
			rent.replaceChild(newmain, rent.childNodes[i]);
			mainimg = rent.childNodes[i];
		}
	}
}