function OpenScrollBar()
{
	this.upImage     = "elAdmin/scrollbars/trainup.png";
	this.downImage   = "elAdmin/scrollbars/traindown.png";
	this.trainImage  = "elAdmin/scrollbars/train.png";
	this.railImage   = "elAdmin/scrollbars/rail.gif";
	this.upImage2   = "elAdmin/scrollbars/up.png";
	this.downImage2 = "elAdmin/scrollbars/down.png";

	this.physicalUp   = null;
	this.physicalDown = null;
	this.containerIDs = null;
	
	this.moveMethod = 0;
	
	this.timeOut = null;
	this.running = false;
	this.speed   = 5;
	this.toRate  = 25;
	this.delta   = 0;
	this.paddingRight = 5;
	
	this.inner = null;
	this.train = null;
	this.trainHeight = 0;
	this.railHeight = 0;
	this.outer = null;
	this.iHeight = null;
	this.oHeight = null;
	
	this.currentInstance = null;
	this.railDown = 0;

	this.mouseY = 0;
	this.imgHeight = 0;
	
	this.overflowBehavior = new Array();
	this.initialized  = false;
}

OpenScrollBar.prototype.preloadImages = function()
{
	if (this.physicalUp.complete == true &&
	    this.physicalUp2.complete == true)
	{
		this.proceedInit(true);
	}
	else
	{
		this.timeOut = window.setTimeout("SBMInstance.preloadImages()",25);
	}
}

OpenScrollBar.prototype.init = function(containerIDs)
{
	this.initialized  = true;
	this.containerIDs = containerIDs;
	
	this.physicalUp       = document.createElement("img");
	this.physicalUp2      = document.createElement("img");
	this.physicalUp.src   = this.upImage;
	this.physicalUp2.src  = this.upImage2;
	
	this.preloadImages();
}

OpenScrollBar.prototype.proceedInit = function (firstRun)
{	
	imgWidth  = this.physicalUp.width;
	imgHeight = this.physicalUp.height;
	imgHeight2 = this.physicalUp2.height;
	this.imgHeight2 = imgHeight2;
	
	
	// Experimental.
	this.imgHeight = imgHeight;
	this.imgWidth  = imgWidth;
		
	for (i=0;i<this.containerIDs.length;i++)
	{
		containerID = this.containerIDs[i];
		this.addCustomScrolling(containerID,firstRun);
		/*
		outer = document.getElementById(containerID);
		oHeight = this.cssToInt(outer.style.height);
		oWidth  = this.cssToInt(outer.style.width);

		rHeight = oHeight-2*imgHeight;
		
		var borderWidth = this.cssToInt(outer.style.borderWidth)+
		                  this.cssToInt(outer.style.padding);
		
		inner = document.createElement("div");
		inner.className = "inner";
		inner.innerHTML = "";
		inner.style.position = "relative";			

		var eBuffer = Array();
		var eLength = outer.childNodes.length;
		for (var j=eLength-1;j>=0;j--)
		{
			eBuffer[j] = outer.removeChild(outer.childNodes[j]);
		}
		
		for (var j=0;j<eLength;j++)
		{
			//if (eBuffer[j] != null)
			{
				inner.appendChild(eBuffer[j]);
			}
		}
		
		inner.style.width = (oWidth-imgWidth-borderWidth-this.paddingRight) + "px";
		outer.appendChild(inner);			

		iHeight = inner.scrollHeight;
		tHeight = Math.round(rHeight*(oHeight/iHeight));
		
		var showBars = false;
		if (firstRun == true)
		{
			this.overflowBehavior[i] = outer.style.overflow != "hidden";
			showBars = (iHeight>oHeight) && (outer.style.overflow != "hidden");
		}
		else
		{
			showBars = (iHeight>oHeight) && this.overflowBehavior[i];
		}
		
		if (showBars == true)
		{
			outer.style.overflow = "hidden";
				
			rail = document.createElement("div");
			rail.name = containerID;
			rail.className = "rail";
			rail.id = "rail";
			rail.style.position = "absolute";
			rail.style.width = imgWidth + "px";
			rail.style.right = "0px";
			rail.style.top = imgHeight+"px";
			rail.style.height = rHeight+"px";
			rail.style.backgroundImage = "url(" + this.railImage + ")";;
			rail.onmousedown = SBMInstance.railDownAction;
			
			train = document.createElement("div");
			train.className = "train";
			train.style.position = "absolute";
			train.style.width = imgWidth + "px";
			train.style.left = "0px";
			train.style.top = "0px";
			train.style.height = tHeight + "px";
			train.style.cursor = "pointer";
			train.style.backgroundImage = "url(" + this.trainImage + ")";
			
			rail.appendChild(train);
			outer.appendChild(rail);
			
			var img       = document.createElement("img");
			img.id        = "up";
			img.className = containerID;
			img.src       = this.upImage;
			
			img.style.position = "absolute";
			img.style.right    = "0px";
			img.style.top      = "0px";
			img.style.cursor   = "pointer";
			img.onmousedown    = SBMInstance.upButtonDown;
			img.onmouseup      = SBMInstance.buttonUp;
			
			outer.appendChild(img);
			
			var img       = document.createElement("img");
			img.id        = "down";
			img.src       = this.downImage;
			img.className = containerID;
				
			img.style.position = "absolute";
			img.style.right    = "0px";
			img.style.bottom   = "0px";
			img.style.cursor   = "pointer";
			img.onmousedown    = SBMInstance.downButtonDown;
			img.onmouseup      = SBMInstance.buttonUp;
				
			outer.appendChild(img);

			if (outer.addEventListener)
			{
				outer.addEventListener('DOMMouseScroll',SBMInstance.mouseWheelEvent,false)
				outer.addEventListener('mousewheel',SBMInstance.mouseWheelEvent,false)
			}
			else if (outer.attachEvent)
			{
				outer.attachEvent('onmousewheel',SBMInstance.mouseWheelEvent);
			}
		}
		else
		{
			inner.style.width = (oWidth-2*borderWidth) + "px";
		}
		*/
	}
}

