function HorizontalScrollBar()
{
	var D;
	var D0;
	var D1;
	var D2;
	var D3;
	var D4;
	var T0;
	
	var width = 20;

	this.BackgroundColor = '#FFFFFF';
	
	this.ScrollbarColor = '#FFFFFF';
	
	this.BorderColor = '#D6D6D6';
	
	this.ScrollButtonColor = '#E5E5E5';
	
	this.Left = 0;
	
	this.Top = 0;
	
	this.Width = 20;
	
	this.Height = 20;

	this.Parent = null;

	this.Position = 'absolute';
	
	D = this;

	D4 = null;

	var visibleAreaPercent = 30;
	var position = 0;
	var scrollStepPercent = 7;
	var isCaptured = false;
	var offsetX = 0;

	this.Initialize = function()
	{
		D0 = document.createElement('div');
		
		Refresh();

		D.Parent.appendChild(D0);

		PositionMarker();
	}

	this.SetWidth = function(n)
	{
		width = n;

		if (D0)
		{
			D0.style.width = width;

			PositionMarker();
		}
	}

	var Refresh = function()
	{
		if (D0)
		{
			D0.style.backgroundColor = D.BackgroundColor;

			D0.style.position = D.Position;

			if (D.Left)
			{
				D0.style.left = D.Left;
			}

			if (D.Top)
			{
				D0.style.top = D.Top;
			}
			/*
			if (D.Width)
			{
				D0.style.width = D.Width;
			}
			*/
			
			D0.style.width = width;

			if (D.Height)
			{
				D0.style.height = D.Height;
			}

			D0.style.overflow = 'hidden';
			
			D0.setAttribute('unselectable', 'on');
			
			D0.className = 'divElement';
			
			D0.style.cursor = 'default';
			
				var r;
				var c;

				T0 = document.createElement('table');
				T0.style.position = 'relative';
				T0.style.height = '100%';
				T0.style.width = '100%';
				T0.cellSpacing = 1;
				T0.cellPadding = 0;
				T0.style.backgroundColor = D.BorderColor;
				T0.setAttribute('unselectable', 'on');

				r = T0.insertRow(-1);

				c = r.insertCell(-1);
				c.style.width = '20';
				//c.style.backgroundColor = 'maroon';
				c.setAttribute('unselectable', 'on');

					D1 = document.createElement('div');
					D1.style.position = 'relative';
					D1.style.backgroundColor = D.BackgroundColor;
					D1.style.width = '20';
					D1.style.height = '100%';
					D1.style.overflow = 'hidden';
					D1.setAttribute('unselectable', 'on');
					D1.className = 'divElement';
					D1.style.backgroundPosition = 'center center';
					D1.style.backgroundRepeat = 'no-repeat';
					D1.onclick = ScrollUp;
					D1.style.backgroundImage = 'url(' + WEB_SITE + 'images/scroll_left.gif' + ')';
					
				c.appendChild(D1);
				
				c = r.insertCell(-1);
				//c.style.backgroundColor = 'maroon';
				c.setAttribute('unselectable', 'on');

					D3 = document.createElement('div');
					D3.style.position = 'relative';
					D3.style.backgroundColor = D.ScrollbarColor;
					D3.style.width = '100%';
					D3.style.height = '100%';
					D3.style.overflow = 'hidden';
					D3.setAttribute('unselectable', 'on');
					D3.className = 'divElement';
					D3.onclick = ScrollBarClicked;
					D3.innerHTML = ' ';
					
				c.appendChild(D3);

				c = r.insertCell(-1);
				c.style.width = '20';
				//c.style.backgroundColor = 'maroon';
				c.setAttribute('unselectable', 'on');
				
					D2 = document.createElement('div');
					D2.style.position = 'relative';
					D2.style.backgroundColor = D.BackgroundColor;
					D2.style.width = '20';
					D2.style.height = '100%';
					D2.style.overflow = 'hidden';
					D2.setAttribute('unselectable', 'on');
					D2.className = 'divElement';
					D2.style.backgroundPosition = 'center center';
					D2.style.backgroundRepeat = 'no-repeat';
					D2.onclick = ScrollDown;
					D2.style.backgroundImage = 'url(' + WEB_SITE + 'images/scroll_right.gif' + ')';

				c.appendChild(D2);

			D0.appendChild(T0);
		}
	}

	this.GetVisibleAreaPercent = function()
	{
		return visibleAreaPercent;
	}
	
	this.SetVisibleAreaPercent = function(value)
	{
		if (isFinite(value))
		{
			visibleAreaPercent = Math.max(0, Math.min(100 - position, value));
		}
		else
		{
			visibleAreaPercent = 0;
		}

		PositionMarker();
	}
	
	this.GetPosition = function()
	{
		return position;
	}
	
	this.SetPosition = function(value)
	{
		SetPosition(value);
	}
	
	var SetPosition = function(value)
	{
		if (!isNaN(value))
		{
			position = Math.max(0, Math.min(100 - visibleAreaPercent, value));
		}
		else
		{
			position = 0;
		}

		PositionMarker();
	}

	this.GetScrollStepPercent = function()
	{
		return scrollStepPercent;
	}

	this.SetScrollStepPercent = function(value)
	{
		if (isFinite(value))
		{
			if ((value >= 0) && (value <= 100))
			{
				scrollStepPercent = value;
			}
		}
		else
		{
			scrollStepPercent = 0;
		}
	}
	
	this.SetParameters = function(x, d)
	{
		if (!isNaN(x))
		{
			position = Math.max(0, Math.min(100 - d, x));
		}
		else
		{
			position = 0;
		}

		if (isFinite(d))
		{
			visibleAreaPercent = Math.max(0, Math.min(100 - x, d));
		}
		else
		{
			visibleAreaPercent = 0;
		}
		
		PositionMarker();
		
		scrollEvent.fire();
	}

	var PositionMarker = function()
	{
		if (D0)
		{
			if ((D4 == null) || (D4 == undefined))
			{
				D4 = document.createElement('div');
				D4.style.position = 'absolute';
				D4.style.backgroundColor = D.ScrollButtonColor;
				D4.style.borderWidth = 1;
				D4.style.borderStyle = 'solid';
				D4.style.borderColor = D.BorderColor;
				D4.style.left = 1;
				D4.style.top = 1;
				D4.style.width = '10';
				D4.style.height = ((D3.offsetHeight) ? D3.offsetHeight : D3.style.pixelHeight) - 2;
				D4.style.overflow = 'hidden';
				D4.setAttribute('unselectable', 'on');
				D4.className = 'divElement';
				D4.style.visibility = 'hidden';
				
				D4.onmousedown = StartCapture;
				D4.onmouseup = EndCapture;
				D4.onmouseout = EndCapture;
				D4.onmousemove = MoveMarker;
	
				D3.appendChild(D4);
			}
	
			var p;
			var w;
			var W;
	
			if ((visibleAreaPercent == 0) || (visibleAreaPercent >= 100))
			{
				D4.style.visibility = 'hidden';
			}
			else
			{
				W = Math.max(0, ((D3.offsetWidth) ? D3.offsetWidth : D3.style.pixelWidth));
	
				w = Math.round((visibleAreaPercent * W) / 100);
	
				p = Math.round((position * W) / 100);
	
				if (w != 0)
				{
					D4.style.width = w;
					
					D4.style.left = p;
	
					D4.style.visibility = 'visible';
				}
				else
				{
					D4.style.visibility = 'hidden';
				}
			}
		}
	}

	var MoveMarker = function(event)
	{
		var e;
		var d;
		var W;

		if (isCaptured)
		{
			e = (event) ? event : window.event;

			d = (e.offsetX) || (e.layerX);

			W = ((D3.offsetWidth) ? D3.offsetWidth : D3.style.pixelWidth);

			SetPosition(position + (100 * (d - offsetX) / W));

			scrollEvent.fire();
		}
	}

	var StartCapture = function(event)
	{
		var c;
		var e;

		isCaptured  = true;

		e = (event) ? event : window.event;

		c = (event) ? event.target : window.event.srcElement;

		offsetX = (e.offsetX) || (e.layerX);
	}

	var EndCapture = function()
	{
		isCaptured  = false;
	}

	// Events
	var scrollEvent;

	scrollEvent = new Event('Scroll', null);

	this.Subscribe = function(type, fn, obj, override)
	{
		if (type == scrollEvent.type)
		{
			scrollEvent.subscribe(fn, obj, override);
		}
	}

	var ScrollUp = function()
	{
		SetPosition(position - scrollStepPercent);

		scrollEvent.fire();
	}

	var ScrollDown = function()
	{
		SetPosition(position + scrollStepPercent);
		
		scrollEvent.fire();
	}

	var ScrollPageUp = function()
	{
		SetPosition(position - visibleAreaPercent);

		scrollEvent.fire();
	}

	var ScrollPageDown = function()
	{
		SetPosition(position + visibleAreaPercent);

		scrollEvent.fire();
	}

	var ScrollBarClicked = function(event)
	{
		var x;
		var W;
		var e;
		var c;

		e = (event) ? event : window.event;

		c = (event) ? event.target : window.event.srcElement;

		if (c == D3)
		{
			x = (e.offsetX) || (e.layerX);

			W = ((D3.offsetWidth) ? D3.offsetWidth : D3.style.pixelWidth);

			if ((x >= 0) && (x <= (Math.round((position * W) / 100))))
			{
				ScrollPageUp();
			}
			else if ((x >= (Math.round((position * W) / 100) + Math.round((visibleAreaPercent * W) / 100))) && (x < (W)))
			{
				ScrollPageDown();
			}
		}
	}
}