window.addOnloadFunction(aanbod_detailsListener);
window.addOnloadFunction(aanbod_detailsSetActiveTab);
window.addOnloadFunction(aanbod_Afbeelding);

//var sActiveTab = 'details_omschrijving';
var sActiveTab = 'details_kenmerken';

function aanbod_detailsListener() {
	var rootTab = document.getElementById('stappendetails_ul');
	for ( var i = 0; i < rootTab.childNodes.length; i++) {
		var node = rootTab.childNodes[i]; // node == li

		document.getElementById('details_' + node.childNodes[0].id).style.display = 'none';

		if (node.childNodes[0].id != "ligging") {
			node.childNodes[0].onclick = function() {
				aanbod_hideTabs();
				aanbod_setTabImage();
				this.childNodes[0].src = this.childNodes[0].src
						.match("^(.+?)\_([0-1])(.+?)$")[1]
						+ "_1.gif"
				var div = document.getElementById('details_' + this.id);
				div.style.display = 'block';
				return false;
			}
		}
		else
		{
			node.childNodes[0].onclick=function()
			{

				aanbod_hideTabs();
				aanbod_setTabImage();
				this.childNodes[0].src = this.childNodes[0].src
						.match("^(.+?)\_([0-1])(.+?)$")[1]
						+ "_1.gif"
				var div = document.getElementById('details_' + this.id);
				div.style.display = 'block';
				return false;
			}
		}

		node.childNodes[0].onfocus = function() {
			this.blur();
		}
	}
}

function aanbod_setTabImage() {
	var rootTab = document.getElementById('stappendetails_ul');
	for ( var i = 0; i < rootTab.childNodes.length; i++) {
		var node = rootTab.childNodes[i]; // node == li
		node.childNodes[0].childNodes[0].src = node.childNodes[0].childNodes[0].src
				.match("^(.+?)\_([0-1])(.+?)$")[1]
				+ "_0.gif"
	}
}

function aanbod_detailsSetActiveTab() {
	var div = document.getElementById(sActiveTab);
	div.style.display = 'block';
	return true;
}

function aanbod_hideTabs() {
	var rootTab = document.getElementById('stappendetails_ul');
	for ( var i = 0; i < rootTab.childNodes.length; i++) {
		var node = rootTab.childNodes[i]; // node == li
		document.getElementById('details_' + node.childNodes[0].id).style.display = 'none';
	}
}

function aanbod_Afbeelding() {
	var rootLink = document.getElementsByTagName('a');
	var afbeeldingArray = Array('0');

	for ( var i = 0; i < rootLink.length; i++) {
		if (rootLink[i].id) {
			var matchAfbeelding = rootLink[i].id.match("^afbeelding_([0-9]+)$");
			if (matchAfbeelding != null) {
				rootLink[i].onclick = function() {
					activeImage = this.id.match("^afbeelding_([0-9]+)$")[1];

					showAfbeeldingLayer(activeImage);
					return false;
				}
			}
		}
	}
}

function getAfbeeldingArray() {
	var rootLink = document.getElementsByTagName('a');
	var afbeeldingArray = Array('0');

	for ( var i = 0; i < rootLink.length; i++) {
		if (rootLink[i].id) {
			var matchAfbeelding = rootLink[i].id.match("^afbeelding_([0-9]+)$");

			if (matchAfbeelding != null) {
				// Haal source van thumb op
				// afbeeldingSource = rootLink[i].childNodes[1].src;

				// Filter het thumbnail stukje eruit.
				// afbeeldingSource =
				// afbeeldingSource.match("^(.+?).156x156.(.+?)$");
				// afbeeldingArray.push(afbeeldingSource);
				// Nieuwe Code:
				for ( var counter = 0; counter < rootLink[i].childNodes.length; counter++) {
					if (rootLink[i].childNodes[counter] instanceof HTMLImageElement) {
						if (rootLink[i].childNodes[counter].src
								.match("^(.+?).485x485.(.+?)$")) {
							afbeeldingArray
									.push(rootLink[i].childNodes[counter].src);
						}
					}
				}
			}
		}
	}

	return (afbeeldingArray);
}

function getAfbeeldingLayer() {
	var afbeeldingLayer = document.getElementById('afbeeldingLayer');

	if (!afbeeldingLayer) {
		afbeeldingLayer = document.createElement('div');
		afbeeldingLayer.id = 'afbeeldingLayer';
		afbeeldingLayer.count = 0;
		document.body.insertBefore(afbeeldingLayer, document.body.firstChild);
	}

	if (afbeeldingLayer.count == undefined) {
		afbeeldingLayer.count = 0;
	}

	return afbeeldingLayer;
}

function showAfbeeldingLayer(activeImage) {
	var afbeeldingArray = getAfbeeldingArray();
	var afbeeldingLayer = getAfbeeldingLayer();
	tempimg = new Image();
	tempimg.src = afbeeldingArray[activeImage];

	// IN IE6 en FF is de width bij niks 0, bij IE7 is dat 28
	if (tempimg.width > 30) {
		// afbeeldingLayer.style.width = tempimg.width+'px';
		afbeeldingLayer.style.height = tempimg.height + 40 + 'px';
	}

	var imageBack = activeImage - 1;
	var imageForward = imageBack + 2;

	var closeLayer = "<div id='afbeeldingLayerClose'><a href='#' onClick='hideAfbeeldingLayer()'><img src='/images/melding_close.gif' alt='Sluit melding' /></a></div>";
	var afbeelding = '<div class="popupAfbeelding"><img id="bigFoto" src="'
			+ afbeeldingArray[activeImage] + '" alt="Grote foto" /></div>';
	if (!imageBack < 1) {
		var navigatieBack = '<div class="popupAfbeeldingBack"><a href="#" onclick="showAfbeeldingLayer('
				+ imageBack
				+ ');"><img src="/images/woningaanbod_details_vorige.gif" alt="Vorige foto" /></a></div>';
	} else {
		var navigatieBack = '<div class="popupAfbeeldingBack">&nbsp;</div>';
	}

	if (imageForward <= afbeeldingArray.length - 1) {
		var navigatieForward = '<div class="popupAfbeeldingForward"><a href="#" onclick="showAfbeeldingLayer('
				+ imageForward
				+ ');"><img src="/images/woningaanbod_details_volgende.gif" alt="Volgende foto" /></a></div>';
	} else {
		var navigatieForward = '<div class="popupAfbeeldingForward">&nbsp;</div>';
	}

	var positie = '<div class="popupafbeeldingPositie">' + activeImage
			+ ' van ' + (afbeeldingArray.length - 1) + '</div>';

	afbeeldingLayer.innerHTML = closeLayer + afbeelding + navigatieBack
			+ positie + navigatieForward;

	if (document.getElementById("bigFoto").height > 0) {
		afbeeldingLayer.style.height = document.getElementById("bigFoto").height
				+ 50 + 'px';
	} else {
		afbeeldingLayer.style.height = 413 + 'px';
	}

	afbeeldingLayer.style.display = 'block';
}

function hideAfbeeldingLayer() {
	var afbeeldingLayer = getAfbeeldingLayer();
	afbeeldingLayer.style.display = 'none';
}