OpenScrollBar.prototype.getContainerIndexById = function(containerID)
{
	var index = 0;
	for (index=0;index<this.containerIDs.length;index++)
	{
		if (this.containerIDs[index] == containerID)
		{
			break;
		}
	}
	return index;
}

OpenScrollBar.prototype.addCustomScrolling = function(containerID,firstRun,iTop)
{	
	var innerPosition = null;
	
	// Get and measure container.
	outer = document.getElementById(containerID);
	oHeight = this.cssToInt(outer.style.height);
	oWidth  = this.cssToInt(outer.style.width);
	
	if (firstRun == false)
	{
		//alert(containerID)
		//var iList = outer.getElementsByTagName("div");
		//if (iList.length > 0)
		//{
			//alert(iList[0] + ":" + containerID)
		//	innerPosition = inner.style.top;
		//}
		//alert(outer.childNodes[0]);
	}
	
	// Calculate rail height;
	rHeight = oHeight-2*this.imgHeight;
	// Calculate virtual border-width, by respecting border and padding.
	var borderWidth = this.cssToInt(outer.style.borderWidth)+
	                  this.cssToInt(outer.style.padding);
	// Create the inner container for shifting.
	inner = document.createElement("div");
	inner.className = "inner";
	inner.innerHTML = "";
	inner.style.position = "relative";
	
	// Create a buffer and store outer content.
	var eBuffer = Array();
	var eLength = outer.childNodes.length;
	for (var j=eLength-1;j>=0;j--)
	{
		eBuffer[j] = outer.removeChild(outer.childNodes[j]);
	}
	// Transfer outer content from buffer to inner container.
	for (var j=0;j<eLength;j++)
	{
		inner.appendChild(eBuffer[j]);
	}
	// Set width of inner container and append it.
	inner.style.width = (oWidth-imgWidth-borderWidth-this.paddingRight) + "px";
	outer.appendChild(inner);
	// Determine the height of the inner container and calculate rail height.
	iHeight = inner.scrollHeight;
	tHeight = Math.round(rHeight*(oHeight/iHeight));
	// Determine if the scrollbars shall be shown or not.
	var containerIndex = this.getContainerIndexById(containerID);
	var showBars = false;
	if (firstRun == true)
	{
		this.overflowBehavior[containerIndex] = outer.style.overflow != "hidden";
		showBars = (iHeight>oHeight) && (outer.style.overflow != "hidden");
	}
	else
	{
		showBars = (iHeight>oHeight) && this.overflowBehavior[containerIndex];
	}
	
	// Set overflow of outer container to hidden.
	outer.style.overflow = "hidden";
	
	// Display scrollbars, if the flag is true.
	if (showBars == true)
	{
		// Create scrollbar rail.
		rail = document.createElement("div");
		rail.name = containerID;
		rail.className = "rail";
		rail.id = "rail";
		rail.style.position = "absolute";
		rail.style.width = imgWidth + "px";
		rail.style.right = "0px";
		rail.style.top = imgHeight+"px";
		rail.style.height = rHeight+"px";
		rail.style.backgroundImage = "url(" + this.railImage + ")";;
		rail.onmousedown = SBMInstance.railDownAction;
		// Create scrollbar (called train).
		train = document.createElement("div");
		train.className = "train";
		train.style.position = "absolute";
		train.style.width = imgWidth + "px";
		train.style.left = "0px";
		train.style.top = "0px";
		train.style.height = tHeight + "px";
		train.style.cursor = "pointer";
		train.style.backgroundImage = "url(" + this.trainImage + ")";
		// Append rail and train.
		rail.appendChild(train);
		outer.appendChild(rail);
		// Create and append upwards arrow.
		var img       = document.createElement("img");
		img.id        = "up";
		img.className = containerID;
		img.src       = this.upImage;
		img.style.position = "absolute";
		img.style.right    = "0px";
		img.style.top      = "0px";
		img.style.cursor   = "pointer";
		img.onmousedown    = SBMInstance.upButtonDown;
		img.onmouseup      = SBMInstance.buttonUp;
		outer.appendChild(img);
		// Create and append downwards arrow.
		var img       = document.createElement("img");
		img.id        = "down";
		img.src       = this.downImage;
		img.className = containerID;
		img.style.position = "absolute";
		img.style.right    = "0px";
		img.style.bottom   = "0px";
		img.style.cursor   = "pointer";
		img.onmousedown    = SBMInstance.downButtonDown;
		img.onmouseup      = SBMInstance.buttonUp;
		outer.appendChild(img);
		// Add mousewheel event listener.
		if (outer.addEventListener)
		{
			outer.addEventListener('DOMMouseScroll',SBMInstance.mouseWheelEvent,false)
			outer.addEventListener('mousewheel',SBMInstance.mouseWheelEvent,false)
		}
		else if (outer.attachEvent)
		{
			outer.attachEvent('onmousewheel',SBMInstance.mouseWheelEvent);
		}
		
		if (iTop != null)
		{
			var iDelta = this.cssToInt(iTop);
			if (iDelta < 0)
			{
				this.moveMethod = 1;
				this.getContainers(containerID);
				if (this.inner.style.top == "")
				{
					this.inner.style.top = "0px";
				}
				this.moveBy(iDelta);
			}
		}
		if (firstRun == false)
		{
			//alert("moving" + containerID)
			//this.getContainers(containerID);
			
			//if (this.inner.style.top == "")
			//{
///				this.inner.style.top = "0px";
			//}
			
			//this.moveBy(100)
			//alert(innerPosition)
			//inner.style.top = innerPosition;
		}
	}
	else
	{
		// No custom scrolling, set inner container width to outer width.
		// Test for MSIE x.x;
		if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
		{
			inner.style.width = (oWidth-2*borderWidth) + "px";
		}
		else
		{
			inner.style.width = "";
		}
		//inner.style.width = (oWidth-2*borderWidth) + "px";
		//inner.style.border = "1px solid red";
	}
}

