var buttonWidth = 25;

function makeScrollMenu(id, divid) {
	var div = document.getElementById(divid);
	var ul = document.getElementById(id);
	if (ul){
		ul.style.zoom = 1; //ie is stom!
	
		if (ul.nodeName.toLowerCase() == 'ul') {
			
			//check whether items are wrapped over multiple lines
			var height = ul.clientHeight;
			var singleHeight = getSingleLineHeight(ul);
			
			if (singleHeight + 6 < height) {
				ul.style.paddingLeft = buttonWidth + 'px';
				ul.style.paddingRight = buttonWidth + 'px';
	
				ul.style.whiteSpace = 'nowrap';
				ul.style.position = 'absolute';
				ul.maxMargin = 0;
				
				ul.minMargin = -1 * ul.clientWidth + div.clientWidth;
				ul.style.position = 'static';
				
	
				ul.setMargin = function(margin) {
					this.margin = margin;
					this.style.marginLeft = margin + 'px';
				}
				ul.shiftMargin = function(step) {
					var newMargin = this.margin + step*1;
					if (newMargin > this.maxMargin) {
						var newMargin = this.maxMargin;
					} else if (newMargin < this.minMargin) {
						newMargin = this.minMargin;
					}
					if (this.margin != newMargin) {
						this.setMargin(newMargin);
					}
				}
				ul.setMargin(ul.maxMargin);
				makeScrollable(div, ul);
			}
		}
	}
}

/**
 * Make the ul scrollable. This should only be called by makeScrollMenu
 * It inserts buttons into the wrapper and attaches the scroll events to them
 */
function makeScrollable(div, ul) {

	div.style.position = 'relative';
	div.style.overflow = 'hidden';
	
	var left = plainElement('span','<<');
	left.className = 'leftButton';
	left.style.position = 'absolute';
	left.style.width = buttonWidth + 'px';
	left.style.left = 0;
	left.style.top = 0; 
	left.style.cursor = 'default'; 
	left.onmouseover = function () { 
		if(!this.interval) { this.interval = window.setInterval(function() {ul.shiftMargin(2);}, 25); }
	}
	left.onmouseout = function() {
		if (this.interval) {	window.clearInterval(this.interval); this.interval = false; }
	}
	div.appendChild(left);

	var right = plainElement('span','>>');
	right.className = 'rightButton';
	right.style.position = 'absolute';
	right.style.right = 0;
	right.style.top = 0; 
	right.style.cursor = 'default'; 
	right.style.width = buttonWidth + 'px';
	right.onmouseover = function () { 
		if(!this.interval) { this.interval = window.setInterval(function() {ul.shiftMargin(-2);}, 25); }
	}
	right.onmouseout = function() {
		if (this.interval) { window.clearInterval(this.interval); this.interval = false; }
	}
	div.appendChild(right);
}

/**
 * Plaatst de ul absolute en hidden uit de flow in de pagina. Alle li's behalve 1 worden verwijderd
 * waarna de hoogte van een enkele rij kan worden bepaald.
 */
function getSingleLineHeight(zul) {
	if (zul.nodeName && zul.nodeName.toLowerCase() == 'ul') {

		var tst = zul.cloneNode(true);
		tst.style.visibility = 'visible';
		tst.style.position = 'absolute';
		document.body.appendChild(tst);

		var listItems = tst.getElementsByTagName('li');
		while(listItems.length > 1) {
			tst.removeChild(listItems[0]);
		}
		var height = tst.clientHeight * 1;
		document.body.removeChild(tst);
		return height;
	}
	return 0;
}