var HoverBoxID = "hoverBox";
var HoverBox = new function(){
	this.isInitialized = false,
	this.disabled = false,
	this.hoverBoxLayer = null,
	this.init				= function(){
		if(this.hoverBoxLayer == null){
			this.hoverBoxLayer = document.getElementById(HoverBoxID);
			if(this.hoverBoxLayer){//bestaat op de pagina
				this.hoverBoxLayer.className = HoverBoxID+"hide";
			}else{//betaat niet op de pagina,aanmaken dus
				this.hoverBoxLayer = document.createElement('div');
				document.getElementsByTagName("body")[0].appendChild(this.hoverBoxLayer);
			}
		}
		this.isInitialized = true;
	},
	this.mouseOver	= function(lay,param){
		if(!this.isInitialized || this.disabled)
			return;
			
		HoverBox.hoverBoxLayer.innerHTML = "";
		
		HoverBox.hoverBoxLayer.className = HoverBoxID+"show";
		HoverBox.hoverBoxLayer.style.visibility = "hidden";
		
		lay.onmouseout = function(){HoverBox.mouseOut('','');}
		lay.style.border = "1px solid red";
		
		p = document.createElement('p');
		p.innerHTML = param.naam;
		
		HoverBox.hoverBoxLayer.appendChild(p);
		
		div = document.createElement('div');
		div.style.width = "150px";
		div.style.height = "150px";
		div.style.overflow = "hidden";
		
		img = get_image(param.productID);
		img.alt = param.name;
		img.title = param.name;
		
		div.appendChild(img);
		HoverBox.hoverBoxLayer.appendChild(div);
		
		div = document.createElement('div');
		div.style.textAlign = "left";
		div.style.paddingLeft = "50px";
		div.appendChild(document.createTextNode("nu :€"+(param.voor)));
		div.appendChild(document.createElement('br'));
		div.appendChild(document.createTextNode("vorig :€"+(param.van)));

		HoverBox.hoverBoxLayer.appendChild(div);
		
		var height_self			= find.height(HoverBox.hoverBoxLayer);
		var height_hover		= find.height(lay);
		var width_hover			= find.width(lay);
		var pos_hover				= find.position(lay);
		
		var viewport_height = find.viewportHeight();
		var scrollOffset		= find.scrollOffsetY();
		
		var abs_height = viewport_height + scrollOffset;
		
		var self_top_pos		= pos_hover[1] - (height_self/2);
		
		if((self_top_pos + height_self) > abs_height)self_top_pos = (abs_height - height_self);
		
		HoverBox.hoverBoxLayer.style.left	= (pos_hover[0]+width_hover)+"px";
		HoverBox.hoverBoxLayer.style.top	= self_top_pos+"px";
		
		HoverBox.hoverBoxLayer.style.visibility = "visible";
	},
	this.mouseOut		= function(lay,param){
		if(!this.isInitialized || this.disabled)
			return;
		HoverBox.hoverBoxLayer.className = HoverBoxID+"hide";
	}
}

addListener(window, "load", function(){HoverBox.init();});