var fScrollableContainer = null;
var fScrollable          = null;
var fSliderContainer     = null;
var fSlider              = null;

var fScrolling           = false;
var fDelta               = 3;
var fMappingFactor       = 0.0;

var SPEED                = 10;

function setupScrollbarContainers() {
	var scrollContainers = getElementsByClass("div", "scrollContainer");
	for (i = 0; i < scrollContainers.length; i++) {
		id = scrollContainers[i].id.split("_")[0];
		if (scrollContainers[i].offsetHeight < document.getElementById(id+"_Scrollable").offsetHeight) {
			document.getElementById(id+"_ScrollableContainer").style.height = (scrollContainers[i].offsetHeight - 25)+"px";
			document.getElementById(id+"_SliderContainer").style.width      = (scrollContainers[i].offsetWidth - 33)+"px";
			document.getElementById(id+"_Slider").style.width               = (document.getElementById(id+"_SliderContainer").offsetWidth * document.getElementById(id+"_ScrollableContainer").offsetHeight / document.getElementById(id+"_Scrollable").offsetHeight)+"px";
		} else {
			document.getElementById(id+"_ScrollableContainer").style.height = (scrollContainers[i].offsetHeight - 1)+"px";
			document.getElementById(id+"_ScrollbarContainer").style.visibility = "hidden";
		}
	}
}

function init(id) {
	fScrollableContainer = document.getElementById(id+"_ScrollableContainer");
	fScrollable          = document.getElementById(id+"_Scrollable");
	fSliderContainer     = document.getElementById(id+"_SliderContainer");
	fSlider              = document.getElementById(id+"_Slider");
	fMappingFactor       = (fSliderContainer.offsetWidth - fSlider.offsetWidth) / (fScrollable.offsetHeight - fScrollableContainer.offsetHeight);
}

function startUp(id) {
	init(id);
	fScrolling = true;
	moveUp();
}

function startDown(id) {
	init(id);
	fScrolling = true;
	moveDown();
}

function moveUp() {
	if (fScrolling == true) {
		if (fScrollable.offsetTop < 0) {
			fScrollable.style.top = (fScrollable.offsetTop + fDelta)+"px";
			fSlider.style.left = (-1 * fScrollable.offsetTop * fMappingFactor)+"px";
			window.setTimeout("moveUp()", SPEED);
		} else {
			fScrolling = false;
		}
	}
}
	
function moveDown() {
	if (fScrolling == true) {
		if ((fScrollable.offsetTop + fScrollable.offsetHeight) > fScrollableContainer.offsetHeight) {
			fScrollable.style.top = (fScrollable.offsetTop - fDelta)+"px";
			fSlider.style.left = (-1 * fScrollable.offsetTop * fMappingFactor)+"px";
			window.setTimeout("moveDown()", SPEED);
		} else {
			fScrolling = false;
		}
	}
}

function stop() {
	fScrolling = false;
}

var fMousePos = null;

function drag(evt) {
	evt = evt ? evt : window.event;
	pos = evt.pageX ? evt.pageX : evt.clientX;
	div = pos - (fMousePos ? fMousePos : pos);
	newTop = fSlider.offsetLeft + div;
	if (newTop < 0) {
		fSlider.style.left = 0+"px";
		fScrollable.style.top = 0+"px";
	} else if ((fSliderContainer.offsetWidth - fSlider.offsetWidth) < newTop) {
		fSlider.style.left = (fSliderContainer.offsetWidth - fSlider.offsetWidth)+"px";
		if (fScrollable.offsetHeight < fScrollableContainer.offsetHeight) {
			fScrollable.style.top = 0+"px";
		} else {
			fScrollable.style.top = (fScrollableContainer.offsetHeight - fScrollable.offsetHeight)+"px";
		}
	} else {
		fSlider.style.left = newTop;
		fScrollable.style.top = (-1 * fSlider.offsetLeft / fMappingFactor)+"px";		
		fMousePos = pos;
	}
}

function startDrag(id) {
	init(id);
	document.getElementById(id+"_Slider").onmousemove = drag;
}

function stopDrag(id) {
	document.getElementById(id+"_Slider").onmousemove = null;
	fMousePos = null;
}