//globale variabele die gevuld wordt met de x en y coördinaat van de muiscursor
var popupPics = Array();

var popupActivePic = null;

function popupHookE(element, eventName, callback)
{
	
	if(typeof(element) == "string")
	{
		element = document.getElementById(element);
	}
	if(element == null)
	{
		return;
	}
	if(element.addEventListener)
	{
		if(eventName == 'mousewheel')
		{
			element.addEventListener('DOMMouseScroll',
			callback, false); 
		}
		
		element.addEventListener(eventName, callback, false);
		
	}
	else if(element.attachEvent)
	{
		element.attachEvent("on" + eventName, callback);
	}
}

function popupUnhookE(element, eventName, callback)
{
	if(typeof(element) == "string")
	{
		element = document.getElementById(element);
	}
	if(element == null)
	{
		return;
	}
	if(element.removeEventListener)
	{
		if(eventName == 'mousewheel')
		{
			element.removeEventListener('DOMMouseScroll',
			callback, false); 
		}
		element.removeEventListener(eventName, callback, false);
	}
	else if(element.detachEvent)
	{
		element.detachEvent("on" + eventName, callback);
	}
}

function popupCancelE(e)
{
	e = e ? e : window.event;
	
	if(e.stopPropagation)
	{
		e.stopPropagation();
	}
	if(e.preventDefault)
	{
		e.preventDefault();
	}
	
	e.cancelBubble = true;
	e.cancel = true;
	e.returnValue = false;
	return false;
}


function popupMouseWheel(e)
{
	
	e = e ? e : window.event;
	
	var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
	
	if (wheelData < 0)
	{
		//foto naar links
		if (popupActivePic > 1)
		{
			popupLoadpic(popupActivePic-1);
		}
	}
	else if(wheelData > 0)
	{
		//foto naar rechts
		if (popupActivePic < (popupPics.length-1))
		{
			popupLoadpic(popupActivePic+1);
		}
	}
	else
	{
		return
	}
	
	return popupCancelE(e);
	
}

function popupSetbgsize()
{
	
	var newH = document.body.offsetHeight;
	
	var newW = document.body.offsetWidth;
	
	var obj = document.getElementById("popupbg");
	
	if (obj)
	{
		
		if (document.documentElement.scrollLeft>0)
		{
			newW = newW + document.documentElement.scrollLeft;
		}
		
		obj.style.height = newH+100+"px";

		obj.style.width = newW+"px";
		
	}
}

function popupSetbg()
{
	
	//de zwarte achtergrond moet over de gehele website worden geplaatst 
	var body = document.body;
	
	//zwarte achtergrond wordt gemaakt door middel van een div
	var dark = document.createElement("div");
	
	//geef het element de juiste ID mee, hierkan deze gestyled worden in de default.css
	dark.setAttribute("id","popupbg");
	
	//het nieuwe element toevoegen aan de body
	body.appendChild(dark);
	
	//we gaan bepalen hoe hoog en breed de totale website is op dit moment aan de hand van de hoogte van body
	popupSetbgsize(dark);
	
}

function popupPosition()
{
	
	var popup = document.getElementById("popup");
	
	var scroll = document.documentElement.scrollTop;
	
	if (scroll > 0)
	{
		popup.style.marginTop = 100+scroll+"px";
	}
	
}

function popupMake(width,height)
{
	
	//maak de zwarte achtergrond
	popupSetbg();
	
	//de zwarte achtergrond moet in het donkere element geplaatst worden 
	var dark = document.getElementById("popupbg");
	
	//popup wordt gemaakt door middel van een div
	var popup = document.createElement("div");
	
	//popup krijgt de juiste ID mee, deze kun nu gestyled worden in default.css
	popup.setAttribute("id","popup");
	
	//het nieuwe element toevoegen aan de body
	dark.appendChild(popup);
	
	//geef de popup de juiste afmetingen mee
	popup.style.width = width+"px";
	popup.style.height = height+"px";
	
	//de positie van de popupinstellen
	popupPosition();
	
}

