function showImage(f_src, f_width, f_height) {
	//adjust image size (parameters) when window size is to small
	var vP = getViewPort();
	if (vP[1] < 765) {
		var f_width_adj = parseInt(f_width * 0.8);
		var f_height_adj = parseInt(f_height * 0.8);
		f_src = f_src.replace('_' + f_width + '_' + f_height, '_' + f_width_adj + '_' + f_height_adj);
		f_width = f_width_adj, f_height = f_height_adj;
	}

	var fc = applyFog();

	//remove existing image (when using ctrls)
	while (fc.firstChild) { fc.removeChild(fc.firstChild); }

	var f_img = document.createElement('img');
	f_img.src = f_src;
	f_img.width = parseInt(f_width);
	f_img.height = parseInt(f_height);

	var sXY = getScrollXY();
	f_img.style.position = 'absolute';
	f_img.style.marginTop = (-0.5 * (f_img.height + 8) + sXY[1]) + 'px';	//borders consume 8px
	f_img.style.marginLeft = (-0.5 * (f_img.width + 8) + sXY[0]) + 'px';
	f_img.style.border = '4px solid #dddddd';
	f_img.style.zIndex = 2;

	fc.appendChild(f_img);

	//add controls when not visible
	if (!document.getElementById('ctrlDiv')) { addControls(); }

	//cancel href
	return false;
}

function addControls() {
	var ctrlDiv = document.createElement('div');
	ctrlDiv.id = 'ctrlDiv';
	ctrlDiv.style.width = '100%';
	ctrlDiv.style.height = '34px';
	ctrlDiv.style.position = 'fixed';
	ctrlDiv.style.top = '20px';
	ctrlDiv.style.left = '0px';
	ctrlDiv.style.zIndex = 3;
	ctrlDiv.style.backgroundColor = '#ffffff';
	ctrlDiv.style.backgroundImage = 'url(\'/images/layout/default/background_browse.gif\')';
	ctrlDiv.style.backgroundPosition = 'bottom center';
	ctrlDiv.style.backgroundRepeat = 'repeat-x';
	ctrlDiv.style.borderTop = '2px solid #555555';
	ctrlDiv.style.borderBottom = '2px solid #555555';

	var ctrlTitle = document.createElement('h1');
		//fetch 'bedrijfsnaam' as title from the first #text node value which is child or grandchild of p class name
		var pName = document.getElementsByTagName('p')[0];
		if (pName.firstChild.nodeName.toLowerCase() == 'a') { ctrlTitle.innerHTML = pName.firstChild.innerHTML; } else { ctrlTitle.innerHTML = pName.innerHTML; }
	ctrlTitle.style.position = 'absolute';
	ctrlTitle.style.marginTop = '7px';
	ctrlTitle.style.marginLeft = '20px';
	ctrlTitle.style.fontWeight = 'bold';
	ctrlDiv.appendChild(ctrlTitle);

	var ctrlClose = document.createElement('img');
	ctrlClose.src = '/images/layout/default/delete.gif';
	ctrlClose.style.cssFloat = 'right';
	ctrlClose.style.styleFloat = 'right';//IE
	ctrlClose.style.marginTop = '8px';
	ctrlClose.style.marginRight = '20px';
	ctrlClose.style.cursor = 'pointer';
	ctrlClose.onclick = function() { closeFog(); }
	ctrlClose.title = 'sluiten';
	ctrlDiv.appendChild(ctrlClose);

	var ctrlNav = document.createElement('div');
	ctrlNav.style.position = 'absolute';
	ctrlNav.style.marginLeft = '50%';

		var ctrlNext = document.createElement('img');
		ctrlNext.id = 'ctrlNext';
		ctrlNext.src = '/images/layout/mapicons/moveRight.png';
		ctrlNext.title = 'volgende';
		ctrlNext.style.position = 'absolute';
		ctrlNext.style.marginTop = '4px'
		ctrlNext.style.marginLeft = '23px';
		ctrlNext.style.cursor = 'pointer';
		ctrlNext.onclick = function() { ctrlImg(); }
		ctrlNav.appendChild(ctrlNext);

		var ctrlPrev = ctrlNext.cloneNode(true);
		ctrlPrev.id = 'ctrlPrev';
		ctrlPrev.src = '/images/layout/mapicons/moveLeft.png';
		ctrlPrev.title = 'vorige';
		ctrlPrev.style.marginLeft = '-52px';
		ctrlPrev.onclick = function() { ctrlImg(true); }
		ctrlNav.appendChild(ctrlPrev);

		var ctrlCnt = document.createElement('h1');
		ctrlCnt.id = 'ctrlCnt';
		ctrlCnt.style.color = '#000000';
			var foundImgs = findImgs();
			var iDcNa = foundImgs[0];
			var currI = foundImgs[1];
		ctrlCnt.innerHTML = (currI + 1) + '&nbsp;/&nbsp;' + iDcNa.length;
		ctrlCnt.style.position = 'absolute';
		ctrlCnt.style.marginTop = '7px';
		ctrlCnt.style.marginLeft = '-16px';
		ctrlNav.appendChild(ctrlCnt);

	ctrlDiv.appendChild(ctrlNav);

	//apply control div to body
	var bcH_b = document.body.clientHeight;
	document.body.appendChild(ctrlDiv);
	var bcH_a = document.body.clientHeight;

	//correct position IE6
	if (bcH_a > bcH_b) {
		var ctrlDiv = document.getElementById('ctrlDiv');
		ctrlDiv.style.position = 'absolute';
		var sXY = getScrollXY();
		ctrlDiv.style.top = (sXY[1] + 20) + 'px';

		//apply png behavior for IE6 (here because of rendering)
		document.getElementById('ctrlNext').style.behavior = 'url(\'/includes/pngbehavior.htc\')';
		document.getElementById('ctrlPrev').style.behavior = 'url(\'/includes/pngbehavior.htc\')';		
	}
}

