function VerticalScrollBar()
{
	var D;
	var D0;
	var D1;
	var D2;
	var D3;
	var D4;
	var T0;

	this.BackgroundColor = '#FFFFFF';
	
	this.ScrollbarColor = '#F4F2FF';
	
	this.BorderColor = '#BBB2FF';
	
	this.ScrollButtonColor = '#E8E5FF';
	
	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 offsetY = 0;

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

		D.Parent.appendChild(D0);

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

			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.height = '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 = '100%';
					D1.style.height = '100%';
					D1.style.overflow = 'hidden';
					D1.style.backgroundPosition = 'center center';
					D1.setAttribute('unselectable', 'on');
					D1.className = 'divElement';
					D1.onclick = ScrollUp;
					D1.style.backgroundImage = 'url(' + WEB_SITE + 'images/scroll_up.gif' + ')';
					
				c.appendChild(D1);
				
				r = T0.insertRow(-1);
				
				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;
					
				c.appendChild(D3);
				
				r = T0.insertRow(-1);
				
				c = r.insertCell(-1);
				c.style.height = '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 = '100%';
					D2.style.height = '100%';
					D2.style.overflow = 'hidden';
					D2.style.backgroundPosition = 'center center';
					D2.setAttribute('unselectable', 'on');
					D2.className = 'divElement';
					D2.onclick = ScrollDown;
					D2.style.backgroundImage = 'url(' + WEB_SITE + 'images/scroll_down.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();
		
		scrollEvent.fire();
	}
	
	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();
		
		scrollEvent.fire();
	}
	
	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();
	}

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

	this.SetScrollStepPercent = function(value)
	{
		if (isFinite(value))
		{
			if ((value >= 0) && (value <= 100))
			{
				scrollStepPercent = value;
			}
		}
		else
		{
			scrollStepPercent = 0;
		}
	}

	var PositionMarker = function()
	{
		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 = 0;
			D4.style.width = ((D3.offsetWidth) ? D3.offsetWidth : D3.style.pixelWidth) - 2;
			D4.style.height = '10';
			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 h;
		var H;

		if ((visibleAreaPercent == 0) || (visibleAreaPercent >= 100))
		{
			D4.style.visibility = 'hidden';
		}
		else
		{
			H = Math.max(0, ((D3.offsetHeight) ? D3.offsetHeight : D3.style.pixelHeight));
			
			h = Math.round((visibleAreaPercent * H) / 100);

			p = Math.round((position * H) / 100);

			if (h != 0)
			{
				D4.style.height = h;
				
				D4.style.top = p;

				D4.style.visibility = 'visible';
			}
			else
			{
				D4.style.visibility = 'hidden';
			}
		}
	}

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

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

			d = (e.offsetY) || (e.layerY);

			H = ((D3.offsetHeight) ? D3.offsetHeight : D3.style.pixelHeight);

			SetPosition(position + (100 * (d - offsetY) / H));
		}
	}

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

		isCaptured  = true;

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

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

		offsetY = (e.offsetY) || (e.layerY);
	}

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

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

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

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

	var ScrollBarClicked = function(event)
	{
		var y;
		var H;
		var e;
		var c;

		e = (event) ? event : window.event;
		
		c = (event) ? event.target : window.event.srcElement;
		
		if (c == D3)
		{
			y = (e.offsetY) || (e.layerY);
	
			H = ((D3.offsetHeight) ? D3.offsetHeight : D3.style.pixelHeight);
	
			if ((y >= 0) && (y <= (Math.round((position * H) / 100))))
			{
				ScrollPageUp();
			}
			else if ((y >= (Math.round((position * H) / 100) + Math.round((visibleAreaPercent * H) / 100))) && (y < (H)))
			{
				ScrollPageDown();
			}
		}
	}
}