// start the content area scrolling and continue to scroll until the layer.scroller interval is cleared
function startScroll(id, direction) {
	var layer = document.getElementById(id);
	clearInterval(layer.scroller);
	layer.scroller = setInterval("scrollLayer('" + id + "', " + direction + ")", 50);
}
// stop the content area from scrolling
function stopScroll(id) {
	var layer = document.getElementById(id);
	clearInterval(layer.scroller);
}
// shift the layer down a certain amount.  Sync up the scroll bar if present.
function scrollLayer(id, direction) {
	scrollTo(id, -1 * (document.getElementById(id).offsetTop + direction * 20));
}
// scroll to specific position (can be used to scroll to a specific point)
function scrollTo(id, offsetTop) {
	var layer = document.getElementById(id);
	// get shifted top
	var top = -offsetTop;
	if (top > 0) {
		top = 0;
	}
	var maxheight = (layer.parentNode.offsetHeight - layer.offsetHeight);
	if (top < maxheight) {
		top = maxheight;
	}
	layer.style.top = top + 'px';
	// shift bar
	if (layer.slider) {
		top = -1 * top * layer.ratio;
		if (top < 0) {
			top = 0;
		}
		maxheight = layer.slider.maxheight;
		if (top > maxheight) {
			top = maxheight;
		}
		layer.slider.style.top = top + 'px';
	}
}
// add the functionality for an up or down scroll arrow element
function addScroller(control, content, direction) {
	var controller = document.getElementById(control);
	controller.content = content;
	controller.href = "javascript: scrollLayer('" + content + "', " + direction + "); stopScroll('" + content + "');";
	controller.onmousedown = function() { startScroll(content, direction); };
	controller.onmouseup = function() { stopScroll(content); };
}
// this adds the bar, the slider, and the up and down arrows
function addScrollBar(content, hidebar) {
	var layer = document.getElementById(content);
	var wrapper = layer.parentNode;
	var originalContent = wrapper.innerHTML;
	// add bar code to content parent
	wrapper.innerHTML += '<a id="' + content + '_up" class="scrollup"></a><a id="' + content + '_down" class="scrolldown"></a>';
	if (!hidebar) {
		wrapper.innerHTML += '<div id="' + content + '_bar" class="scrollbar"><div id="' + content + '_slider" class="slider"></div></div>';
	}
	
	addScroller(content + '_up', content, 1);
	addScroller(content + '_down', content, -1);

	// re-fetch layer since dom rebuilt
	layer = document.getElementById(content);
	// calculate bar height/position
	// calculate whole bar height
	var wrapperheight = layer.parentNode.offsetHeight;
	var contentheight = layer.offsetHeight;
	var ratio = (wrapperheight / contentheight);
	if (ratio >= 1) {
		// if the content is smaller than the viewport, the scrollbars aren't needed
		wrapper.innerHTML = originalContent;
		return;
	}
	if (!hidebar) {
		var bar = document.getElementById(content + '_bar');
		bar.style.height = (wrapperheight - 26) + 'px';
		var slider = document.getElementById(content + '_slider');
		slider.style.height = (wrapperheight - 26) * ratio + 'px';
		slider.maxheight = (bar.offsetHeight - slider.offsetHeight);
		slider.content = content;
		// assign values for later
		layer.slider = slider;
		layer.ratio = ratio;
		// add click event to bar
		bar.content = content;
		bar.onclick = function(e) {
			var e = e || window.event;
			var x = (e.offsetX ? e.offsetX : e.layerX);
			var y = (e.offsetY ? e.offsetY : e.layerY);
			var thecontent = document.getElementById(this.content);
			// calculate top of slider
			var slider = thecontent.slider;
			var top = parseInt(slider.style.top);
			if (isNaN(top)) {
				top = 0;
			}
			// calculate bottom of slider
			var bottom = top + slider.offsetHeight;
			if (y < top) {
				// scroll up
				scrollLayer(this.content, 1);
			} if (y > bottom) {
				// scroll down
				scrollLayer(this.content, -1);
			}
		};
		slider.onmousedown = function(e) {
			var e = e || window.event;
			var mousePos = mouseCoords(e);
			dragObject = this;
			dragObject.startX = mousePos.x;
			dragObject.startY = mousePos.y;
			dragObject.startTop = this.offsetTop;
			var layer = document.getElementById(dragObject.content);
			layer.startTop = layer.offsetTop;
			document.body.ondrag = function () { return false; };
			document.body.onselectstart = function () { return false; };
		};
	}
}
var dragObject;
// handle the dragging of the slider
function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}
document.onmousemove = function(e) {
	if (dragObject) {
		var e = e || window.event;
		var mousePos = mouseCoords(e);
		
		var delta = mousePos.y - dragObject.startY;
		var newtop = (dragObject.startTop + delta);
//					document.getElementById('debug').innerHTML = dragObject.startTop + ', (' + mousePos.x + ',' + mousePos.y + ' newtop for slider = ' + newtop;
		if (newtop < 0) {
			newtop = 0;
		}
		if (newtop > dragObject.maxheight) {
			newtop = dragObject.maxheight;
		}
		dragObject.style.top = newtop + 'px';
		// also move layer
		var layer = document.getElementById(dragObject.content);
		newtop = (layer.startTop - delta / layer.ratio);
		if (newtop > 0) {
			newtop = 0;
		}
		var maxheight = (layer.parentNode.offsetHeight - layer.offsetHeight);
		if (newtop < maxheight) {
			newtop = maxheight;
		}
		layer.style.top = newtop + 'px';
		return false;
	}
};
document.onmouseup = function() {
	dragObject = null;
};
if (document.captureEvents) document.captureEvents(Event.onClick);