function ctrlImg(prev) {
	var ctrlCnt = document.getElementById('ctrlCnt');

	var foundImgs = findImgs();
	var iDcNa = foundImgs[0];
	var currI = foundImgs[1];
	var newI = foundImgs[2];

	//determine new element reference (next or prev)
	if (prev) { newI = currI - 1; } else { newI = currI + 1; }
	if (newI < 0) { newI = iDcNa.length - 1; }
	else if (newI >= iDcNa.length) { newI = 0; }

	//update control counter
	ctrlCnt.innerHTML = (newI + 1) + '&nbsp;/&nbsp;' + iDcNa.length;

	//determine parameters and call function showImage
	var fnc = iDcNa[newI].onclick;
	var wh = /\d+, \d+/.exec(fnc).toString().split(', ');
	showImage(iDcNa[newI].href, wh[0], wh[1]);
}

function findImgs() {
	var fc = document.getElementById('fog_center');
	var iDcNa = document.getElementById('scrollTable').getElementsByTagName('a');

	for (var i = 0; i < iDcNa.length; i++) {
		//compare without image dimensions (which can be altered by showImage())
		if (iDcNa[i].href.replace(/_\d+_\d+\.jpg/, '') == fc.firstChild.src.replace(/_\d+_\d+\.jpg/, '')) { var currI = i; }
	}

	var newI = iDcNa.length;

	return Array(iDcNa, currI, newI);
}

//init vars for img scrolling
scrollStep = 3, timerLeft = "", timerRight = "";

function scrollDivLeft(id) {
	clearTimeout(timerRight);
	document.getElementById(id).scrollLeft += scrollStep;
	timerRight = setTimeout("scrollDivLeft('"+id+"')", 5);
}

function scrollDivRight(id) {
	clearTimeout(timerLeft);
	document.getElementById(id).scrollLeft -= scrollStep;
	timerLeft = setTimeout("scrollDivRight('"+id+"')", 5);
}

function stopMe() {
	clearTimeout(timerRight);
	clearTimeout(timerLeft);
}

function scrollTableWidth() {
	if (document.getElementById('scrollTable').offsetWidth > 948) {
		document.getElementById('scrollDivRight').style.display = 'block';
		document.getElementById('scrollDivLeft').style.display = 'block';
		document.getElementById('imgsContainer').style.width = '878px';
		document.getElementById('imgsContainer').style.marginLeft = '35px';
	}
}