OpenScrollBar.prototype.getContainers = function(containerID)
{
	// Get div container.
	this.outer = document.getElementById(containerID);

	// Get inner height.
	inners = this.outer.getElementsByTagName("div");
	for (i=0;i<inners.length;i++)
	{
		if (inners[i].className == "inner" && this.moveMethod == 1)
		{
			this.inner = inners[i];
			this.iHeight = this.inner.scrollHeight;
		}
		if (inners[i].className == "innerContent" && this.moveMethod == 2)
		{
			this.inner = inners[i];
			this.iHeight = this.inner.scrollHeight+2*this.imgHeight2;
		}		
		if (inners[i].className == "rail")
		{
			this.rail = inners[i];
			this.railHeight = this.cssToInt(this.rail.style.height);
		}
		if (inners[i].className == "train")
		{
			this.train = inners[i];
			this.trainHeight = this.cssToInt(this.train.style.height);
		}
	}
}

OpenScrollBar.prototype.buttonDown = function(containerID,delta)
{
	this.running = true;
	this.cSpeed  = delta*this.speed;
	this.delta   = delta;

	this.getContainers(containerID);
	
	//this.iHeight = this.inner.scrollHeight;
	this.oHeight = this.cssToInt(this.outer.style.height);
	
	if (this.inner.style.top == "")
	{
		this.inner.style.top = "0px";
	}
	
	this.moveTimed();
}

OpenScrollBar.prototype.cssToInt = function(cssPixel)
{
	var intPixel = cssPixel.substring(0,cssPixel.length-2);
	intPixel = parseInt(intPixel);
	return(intPixel);
}

OpenScrollBar.prototype.moveTimed = function()
{
	if (this.running == true)
	{
		this.moveBy(this.cSpeed);
		this.cSpeed += this.delta*2;
		
		fCall = "SBMInstance.moveTimed()";
		this.timeOut = window.setTimeout(fCall,this.toRate);
	}
}

