var DOMReady = {
onDOMReadyHandler : function() {},
// returns true if listener is active, otherwise - false (that means that
// window.onload is used
listenDOMReady : function() {
var browser = navigator.userAgent;
var is_safari = /(safari|webkit)/i.test(browser);
var is_opera = /opera/i.test(browser);
var is_msie = /msie/i.test(browser);
var is_mozilla = /mozilla/i.test(browser) && !/(compatible|webkit)/i.test(browser);
	if (is_opera || is_mozilla){
		this.attachEvent(document, "DOMContentLoaded", this.onDOMReadyHandler); 
		return true;
	}
	if (is_msie) {
		document.write('<script id="dr_ie_script" defer="true" src="javascript:;"><\/script>');
		document.getElementById("dr_ie_script").onreadystatechange = function(){
			if (this.readyState == "complete") DOMReady.onDOMReadyHandler();
		};
		return true;
	}
	if (is_safari) {
		this.domReadyTimer = window.setInterval(function(){
			if (document.readyState == "loaded" ||
				document.readyState == "complete") {

				window.clearInterval(DOMReady.domReadyTimer);
				DOMReady.onDOMReadyHandler();
			}
		}, 10);
		return true;
	}
	// use onload event otherwise
	this.attachEvent(window, "load", DOMReady.onDOMReadyHandler);
	return false;
},
// timer (used with Safari)
domReadyTimer : null,
// set event handler
attachEvent : function(obj, event, handler) {
	if (obj.addEventListener) {
		obj.addEventListener(event, handler, false);
	} else {
		if (obj.attachEvent) {
			obj.attachEvent('on'+event, handler);
		}
	}
},
// remove event handler
detachEvent : function(obj, event, handler) {
	if (obj.removeEventListener) {
		obj.removeEventListener(event, handler, false);
	} else {
		if (obj.detachEvent) {
			obj.detachEvent('on'+event, handler);
		}
	}
}
};
DOMReady.onDOMReadyHandler = thumbs;
DOMReady.listenDOMReady();
/* 		einde domready/onload 		*/

//begin script



//globals
var numA;
var pages;
var page;

function thumbs() {
	var thumbDiv = document.getElementById('makelaarDetailGrijsThumbs');
	if (thumbDiv) {
		thumbDiv.style.position="relative";
		var a = thumbDiv.getElementsByTagName('a');
		numA = a.length;
		
		if (numA > 20){
			pages = 3;
			init(thumbDiv,a);	
		}else if (numA > 10){
			pages = 2;
			init(thumbDiv,a);		
		}
	}
}

function init(thumbDiv,a) {
	for(var i=10; i < numA; i++){ /*verberg alles boven de 10*/
		
		a[i].style.visibility="hidden";
		img = a[i].getElementsByTagName('img');		
		img[0].style.height="0px";
		img[0].style.margin="0px";
		
	}
	page = 1;
	resizeDivs(); /*resize de containers */
	makeButton('next');
	//makeButton('prev');
	//makeButton('both');
	
}
/*function insertAfter(newElement,targetElement) { 
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}*/

function makeButton(kind) {
	var thumbDiv = document.getElementById('makelaarDetailGrijsThumbs');
	var span = document.getElementById("buttonsplaceholder");
	span.innerHTML="";
	span.style.position="absolute";
	span.style.left="5px";
	span.style.bottom="5px";
	
	switch(kind)
	{
	case 'next':
		
		var a = document.createElement("a");
		var text = document.createTextNode("[Volgende]");
		a.appendChild(text);
		a.setAttribute("href","#");
		a.onclick = function(){return showPic('next');} 		
		span.appendChild(a); 		
		
		break;    
	case 'prev':
		
		var a = document.createElement("a");
		var text = document.createTextNode('[Vorige]');
		a.appendChild(text);
		a.setAttribute("href","#");
		a.onclick = function(){return showPic('prev');} 		
		span.appendChild(a);		
		
		break;
	case 'both':
		
		var a = document.createElement("a");
		var text = document.createTextNode('[Vorige]');
		a.appendChild(text);
		a.setAttribute("href","#");
		a.onclick = function(){return showPic('prev');} 
		span.appendChild(a);
		
		var a = document.createElement("a");
		var text = document.createTextNode('[Volgende]');
		a.appendChild(text);
		a.setAttribute("href","#");
		a.onclick = function(){return showPic('next');}		
		span.appendChild(a);
		
		break;
	default:
		 break;
	}
}

function showPic(richting){
	if(richting == "next"){
		if (page == 2){
			min = 10;
			x = 20;
		}else{
			min = 0;
			x = 10;
		}
		page ++;
		var thumbDiv = document.getElementById('makelaarDetailGrijsThumbs');
		var a = thumbDiv.getElementsByTagName('a');
		for(var i=min; i < x; i++){ /*verberg 10*/		
			a[i].style.visibility="hidden";
			img = a[i].getElementsByTagName('img');
			img[0].style.height="0px";
			img[0].style.margin="0px";	
		}
		a = thumbDiv.getElementsByTagName('a');
		numA > (x+10) ? max=x+10 : max=numA;
		for(var i=x; i < max; i++){ 
			a[i].style.visibility="visible";
			img = a[i].getElementsByTagName('img');		
			img[0].style.height= "90px";
			img[0].style.margin= "5px";
		}
		
		if((page > 1)&&(pages > 2)&&(page != pages)){
			makeButton('both');
		}else makeButton('prev');
		
	}else{
		if (page == 2){
			y = 0;
			x = 10;
		}else{
			y = 10;
			x = 20;
		}
		page --;
		var thumbDiv = document.getElementById('makelaarDetailGrijsThumbs');
		var a = thumbDiv.getElementsByTagName('a');
		for(var i=x; i < numA; i++){ /*verberg 10*/		
			a[i].style.visibility="hidden";
			img = a[i].getElementsByTagName('img');
			img[0].style.height="0px";
			img[0].style.margin="0px";	
		}
		a = thumbDiv.getElementsByTagName('a');
		for(var i=y; i <(y + 10); i++){ 
			a[i].style.visibility="visible";
			img = a[i].getElementsByTagName('img');		
			img[0].style.height= "90px";
			img[0].style.margin= "5px";
		}
		
		if((page > 1)&&(pages > 2)&&(page != pages)){
			makeButton('both');
		}else makeButton('next');
	}	
	return false;
}

function resizeDivs(){
	div1 = document.getElementById('makelaarDetailGrijsThumbs');
	div2 = document.getElementById('makelaarDetailGrijsFoto');
	div1.style.height='524px';
	div2.style.height='524px';
}