// TODO: Add page up/down by clicking bar functionality
// TODO: Turn it into a simple Rails plugin

document.onload = function() {
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;
}
var scrollbarArray = [];

var dragObject  = null;
var mouseOffset = null;
var scrollingDiv = null;
var dragStartX = null;
var dragStartY = null;
var mouseStartX = null;
var mouseStartY = null;

var max_scroll = 0;
var min_scroll = 0;

function mouseMove(ev){
	if(!ev) ev = window.event;
	
	var mousePos = mouseCoords(ev);

	if(dragObject){
		if(target.scrollHeight > target.offsetHeight) {
		// if(dragObject.scrollHeight > dragObject.offsetHeight) {
			var newY = dragStartY - mouseStartY + mousePos.y;
			if(newY > max_scroll) {
				newY = max_scroll;
			}
			else if (newY < min_scroll) {
				newY = min_scroll;
			}
			dragObject.style.top = newY + 'px';
			var myRatio = 1 - (max_scroll - newY)/(max_scroll - min_scroll);
			scrollingDiv.scrollTop = Math.round(myRatio * (scrollingDiv.scrollHeight - scrollingDiv.offsetHeight));
			// $('test').innerHTML = 'y: ' + newY + ', ' + max_scroll + ', ' + (scrollingDiv.scrollHeight - scrollingDiv.offsetHeight);
		}
		else {
			var newX = dragStartX - mouseStartX + mousePos.x;
			if(newX > max_scroll) {
				newX = max_scroll;
			}
			else if (newX < min_scroll) {
				newX = min_scroll;
			}
			dragObject.style.left = newX + 'px';
			var myRatio = 1 - (max_scroll - newX)/(max_scroll - min_scroll);
			scrollingDiv.scrollLeft = Math.round(myRatio * (scrollingDiv.scrollWidth - scrollingDiv.offsetWidth));
			// $('test').innerHTML = 'x: ' + newX + ', ' + max_scroll + ', ' + scrollingDiv.scrollLeft;
		}
		return false;
	}
}

function mouseUp(){
	dragObject = null;
	mouseStartX = null;
	mouseStartY = null;
}

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
	};
}

function makeDraggable(item, max, min){
	if(!item) return;
	item.onmousedown = function(ev){
		if(!ev) ev = window.event;
		dragObject  = this;
		mouseStartX = mouseCoords(ev).x;
		mouseStartY = mouseCoords(ev).y;
		dragStartX = (this.style.left == '') ? 0 : this.style.left.replace('px', '');
		dragStartY = (this.style.top == '') ? 0 : this.style.top.replace('px', '');
		max_scroll = max;
		min_scroll = min;
		return false;
	}
}

function makeScrollBar(tar, id, max, min, horizontal) {
	target = document.getElementById(tar);
	// parent = target.parentNode;
	min = (min == null) ? 0 : min;
	if(document.getElementById(id) == null) {
		// alert(parent.scrollHeight + ' ? ' + parent.offsetHeight + ', ' + parent.scrollWidth + ' ? ' + parent.offsetWidth + ', ' + target.scrollHeight + ' ? ' + target.offsetHeight + ', ' + target.scrollWidth + ' ? ' + target.offsetWidth)
		// if(parent.scrollHeight > parent.offsetHeight || parent.scrollWidth > parent.offsetWidth || target.scrollHeight > target.offsetHeight || target.scrollWidth > target.offsetWidth) {
		if(target.scrollHeight > target.offsetHeight || target.scrollWidth > target.offsetWidth) {
			// scrollingDiv = parent;
			scrollingDiv = target;
			scrollDiv = document.createElement('div');
			scrollDiv.setAttribute('class', 'scroll_bar');
			scrollDiv.setAttribute('id', id);
			knobDiv = document.createElement('div');
			knobDiv.setAttribute('class', 'scroll_knob');
			knobDiv.setAttribute('id', id + '_knob');
			if(horizontal){
				w = Math.round(target.offsetWidth * (target.offsetWidth / target.scrollWidth));
				if(w < 40) { w = 40; }
				knobDiv.style.width = w + "px";
				max = max - w;
			}
			else {
				h = Math.round(target.offsetHeight * (target.offsetHeight / target.scrollHeight));
				if(h < 40) { h = 40; }
				knobDiv.style.height = h + "px";
				max = max - h;
			}			
			makeDraggable(knobDiv, max, min);
			scrollDiv.appendChild(knobDiv);
			// parent.parentNode.insertBefore(scrollDiv, parent);
			if(horizontal) {
				target.parentNode.appendChild(scrollDiv);
			}
			else {
				target.parentNode.insertBefore(scrollDiv, target);				
			}
			target.style.overflow = "hidden";
			// parent.style.overflow = "hidden";
		}
	}
	else {
		if(horizontal) {
			h = Math.round(target.offsetWidth * (target.offsetWidth / target.scrollWidth));
		}
		else {
			h = Math.round(target.offsetHeight * (target.offsetHeight / target.scrollHeight));
		}
		if(h < 40) { h = 40; }
		max = max - h;
		scrollingDiv = target;
		makeDraggable($(id + '_knob'), max, min);
	}
}