OpenScrollBar.prototype.moveBy = function(delta)
{
	var top = this.cssToInt(this.inner.style.top);

	top += delta;		
	if (top > 0)
	{
		top = 0;
	}
	if (top < this.oHeight-this.iHeight)
	{
		top = this.oHeight-this.iHeight;
	}

	this.inner.style.top = top + "px";
	
	if (this.moveMethod == 1)
	{
		this.updateRail(top);
	}
}

OpenScrollBar.prototype.updateRail = function(top)
{
	rDelta = top/this.iHeight*this.railHeight*(-1);
	this.train.style.top = rDelta + "px";
}

OpenScrollBar.prototype.dragTrain = function()
{
	if (this.railDown != 0)
	{
		if (this.railDown == 1)
		{
			this.getContainers(this.currentInstance);
			this.mouseBaseY = this.mouseY;
			this.barBaseY = this.cssToInt(this.train.style.top);
			this.railDown = 2;
		}
	
		var pos = this.barBaseY-(this.mouseBaseY-this.mouseY);
		if (pos < 0)
		{
			pos = 0;
		}
		if (pos > this.railHeight-this.trainHeight)
		{
			pos = this.railHeight-this.trainHeight;
		}
		
		this.train.style.top = pos + "px";
				
		var iTop = pos/this.railHeight;
		iTop = Math.round(iTop*this.iHeight)
		iTop *= -1;
		this.inner.style.top = iTop + "px";
		
		this.timeOut = window.setTimeout("SBMInstance.dragTrain()",this.toRate)
	}
}

OpenScrollBar.prototype.upButtonDown = function()
{
	SBMInstance.moveMethod = 1;
	SBMInstance.buttonDown(this.className,1);
}

OpenScrollBar.prototype.downButtonDown = function()
{
	SBMInstance.moveMethod = 1;
	SBMInstance.buttonDown(this.className,-1);
}

OpenScrollBar.prototype.upButtonDown2 = function()
{
	SBMInstance.moveMethod = 2;
	SBMInstance.buttonDown(this.className,1);
}

OpenScrollBar.prototype.downButtonDown2 = function()
{
	SBMInstance.moveMethod = 2;
	SBMInstance.buttonDown(this.className,-1);
}

OpenScrollBar.prototype.buttonUp = function()
{
	SBMInstance.running = false;
}

OpenScrollBar.prototype.wheelMovement = function(containerID,delta)
{
	this.train = null;
	this.moveMethod = 1;
	this.getContainers(containerID);
		
	if (this.train != null)
	{
		this.oHeight = this.cssToInt(this.outer.style.height);
			
		if (this.inner.style.top == "")
		{
			this.inner.style.top = "0px";
		}
		
		this.moveBy(delta*this.speed*5);
	}
	
	this.moveMethod = 0;
	this.running = false;
}

OpenScrollBar.prototype.mouseWheelEvent = function(ev)
{
	var delta  = 0;
	var srcId  = "";
	//var srcDiv = null;

	/*
	if (!event)
	{
		event = window.event;
	}
	*/
	if (ev.wheelDelta)
	{
		delta = ev.wheelDelta / 120;
	}
	else if (ev.detail)
	{
		delta = -ev.detail / 3;
	}
	
	srcId = this.id;
	if (srcId == null)
	{
		p = ev.srcElement;
		while (p.id.indexOf("drag") != 0 && p.parentElement != null)
		{
			p = p.parentElement;
		}
		
		srcId = p.id;
	}
	
	if (srcId.length > 0)
	{
		SBMInstance.wheelMovement(srcId,delta);
	}
	else
	{
		alert(srcId + ":" + delta);
	}
	return false;
}

OpenScrollBar.prototype.railDownAction = function()
{
	SBMInstance.moveMethod = 1;
	SBMInstance.railDown   = 0;
	SBMInstance.currentInstance = this.name;
	
	document.onmousemove = SBMInstance.mouseMove;
	document.onmouseup   = SBMInstance.railUp;
	
	return false;
}

OpenScrollBar.prototype.railUp = function()
{
	SBMInstance.currentInstance = null;
	SBMInstance.railDown = 0;
	
	return false;
}   
   
OpenScrollBar.prototype.mouseMove = function(ev)
{
	if (SBMInstance.currentInstance != null)
	{				
		ev = ev || window.event;   
		var mousePos = SBMInstance.mouseCoords(ev);
		SBMInstance.mouseY = mousePos[1];
		
		if (SBMInstance.railDown == 0)
		{
			SBMInstance.railDown = 1;
			SBMInstance.dragTrain();
		}
	}
}   

OpenScrollBar.prototype.mouseCoords = function(ev)
{
	coords = Array();
	coords[0] = parseInt(ev.clientX);
	coords[1] = parseInt(ev.clientY);
	return coords;
}

SBMInstance = new OpenScrollBar();