var HoverBox = {
	activeHoverDiv: "",
	debug: false, 
	paddingOffset: 10,
	init: function () {
	
		$$("div.hover").each(function(div) {
			//alert(Element.positionedOffset(div.up())["top"]);
			
			
			Event.observe(div.up(), "mouseover",  function () {
				HoverBox.hideDiv();
				
				div.style.display="block";
	
				div.up().style.zIndex="999";
				div.style.position="absolute";
				
			
				if (HoverBox.debug) div.style.border="1px solid red";
				div.style.top="-"+HoverBox.paddingOffset+"px";
				div.style.left="-"+HoverBox.paddingOffset+"px";
				div.style.padding=HoverBox.paddingOffset+"px";
				
				HoverBox.activeHoverDiv = div;

				
			});
			Event.observe(div, "mousemove",  function (e) {
		
				if (e.pointerY()> div.up().positionedOffset()["top"]+div.up().getHeight() +HoverBox.paddingOffset ||
					e.pointerX()> div.up().positionedOffset()["left"]+div.up().getWidth() +HoverBox.paddingOffset||
					e.pointerY()<= div.up().positionedOffset()["top"] -HoverBox.paddingOffset||
					e.pointerX()<= div.up().positionedOffset()["left"] -HoverBox.paddingOffset) {
					HoverBox.hideDiv();
				
				}
			});			
			Event.observe(div, "mouseout",  function (e) {
				div.style.display="none";
				div.up().style.zIndex="1";
			
				
			});			
		
				
			
			
		});
		
	
		
		
	}, 
	
	hideDiv: function () {
	
		if (HoverBox.activeHoverDiv) {
			HoverBox.activeHoverDiv.style.display="none";
			HoverBox.activeHoverDiv.up().style.zIndex="1";
		}
	
	}
	
}

document.observe("dom:loaded", function() {

	HoverBox.init();
});