var myLargeCovers = document.getElementById('coversamples').getElementsByTagName('div');
var mySpines = document.getElementById('spines').getElementsByTagName('a');
for (var i=0; i<mySpines.length; i++) {
	mySpines[i].onmouseover = function() {swapImage(this)}
}
mySpines[0].style.background = 'url(/images/spine_bullet.gif) no-repeat center bottom';
// Normally, the number of spines and the number of large covers will be the same. But they don't need to be the same.
function swapImage(elemanchor) {
	for (var i=0;i<mySpines.length;++i) {
		mySpines[i].style.background = 'none';
	}
	for (var i=0;i<myLargeCovers.length;++i) {
		myLargeCovers[i].style.display = "none";
	}
	elemanchor.style.background = 'url(/images/spine_bullet.gif) no-repeat center bottom';
	// Get id from spine img src
	var indexOfUnderscore = elemanchor.childNodes[0].src.lastIndexOf('_');
	var indexOfLastDot = elemanchor.childNodes[0].src.lastIndexOf('.');
	var largeCoverID = elemanchor.childNodes[0].src.substring(indexOfUnderscore+1, indexOfLastDot);
	document.getElementById(largeCoverID).style.display = "block";
}