function popupFill(pic)
{
	
	popupHookE('popup', 'mousewheel', popupMouseWheel);
	
	var popup = document.getElementById("popup");
	
	var pkop = document.createElement("div");
	pkop.setAttribute("id","pheader");
	popup.innerHTML = '<div id="popupextra">Gebruik je muiswiel om door de foto\'s te bladeren!';
	
	var ptit = document.createElement("div");
	ptit.setAttribute("id","ptitel");
	
	var pdes = document.createElement("div");
	pdes.setAttribute("id","pomschrijving");
	
	var pimg = document.createElement("div");
	pimg.setAttribute("id","pfoto");
	
	var parl = document.createElement("a");
	parl.setAttribute("id","plinks");
	
	var parr = document.createElement("a");
	parr.setAttribute("id","prechts");
	
	popup.appendChild(pimg);
	popup.appendChild(ptit);
	popup.appendChild(pdes);
	popup.appendChild(parl);
	popup.appendChild(parr);
	popup.appendChild(pkop);
	
	var close = document.createElement("a");
	
	close.onclick = function(){popupClose();};
	
	close.style.cursor = "pointer";
	
	close.innerHTML = "sluit de popup";
	
	pkop.appendChild(close);
	
	if (pic)
	{
		popupLoadpic(pic);
	}
	
}

function popupImageLoad()
{
	window.alert("check");
}

function popupLoadpic(pic)
{
	
	popupActivePic = pic;
	
	var kop = document.getElementById("pheader");
	var tit = document.getElementById("ptitel");
	var des = document.getElementById("pomschrijving");
	var img = document.getElementById("pfoto");
	var arl = document.getElementById("plinks");
	var arr = document.getElementById("prechts");
	
	img.style.backgroundImage = "none";
	img.innerHTML = '<div id="popupladen">Foto wordt geladen...</div>';

	tempImg = new Image();
	
	tempImg.onload=function()
	{
		
		img.innerHTML = "";
		img.style.backgroundImage = "url('"+tempImg.src+"')";
		
		if (popupPics.length>0 && pic < popupPics.length-1)
		{
			nextpic = pic+1;
			arr.onclick=function(){popupLoadpic(nextpic);};
			arr.style.backgroundImage = "url('images/arr_right_a.png')";
			arr.style.cursor="pointer";
		}
		else
		{
			arl.onclick="";
			arr.style.backgroundImage = "url('images/arr_right.png')";
			arr.style.cursor="";
		}
		
		if (popupPics.length>0 && pic > 1)
		{
			prevpic = pic-1;
			arl.onclick=function(){popupLoadpic(prevpic);};
			arl.style.backgroundImage = "url('images/arr_left_a.png')";
			arl.style.cursor="pointer";
		}
		else
		{
			arl.onclick="";
			arl.style.backgroundImage = "url('images/arr_left.png')";
			arl.style.cursor="";
		}
		
		tit.innerHTML = popupPics[pic]["tit"];
		
		des.innerHTML = popupPics[pic]["des"];
	}
	
	tempImg.src = popupPics[pic]["src"];

}

function popupClose()
{
	
	popupUnhookE('popup', 'mousewheel', popupMouseWheel);
	
	var body = document.body;
	
	var popupbg = document.getElementById("popupbg");
	
	body.removeChild(popupbg);
	
}

function popupAddpic(src,tit,des)
{
	
	if (popupPics.length == 0)
	{
		i = 1;
	}
	else
	{
		i = popupPics.length;
	}
	
	popupPics[i] = Array();
	
	popupPics[i]['src'] = src;
	
	if (tit)
	{
		popupPics[i]['tit'] = tit;
	}
	else
	{
		popupPics[i]['tit'] = "...";
	}
	
	if (des)
	{
		popupPics[i]['des'] = des;
	}
	else
	{
		popupPics[i]['des'] = "";
	}
	
}