base2.DOM.bind(document);
document.addEventListener('DOMContentLoaded', init, false);

var $id, $minX, $bookLength, $eWidth, $currentChapter;

function init()
{
	base2.DOM.bind(document.body);
     	var el = document.getElementById("example"); 
if (el.addEventListener){
	el.addEventListener('mouseover', doOver, false);
	el.addEventListener('mouseout', doOut, false);
} else if (el.attachEvent){
	el.attachEvent('onmouseover', doOver);
	el.attachEvent('onmouseout', doOut);
}
}

function doOver(e)
{
	e = e || window.event;
	var $target = e.target || e.srcElement;
	$id = $target.id;
	if (!$id || typeof $h[$id] == 'undefined') return;
	$minX = getOffset($target, 'offsetLeft');
	$bookLength = $h[$id].length;
	$eWidth = $target.clientWidth;
	$($target).addEventListener('mousemove', doMove, false);
	var $hPar = $('h');
	$hPar.style.display = 'block';
	$hPar.style.top = (getOffset($target, 'offsetTop') + $target.clientHeight) + 'px';
	var $bodyWidth = document.body.clientWidth;
	if ($bodyWidth - $minX - $hPar.clientWidth < 0)
	{
		$hPar.style.left = null;
		$hPar.style.right = 0;
	}
	else
	{
		$hPar.style.left = $minX + 'px';
		$hPar.style.right = null;
	}
	doMove(e);
}

function getOffset($node, $type)
{
	var $offset = $node[$type];
	while ($node = $node.offsetParent)
	{
		$offset += $node[$type];	
	}
	return $offset;
}

function doOut(e)
{
	e = e || window.event;
	var $target = e.target || e.srcElement;
	$($target).removeEventListener('mousemove', doMove, false);
	$('h').style.display = 'none';
	$('h').innerHTML = '';
}

function doMove(e)
{
	e = e || window.event;
	var $target = e.target || e.srcElement;
	var $eventX = getEventX(e);
	if ($eventX < 0) return;
	var $offset = parseInt(($eventX - $minX) / ($eWidth / $bookLength));
	if ($offset > $bookLength - 1) $offset = $bookLength - 1;
	$currentChapter = $offset + 1;
	fixHref($target);
	$('h').innerHTML = '<strong>' + $target.innerHTML + ' ' + $currentChapter + '</strong><br />' + $h[$id][$offset];
}

function fixHref($target)
{
	var $href = $target.href;
	if (!$href) return;
	$href = $href.replace(/\d+$/, '');
	$href += $currentChapter;
	$target.href = $href;
}

function getEventX(e)
{
	if (e.pageX) return e.pageX;
	if (e.clientX) return e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
	return -1;
}

function $(myId)
{
	if (typeof myId == 'object')
	{
		if (!myId.base) base2.DOM.bind(myId);
		return myId;
	}
	return document.matchSingle('#' + myId);	
}