var slider_animationSpeed = 3; // 1..10
var slider_visibleOptions = 7;

function slider_animateHeight(elem, targetHeight) {
	if (elem.intervalId) {
		clearInterval(elem.intervalId);
	}
	
	elem.intervalId = setInterval(function() {
			var height;
			
			if (Math.abs(elem.offsetHeight - targetHeight) <= 1) {
				height = targetHeight;
				clearInterval(elem.intervalId);
				elem.intervalId = null;
			} else {
				var amount = Math.floor(targetHeight - elem.offsetHeight) / (10 / slider_animationSpeed);
				
				if (Math.abs(amount) < 1) {
					amount = amount < 0 ? -1 : 1;
				}
				
				height = elem.offsetHeight + amount;
			}
			
			elem.style.height = height + "px";
		}, 30);
}

function slider_contractOptions(ul, minOptions) {
	var nodes = ul.childNodes;
	var hidden = 0;
	var visibleHeight = 0;
	for (var i = 0, visible = 0; i < nodes.length && visible < minOptions; i++) {
		if (nodes[i].tagName == "LI") {
			visible++;
			visibleHeight += nodes[i].offsetHeight;
		}
	}
	
	if (visibleHeight < ul.offsetHeight) {
		var elem = getElementsByClass(ul.parentNode, "toggle-button");
		var link;
		
		if (elem.length) {
			link = elem[0];
		} else {
			link = document.createElement("A");
			link.className = "toggle-button";
			link.style.cursor = "pointer";
			ul.parentNode.appendChild(link);
		}
		
		link.innerHTML = "&raquo;...meer";
		link.onclick = function() {
			slider_expandOptions(ul, minOptions);
			return false;
		}
		
		ul.originalHeight = ul.offsetHeight;
		/*ul.style.height = visibleHeight + "px";*/
		slider_animateHeight(ul, visibleHeight);
		ul.style.overflow = "hidden";
	}
}

function slider_expandOptions(ul, minOptions) {
	var nodes = ul.childNodes;
	
	if (ul.offsetHeight < ul.originalHeight) {
		var elem = getElementsByClass(ul.parentNode, "toggle-button");
		var link;
		
		if (elem.length) {
			link = elem[0];
		} else {
			link = document.createElement("A");
			link.className = "toggle-button";
			link.style.cursor = "pointer";
			ul.parentNode.appendChild(link);
		}
		
		link.innerHTML = "&laquo;...minder";
		link.onclick = function() {
			slider_contractOptions(ul, minOptions);
			return false;
		}
	}
	
	/*ul.style.height = ul.originalHeight + "px";*/
	slider_animateHeight(ul, ul.originalHeight);
}

function getElementsByClass(container, className) {
	var children = [];
	
	for (var i = 0; i < container.childNodes.length; i++) {
		if (container.childNodes[i].className == className) {
			children.push(container.childNodes[i]);
		} else {
			var res = getElementsByClass(container.childNodes[i], className);
			if (res.length) {
				children = children.concat(res);
			}
		}
	}
	
	return children;
}

function slider_init() {
	var elems = getElementsByClass(document.getElementById("categories"), "expandable");
	for (var i = 0; i < elems.length; i++) {
		slider_contractOptions(elems[i], slider_visibleOptions);
	}
}

window.onload = function() {
	slider_init();
}