var pics = Array();

function setWH(id,w,h)
{
	var border= document.getElementById("popupBorder");
	
	border.style.width = w+"px";
	border.style.height = h-2+"px";
	
	vulPopup(id);
	
}

function addPopup(src,w,h,tit,des)
{
	
	i=0;
	
	if (pics.length == 0)
	{
		i = 0;
	}
	else
	{
		i = pics.length;
	}

	pics[i] = Array();
	pics[i]['src'] = src;
	pics[i]['tit'] = tit;
	pics[i]['des'] = des;
	pics[i]['w'] = w;
	pics[i]['h'] = h;
	
}

function vulPopup(id)
{
	
	w = pics[id]['w'];
	h = pics[id]['h'];
	
	h=h-22;
	
	var content = document.getElementById('popupContent');

	wT = parseInt(Math.round(((w-80)/100)*70));
	
	margin = parseInt(((w-wT)-80)-22);
	marginL = Math.round(margin/2);
	
	marginT = Math.round(((h-30)-22)-22);
	
	content.innerHTML = '';
	
	content.innerHTML = '<div style="width:'+w+'px; height:'+h+'px;" id="popupPicture"><div style="width:40px; float:left; clear:left; height:'+h+'px;" id="mLeft"></div><div id="popupTxt" style="margin-top:'+marginT+'px; margin-left:'+marginL+'px; width:'+wT+'px;"></div><div style="width:40px; height:'+h+'px; float:right; clear:right;" id="mRight"></div></div>';
	
}

function picPopup(id)
{

	w=pics[id]['w'];
	h=pics[id]['h'];

	setWH(id,w,h);
	
	var picture = document.getElementById("popupPicture");
	
	picture.style.backgroundImage = "url('"+pics[id]['src']+"')";
	picture.style.backgroundPosition = "center center";
	picture.style.backgroundRepeat = "no-repeat";
	
	var title = document.getElementById("popupTitle");
	title.innerHTML = pics[id]['tit'];
	
	var description = document.getElementById("popupTxt");
	
	if (pics[id]['des'] != '')
	{
		description.style.display='inline';
		description.innerHTML = pics[id]['des'];
	}
	else
	{
		description.style.display='none';
	}
	
	mL = document.getElementById("mLeft");
	mR = document.getElementById("mRight");
	
	Lid = parseInt(id)-1;
	Rid = parseInt(id)+1;
	
	var margin = Math.round(h/2)-20;
	
	mL.innerHTML = '<div onclick="picPopup('+Lid+');" style="height:100%; width:100%; vertical-align:middle;"><div style="margin-top:'+margin+'px;" id="arrowL"></div></div>';
	mR.innerHTML = '<div onclick="picPopup('+Rid+');" style="height:100%; width:100%; vertical-align:middle;"><div style="margin-top:'+margin+'px;" id="arrowR"></div></div>';
	
	if (id == 0)
	{
		mL.style.visibility='hidden';
	}
	else
	{
		mL.style.visibility='visible';
	}
	
	if (id == (pics.length-1))
	{
		mR.style.visibility='hidden';
	}
	else
	{
		mR.style.visibility='visible';
	}
	setPopupHeight();
}

function setPopup(id,w,h)
{
	
	popupHeight = h;
	
	//body element waaraan de popup wordt toegevoegd
	var body = document.body;
	
	//popup wordt gemaakt
	var popup = document.createElement('div');
	
	//popup krijgt een id mee
	popup.setAttribute('id','popup');

	//hoogte maximaliseren
	if (screen.innerHeight)
	{
		if (document.body.offsetHeight > screen.innerHeight)
		{
			newH = document.body.offsetHeight;
		}
		else
		{
			newH = document.body.offsetHeight;
		}
	}
	else
	{
		if (document.body.offsetHeight > document.documentElement.clientHeight)
		{
			newH = document.body.offsetHeight;
		}
		else
		{
			newH = document.documentElement.clientHeight;
		}
	}
	
	//padding verwijderen
	newH = newH - 0;
	
	//hoogte instellen
	popup.style.height = newH+"px";
	
	//popup wordt toegevoegd aan de body
	body.appendChild(popup);
	
	//border veld wordt als element aan popup toegevoegd
	var border = document.createElement('div');
	
	//border krijgt een id mee
	border.setAttribute('id','popupBorder');
	
	//bepaalde  breedte van de titel
	wT = parseInt(w);
	wP = parseInt(w-18);
	
	//vul het element popupBorder metinhoud
	border.innerHTML = '<table style="height:20px; background-color:black;" cellpadding="0" cellspacing="0" border="0"><tr><td style="width:'+wT+'px; text-align:left; background-color:black;background-image:url(\'images/bg_title.png\'); background-repeat:repeat-x;"><div id="popupTitle"></div></td><td style="background-image:url(\'images/bg_title.png\'); background-repeat:repeat-x; text-align:right; width:18px; height:20px;"><a href="javascript:delPopup();"><div style="float:right; background-image:url(\'images/icon_close.png\'); cursor:pointer; margin:1px; width:18px; height:18px;"></div></a></td></tr><tr><td colspan="2"><div id="popupContent"></div></td></tr></table>';
	
	//content wordt toegevoegd aan popup
	popup.appendChild(border);
	
	//hoogte en breedte meegeven aan border
	
	/*popup wordt gemaakt
	var txt = document.createElement('div');
	
	//popup krijgt een id mee
	txt.setAttribute('id','popupTxt');
	
	/popup wordt toegevoegd aan element border
	border.appendChild(txt);
	*/
	picPopup(id);

}

function delPopup()
{
	//body element waaraan de popup wordt toegevoegd
	var body = document.body;
	
	//popup wordt gezocht
	var popup = document.getElementById('popup');
	
	//element popup wordt verwijderd
	body.removeChild(popup);
	
}

function setPopupHeight(px)
{
	
	var popupC = document.getElementById("popupBorder");	
	
	if (popupC)
	{
		popupC.style.top=globalScrollPosY+"px";
	}

}
/*
function setPopupPosition()
{
	
	top = globalScrollPosY;
	
	if (window.innerHeight)
	{
		top2 = top + window.innerHeight +  parseInt(popupHeight);
		
		if (top2 < document.height)
		{
			setTimeout("setPopupHeight('"+top+"')",500);
		}
	}
	else
	{
		setTimeout("setPopupHeight('"+top+"')",500);
	}
	//document.getElementById("test").innerHTML = document.height+" & "+top+" & "+ popupHeight;

}

if (document.addEventListener) 
{
	document.addEventListener('scroll',setPopupPosition,false);
}

if (document.attachEvent)
{
	window.attachEvent('onscroll',setPopupPosition);
}
 
*/