document.attachEvent('onmouseover', onmouseover)
document.attachEvent('onmouseout', onmouseout)

var x, y
function findPos(obj) { 
	x = 0; y = 0;
	while (obj) { x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; }
	y += 1;x += 1;
}

function onmouseover() {
	var e = event.srcElement;

	if ( e.tagName == 'AREA' ) {
		var i = e.getAttribute('item')
		if ( i != null ) {
			i = parseInt(i)
			if ( i < 17 ) {
				document.getElementById('front').getElementsByTagName('LI')(i).style.backgroundColor = '#CAD6F9'
				document.getElementById('front').getElementsByTagName('LI')(i).style.borderColor = '#000000'
			}
			else {
				i = i-17
				document.getElementById('rear').getElementsByTagName('LI')(i).style.backgroundColor = '#CAD6F9'
				document.getElementById('rear').getElementsByTagName('LI')(i).style.borderColor = '#000000'
			}
		}
	}

	if ( e.tagName == 'SPAN' && e.parentElement.tagName == 'LI' )
		e = e.parentElement;

	if ( e.tagName == 'LI' ) {
		var X = e.getAttribute('x');
		var Y = e.getAttribute('y');
		findPos( document.getElementById('recorder') )
		if ( X != null && Y != null ) {
			document.getElementById('disc').style.top = parseInt(Y) + parseInt(y)-7;
			document.getElementById('disc').style.left = parseInt(X) + parseInt(x)-7;
			document.getElementById('disc').style.display = 'block';
		}
	}
}

function onmouseout() {
	document.getElementById('disc').style.display = 'none';

	var e = event.srcElement;
	if ( e.tagName == 'AREA' ) {
		var i = e.getAttribute('item')
		if ( i != null ) {
			i = parseInt(i)
			if ( i < 17 ) {
				document.getElementById('front').getElementsByTagName('LI')(i).style.backgroundColor = ''
				document.getElementById('front').getElementsByTagName('LI')(i).style.borderColor = '#ffffff'
			}
			else {
				i = i-17
				document.getElementById('rear').getElementsByTagName('LI')(i).style.backgroundColor = ''
				document.getElementById('rear').getElementsByTagName('LI')(i).style.borderColor = '#ffffff'
			}
			
		}
	}
}