imgLargeEnlarge = 1.1;
imgInfoEnlarge = 1.2;
headerHeight = 20; // In pixels
footerHeight = 90; // In pixels
infoContainerWidth = 200; // In pixels
infoWindowBorder = 5;  // In pixels
onMouseOver = false;

function infoHTML(imgId,name,urlImg,urlSite,w,h,s,found,newWidth,newHeight,site,target){

	infoContainerWidth = (newWidth + 50);
	
  // Inhoud van de imageInfoContainer
	infoHTMLstring  = "<div class='alphas2'><div class='popupinner'>"

	infoHTMLstring += "<div style=\"height:"+headerHeight+"px;overflow:hidden;\"></div>"
	infoHTMLstring += "  <div><img src=\""+urlImg+"\" alt=\"\" width=\""+newWidth+"\" height=\""+newHeight+"\"></div>"
	infoHTMLstring += "  <div style=\"height:"+footerHeight+"px;overflow:hidden\">"

	infoHTMLstring += "<span style=\"font-size:6px\">&nbsp;<br></span><strong>"+name+"</strong><br>"+w+""+h+" | "+s+"<br>"
	infoHTMLstring += "<span class='imgsite'>"+site+"<br><span>"
	infoHTMLstring += "<span class='imgbron'>"+found+"<span>"
	infoHTMLstring += "</div>"
	infoHTMLstring += "</div></div>"
	infoHTMLstring += "<div onmouseout=\"restoreImg('"+imgId+"','imageInfoContainer')\" onclick=\"cl('c','');window.open('"+urlSite+"','"+target+"');\" style=\"position:absolute;top:0px;left:0px;width:100%;height:100%;background:url('http://images.izito.com/v2/px.gif');cursor:pointer;\"></div>"

	return infoHTMLstring;

}

function showInfo(imgId,name,urlImg,urlSite,w,h,s,found,site,target){
		onMouseOver = true;
	if(onMouseOver){
    imgObj = document.getElementById(imgId)
  	imgInfoObj = document.getElementById('imageInfoContainer')
  	
  	imgSize = {w:(imgObj.width),h:(imgObj.height)}
  	imgLargeSize = {w:parseInt(imgSize.w*imgInfoEnlarge,10),h:parseInt(imgSize.h*imgInfoEnlarge,10)}
  	
  	imgInfoObj.innerHTML = infoHTML(imgId,name,urlImg,urlSite,w,h,s,found,imgLargeSize.w,imgLargeSize.h,site,target)
  	show("imageInfoContainer")
  	hide('imageLargeContainer')

    imgCoords = getPageCoords(imgObj)
  	imgContainerCoords = getPageCoords(document.getElementById('imageContainer'))
  	imgSize = {w:(imgObj.width),h:(imgObj.height)}
  	
  	imgInfoSize = {w: infoContainerWidth,h:(headerHeight + imgLargeSize.h + footerHeight + 7)}
  	imgInfoObj.style.height = imgInfoSize.h+"px"
		imgInfoObj.style.width = imgInfoSize.w+"px"
		
		
  	imgInfoObjPos = {top:(imgCoords.y-imgContainerCoords.y+imgSize.h/2-imgLargeSize.h/2 -headerHeight),left:(imgCoords.x-imgContainerCoords.x+imgSize.w/2-imgInfoSize.w/2)}
  	
		// Correctie als de imageContainer buiten het venster valt
		windowSize = getWindowSize()
  	
  	//if(imgInfoObjPos.left < infoWindowBorder){// Te ver naar links
  	//  imgInfoObjPos.left = infoWindowBorder;
  	//}
  	//if(imgInfoObjPos.left + imgInfoSize.w > (windowSize.w - infoWindowBorder)){// Te ver naar rechts
  	//  imgInfoObjPos.left = (windowSize.w - infoWindowBorder - imgInfoSize.w)
  	//}
 	
  	imgInfoObj.style.top = imgInfoObjPos.top + "px";
  	imgInfoObj.style.left = imgInfoObjPos.left + "px";
	}
}

function restoreImg(imgId,container){
  onMouseOver = false;
	hide(container)
	document.getElementById(container).style.top = "-1000px";
}

function show(id){
  document.getElementById(id).style.display = "block"
}

function hide(id){
  document.getElementById(id).style.display = "none"
}

function getPageCoords(element) {
	var coords = {x: 0, y: 0};
	while (element) {
		coords.x += element.offsetLeft;
		coords.y += element.offsetTop;
		element = element.offsetParent;
	}
	return coords;
}

function getWindowSize() {
  var size = {w: 0, h: 0};
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    size.w = window.innerWidth;
    size.h = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    size.w = document.documentElement.clientWidth;
    size.h = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    size.w = document.body.clientWidth;
    size.h = document.body.clientHeight;
  }
  return size;
}