var COLLAPSEHEIGHT = 200; // height in pixels of collapsed div
var ROLLDT = 20; // time increment in ms for expand and collapse functions
var ROLLPX = 40; // amount of pixels expanding or collapsing each increment

function collapsedivs() {
	
	divs = document.getElementsByTagName("div");
	for (i=0; i<divs.length; i++) {
		if (divs[i].className=="nieuwsitem") { 
			divs[i].style.display = "inline-block"; // for IE to get a clientHeight
			if (divs[i].clientHeight > COLLAPSEHEIGHT) {  // only to newsitems that are too long
				divs[i].style.height = COLLAPSEHEIGHT+"px";
				// add fadeout at bottom
				document.getElementById(divs[i].id+"fadeout").innerHTML = fadeout_HTML();
				// place expand/collapse button
				document.getElementById(divs[i].id+"ExpandCollapseButton").innerHTML += "<a id=\""+divs[i].id+"a\" onclick=\"expand('"+divs[i].id+"');\" style=\"text-align:right;\"><div style=\"cursor:pointer;\" ><img src=\"images/expandicon.jpg\" alt=\"uitklappen\" /></div></a>"; // image must have surrounding div otherwise the cursor doesn't work in some browsers.
				// document.getElementById(divs[i].id+"a").style.display = "none"; //"<img src=\"images/expandicon.jpg\" alt=\"uitklappen\" style=\"{border:0; cursor:pointer;}\" />"; 
			}
		}
	}
}

function fadeout_HTML() {
	var html = "";
	
	html += "<table class=\"fadeout\">\n";
	for (var i=0; i<10; i++) {
		var opacity = Math.exp(1.2*Math.log(i/10));
		var opacityIE = Math.round(opacity*100);
		html += "<tr><td style=\"background-color:white; opacity:"+opacity+"; filter:alpha(opacity="+opacityIE+");\"></td></tr>\n";
	}
	
	html += "</table>\n";
	
	return html;
}


function expand(divid) {
	div = document.getElementById(divid);
	setTimeout("expandStep(\""+divid+"\");", ROLLDT);
	// div.style.height="auto";

	// remove fadeout
	document.getElementById(divid+"fadeout").innerHTML = "";
	
	a = document.getElementById(divid+"a");
	a.onclick = function() { collapse(divid) };
	a.innerHTML = "<div style=\"cursor:pointer;\"><img src=\"images/collapseicon.jpg\" alt=\"inklappen\" /></div>";
}

function expandStep(divid) {
	div = document.getElementById(divid);
//	alert(div.offsetHeight+'\n'+div.scrollHeight);
	if (div.clientHeight + ROLLPX < div.scrollHeight) { 
		h = div.clientHeight + ROLLPX; 
		div.style.height = h+"px"; 
		setTimeout("expandStep(\""+divid+"\");", ROLLDT); 
	}
	else div.style.height = div.scrollHeight+"px";
}

function collapse(divid) {
	div = document.getElementById(divid);
	// setTimeout("collapseStep(\""+divid+"\");", ROLLDT);
	div.style.height = COLLAPSEHEIGHT + "px";
	
	// reinsert fadeout
	document.getElementById(divid+"fadeout").innerHTML = fadeout_HTML();
	
	a = document.getElementById(divid+"a");
	a.onclick = function() { expand(divid) };
	a.innerHTML = "<div style=\"cursor:pointer;\"><img src=\"images/expandicon.jpg\" alt=\"uitklappen\" /></div>";
}

function collapseStep(divid) {
	div = document.getElementById(divid);
//	alert(div.offsetHeight+'\n'+div.scrollHeight);
	if (div.clientHeight - ROLLPX > COLLAPSEHEIGHT) { 
		h = div.clientHeight - ROLLPX; 
		div.style.height = h+"px"; 
		setTimeout("collapseStep(\""+divid+"\");", ROLLDT); 
	}
	else div.style.height = COLLAPSEHEIGHT + "px";

}