Необходима помощь с событиями
 

Имеется следующий HTML код:

<div id="hoverthis">Наведите мышью сюда</div>
<div id="box">Всплывающий див</div>

У меня не получается сделать следующее - при наводке на #hoverthis → появляется #box с контентом, а затем при щелчке на любом элементе страницы кроме #hoverthis и #box, див #box исчезал.

А также при onmouseover на #hoverthis нужно добавлять css класс .active. Этот класс должен исчезать когда #box исчезает.

window.onload = function() {
	document.getElementById('hoverthis').onmouseover = function() {
		openbox('box', this);
		return false;
	};
	document.getElementById('hoverthis').onmouseout = function() {
		openbox('box', this);
		return false;
	}
};
function openbox(id, hoverthis) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';

	}
	else {
		div.style.display = 'block';

	}
}

Наведите меня на путь истинный, спасибо :)

function addEvent( elem, evt, callback ) {
	if ( elem.addEventListener ) {
		elem.addEventListener( evt, callback, false );
	} else if ( elem.attachEvent ) {
		elem.attachEvent( "on" + evt, callback );
	}
}

function clearEvent( e ) {
	e = e || window.event
	if (e.stopPropagation) e.stopPropagation();
	else e.cancelBubble = true;
	if (e.preventDefault) e.preventDefault();
	else e.returnValue = false;
}

window.onload = function() {

	var elem = document.getElementById('hoverthis');

	addEvent( elem, "mouseover", function() {
		var box = document.getElementById('box');
		box.className = 'active';
		box.style.display = 'block';
		return false;
	});
	addEvent( elem, "click", function( e ) {
		clearEvent( e );
		return false;
	});
	addEvent( document.getElementById('box'), "click", function( e ) {
		clearEvent( e );
		return false;
	});

	addEvent( document, "click", function() {
		var box = document.getElementById('box');
		box.className = '';
		box.style.display = 'none';
		return false;
	});
};

примерно так)