var Scrollbarz = {
	maxScrollBars: 25,
	direction: Array(this.maxScrollBars),
	maxPos: Array(this.maxScrollBars),
	scrollBox: Array(this.maxScrollBars),
	ratio: Array(this.maxScrollBars),
	scrollLength: Array(this.maxScrollBars),
	barItem: Array(this.maxScrollBars),
	buttonItem: Array(this.maxScrollBars),
	
	current: 0,
	offset: 0,
	isDragging: false,
	dragObject: null,
	scrollBars: 0,
	initialized: false,
	
	init: function() {
		document.onselectstart = function() { return false; }
		document.onmousemove = function(e) { Scrollbarz.scrollmM(e); }
		document.onmouseup = function(e) { Scrollbarz.scrollmU(e); }
		this.initialized = true;
	},
	
	updateScrollbar: function(id) {
		var maxScroll = 0;
		var btnSize = 30;
	
		if(this.direction[id] == 0)
			maxScroll = this.scrollBox[id].offsetHeight - this.scrollLength[id];
		else
			maxScroll = this.scrollBox[id].offsetWidth - this.scrollLength[id];
	
		if(maxScroll < 0) {
			btnSize = this.scrollLength[id];
			this.ratio[id] = -1;
			this.maxPos[id] = 0;
			// if(this.barItem[id] != null) this.barItem[id].style.visibility = 'hidden';
		}
		else {
			btnSize = (this.scrollLength[id] * this.scrollLength[id]) / (maxScroll + this.scrollLength[id]);
			if(btnSize < 20) btnSize = 20;
			this.maxPos[id] = this.scrollLength[id] - btnSize;
			this.ratio[id] = maxScroll / this.maxPos[id];
		}
	
		if(this.direction[id] == 0)
			this.buttonItem[id].style.height = btnSize + "px";
		else 
			this.buttonItem[id].style.width = btnSize + "px";
	
		window.setTimeout("Scrollbarz.updateScrollbar("+id+");", 1500);
	},
	
	genScrollbar: function(width, height, content, barwidth, strContainerID, strButtonID, strBarID) {
		if(barwidth == undefined)
			barwidth = 10;
		var text = '';
		text += '<div class="Scrollbarz_HMask" style="width: '+width+'px; height: '+height+'px;">';
		text += '<div class="Scrollbarz_HContainer" id="'+strContainerID+'" style="height: '+height+'px;">'+content+'</div>';
		text += '</div>';
		text += '<div class="Scrollbarz_HBar" id="'+strBarID+'" style="width: '+width+'px; height: '+barwidth+'px; margin-top: '+(height+5)+'px;">';
		text += '<div class="Scrollbarz_HButton" style="height: '+barwidth+'px;" id="'+strButtonID+'"></div>';
		text += '</div>';
		return text;
	},
	addScrollbar: function(width, height, direction, content, barwidth) {
		if(this.initialized == false)
			this.init();
		id = this.scrollBars;
		var strContainerID = 'Scrollbarz_Container_' + id;
		var strButtonID = 'Scrollbarz_Button_' + id;
		var strBarID = 'Scrollbarz_Bar_' + id;
		document.write(this.genScrollbar(width, height, content, barwidth, strContainerID, strButtonID, strBarID));
		id = this.scrollBars;
		this.initScrollbar(id, width, height, direction, strContainerID, strButtonID, strBarID);
	},
	addScrollbarToDiv: function(divid, width, height, direction, content, barwidth) {
		var div = document.getElementById(divid);
		if(div == null) return;
		if(this.initialized == false)
			this.init();
		id = this.scrollBars;
		var strContainerID = 'Scrollbarz_Container_' + id;
		var strButtonID = 'Scrollbarz_Button_' + id;
		var strBarID = 'Scrollbarz_Bar_' + id;
		div.innerHTML += this.genScrollbar(width, height, content, barwidth, strContainerID, strButtonID, strBarID);
		id = this.scrollBars;
		this.initScrollbar(id, width, height, direction, strContainerID, strButtonID, strBarID);
	},
	initScrollbar: function(id, width, height, direction, strContainerID, strButtonID, strBarID) {
		this.direction[id] = direction;
		this.scrollBox[id] = document.getElementById(strContainerID);
		if(direction == 0)
			this.scrollLength[id] = height;
		else
			this.scrollLength[id] = width;
		this.barItem[id] = document.getElementById(strBarID);
		this.buttonItem[id] = document.getElementById(strButtonID);
		this.buttonItem[id].ondrag = function() { return false; }
		this.buttonItem[id].onselectstart = function() { return false; }
		this.scrollBars++;
	
		this.updateScrollbar(id);
	
		if(this.direction[id] == 0) {
			this.buttonItem[id].style.marginTop = "0px";
			this.scrollBox[id].style.marginTop = "0px";
		}
		else {
			this.buttonItem[id].style.marginLeft = "0px";
			this.scrollBox[id].style.marginLeft = "0px";
		}
		
		this.buttonItem[id].addEventListener("mousedown", function(e) { Scrollbarz.scrollmD(e); }, true);
		
		return this.scrollBox[id];
	},
	
	scrollmD: function(e) {
		if(window.event) e = window.event;
		var target = e.target != null ? e.target : e.srcElement;
		var ob = target;
		var id = -1;
		for(i = 0; i < this.scrollBars; i++)
			if(this.buttonItem[i] == ob)
				id = i;
		if(id == -1) return;

		if(this.ratio[id] < 0) return false;
		this.dragObject = ob;
		this.current = id;		
		var dragX = parseInt(this.dragObject.style.marginLeft);
		var dragY = parseInt(this.dragObject.style.marginTop);
		var mouseX = e.clientX;
		var mouseY = e.clientY;
		if(this.direction[id] == 0)
			this.offset = mouseY - dragY;
		else
			this.offset = mouseX - dragX;
		this.isDragging = true;
		document.onselectstart = function() { return false; }
		target.ondragstart = function() { return false; }
		document.body.focus();
		return false;
	},
	
	scrollmM: function(e) {
		if(!this.isDragging) return;
		if(window.event) e = window.event;
	
		if(this.direction[this.current] == 0) {
			var newY = e.clientY - this.offset;
			if(newY < 0) newY = 0;
			if(newY > this.maxPos[this.current]) newY = this.maxPos[this.current];
			this.scrollBox[this.current].style.marginTop = "-" + (newY * this.ratio[this.current]) + "px";
			this.dragObject.style.marginTop = newY + "px";
		} else {
			var newX = e.clientX - this.offset;
			if(newX < 0) newX = 0;
			if(newX > this.maxPos[this.current]) newX = this.maxPos[this.current];
			this.scrollBox[this.current].style.marginLeft = "-" + (newX * this.ratio[this.current]) + "px";
			this.dragObject.style.marginLeft = newX + "px";
		}
		document.body.focus();
		return false;
	},
	
	scrollmU: function() {
		if(!this.isDragging) return;
		this.isDragging = false;
		document.body.focus();
		return false;
	},
}