var Scrollbar = function (id, parent)
{
	this._minValue;
	this._maxValue;
	this._value;
	this._height;	
	this._upHeight;
	this._downHeight;
	this._sliderHeight;
	this._scrollSpeed = 1;

	this._scrollbar = document.createElement("div");
	this._scrollbar.setAttribute("id", id);
	this._scrollbar.style.position = "absolute";
	if (parent == undefined)
	{ 
		document.body.appendChild(this._scrollbar);
	}
	else
	{
		document.getElementById(parent).appendChild(this._scrollbar);
	}

	this._up = document.createElement("img");
	this._up.setAttribute("id", id + "Up");
	this._up.style.position = "absolute";
	this._up.style.cursor = "pointer";
	this._scrollbar.appendChild(this._up);

	this._down = document.createElement("img");
	this._down.setAttribute("id", id + "Down");
	this._down.style.position = "absolute";
	this._down.style.cursor = "pointer";
	this._scrollbar.appendChild(this._down);

	this._slider = document.createElement("img");
	this._slider.setAttribute("id", id + "Slider");
	this._slider.style.position = "absolute";
	this._scrollbar.appendChild(this._slider);

	var self = this;

	this._setSliderPos = function ()
	{ 
		if (self._value == 0)
		{
			self._slider.style.top = self._upHeight;
		}
		else
		{ 
			var scrollArea = self._height - (self._upHeight + self._downHeight + self._sliderHeight);
			self._slider.style.top = ((scrollArea * self._value) / self._maxValue) + self._upHeight + "px"; 
		}

		self.onScroll();		
	};

	function scroll(direction)
	{ 
//		document.getElementById("test").innerHTML += direction + "<br>";
		if (direction == "up")
		{
			if (self._value <= self._minValue)
			{
				self._up.style.cursor = "default";
				self._value = self._minValue;
			}
			else
			{
				self._down.style.cursor = "pointer";	
				self._value -= self._scrollSpeed;
			}
		}
		else
		{
			if (self._value >= self._maxValue)
			{
				self._down.style.cursor = "default";
				self._value = self._maxValue;
			}
			else
			{	
				self._up.style.cursor = "pointer";
				self._value += self._scrollSpeed;
			}
		}

		self._setSliderPos();
		self.onScroll();
	}

	var t1 = 0;
	this._up.onmousedown = function ()
	{
		t1 = setInterval(function(){scroll("up")}, 30);
	};

	this._up.onmouseup = function ()
	{ 
		clearInterval(t1);
	};

	this._up.onmouseout = function ()
	{ 
		clearInterval(t1);
	};

	this._up.ondrag = function ()
	{
		return false;
	};

	this._down.onmousedown = function ()
	{
		t1 = setInterval(function(){scroll("down")}, 30);
	};

	this._down.onmouseup = function ()
	{ 
		clearInterval(t1);
	};

	this._down.onmouseout = function ()
	{ 
		clearInterval(t1);
	};

	this._down.ondrag = function ()
	{
		return false;
	};

	var cyCurrent = 0;
	document.onmousemove = function ()
	{
		cyCurrent = event.clientY;
	};

	function slide(value, cy)
	{ 
//		document.getElementById("test").innerHTML = i++;
		var valuePerPixel = self._maxValue / (self._height - (self._upHeight + self._downHeight + self._sliderHeight));
		var relativeShifting = (cyCurrent - cy) * valuePerPixel; 
		var newValue = value + relativeShifting;
		self._up.style.cursor = "pointer";
		self._down.style.cursor = "pointer";
//		document.getElementById("test3").innerHTML = i++;
		if (newValue < self._minValue)
		{
//			document.getElementById("test").innerHTML = "1: " + newValue;
			self._up.style.cursor = "default";
			self._value = self._minValue;
		}
		else if (newValue > self._maxValue)
		{
//			document.getElementById("test").innerHTML = "2: " + newValue;
			self._down.style.cursor = "default";
			self._value = self._maxValue;
		}
		else
		{
//			document.getElementById("test").innerHTML = "3: " +  newValue;
			self._value = newValue; 
		}		
//		document.getElementById("test").innerHTML = "nv: " +  cyCurrent;
		self._setSliderPos();
//		document.getElementById("test").innerHTML = self._value;
	}

	var t2 = 0;
	this._slider.onmousedown = function ()
	{
		var value = self._value;
		var cy = cyCurrent;
		t2 = setInterval(function(){slide(value, cy)}, 30);
	};

	document.onmouseup = function ()
	{ 
		clearInterval(t2);
	};

	this._slider.ondrag = function ()
	{
		return false;
	};
};

Scrollbar.prototype.height = function (n)
{
	this._height = n;
	this._scrollbar.style.height = n + "px";
	this._down.style.top = (n - this._down.height) + "px";
};

Scrollbar.prototype.upImage = function (s)
{ 
	this._up.src = s;
};

Scrollbar.prototype.upHeight = function (n)
{ 
	this._upHeight = n;
	this._up.style.height = n + "px"; 
};

Scrollbar.prototype.downImage = function (s)
{ 
	this._down.src = s;
};

Scrollbar.prototype.downHeight = function (n)
{ 
	this._downHeight = n;
	this._down.style.height = n + "px";
	this._down.style.position = "absolute";
	this._down.style.top = (this._height - n) + "px";
};

Scrollbar.prototype.sliderImage = function (s)
{ 
	this._slider.src = s;
};

Scrollbar.prototype.sliderHeight = function (n)
{ 
	this._sliderHeight = n;
	this._slider.style.height = n + "px"; 
};

Scrollbar.prototype.minValue = function (n)
{ 
	this._minValue = n;
};

Scrollbar.prototype.maxValue = function (n)
{ 
	this._maxValue = n;
};

Scrollbar.prototype.setValue = function (n)
{ 
	this._value = n;
	this._setSliderPos();
};

Scrollbar.prototype.getValue = function ()
{ 
	return this._value;
};

Scrollbar.prototype.scrollSpeed = function (n)
{ 
	this._scrollSpeed = n;
};

Scrollbar.prototype.onScroll = function (){};