function CategoryBar()
{
	var D;
	var D0;
	var D1;
	var D2;
	var D4;
	var D5;

	var T0;
	var T1;
	var T2;
	var T3;
	var T4;
	
	var V;
	var H;
	
	var P1 = 0;						// Top
	var P2 = 0;						// Left
	var P3 = 100;					// Width
	var P4 = 100;					// Height
	var P5 = SelectionMode.One;		// Selection mode
	
	
	
	
	
	
	

	var container;
	var scrollBar;

	this.Columns = new Array();

	D = this;

	this.CategoryBackgroundColor = 'lime';
	
	this.SelectedCategoryBackgroundColor = '#F0F2FF';

	this.BackgroundColor = 'white';

	this.BorderColor = '#D6D6D6';

	this.CaptionBackgroundColor = '#6D5EDB';

	this.CaptionText = 'This is the caption';

	this.CaptionFont = 'bold 8pt Verdana';

	this.CaptionForegroundColor = '#FFFFFF';

	this.Font = 'normal 8pt Verdana';

	this.HeaderBackgroundColor = '#ECECEC';

	this.HeaderForegroundColor = '#000000';

	this.HeaderFont = 'normal 8pt Verdana';

	this.HeaderBorderColor = '#ADADAD';
	
	this.GridLineColor = '#D4D4D4';

	this.RowHeaderWidth = 24;
	
	this.PreferredRowHeight = 20;
	
	this.Rows = new Array();
	
	this.SelectionBackgroundColor = '#EDEBFF';

	this.Parent = null;

	// Events
	var categoryClickedEvent;
	
	categoryClickedEvent = new Event('CategoryClicked', null);
	
	this.Subscribe = function(type, fn, obj, override)
	{
		if (type == categoryClickedEvent.type)
		{
			categoryClickedEvent.subscribe(fn, obj, override);
		}
	}

	this.Initialize = function()
	{
		D0 = document.createElement('div');
		D0.style.position = 'relative';
		D0.style.left = P2;
		D0.style.top = P1;
		D0.style.width = P3;
		//D0.style.height = height;
		D0.style.backgroundColor = D.BackgroundColor;
		D0.style.overflow = 'hidden';
		D0.style.borderWidth = '1px';
		D0.style.borderStyle = 'solid';
		//D0.style.borderColor = D.BorderColor;
		//D0.style.border = '1px solid transparent';
		D0.style.borderWidth = '1px';
		D0.style.borderStyle = 'solid';
		D0.style.borderColor = D.BorderColor;

		D0.className = 'divElement';
		
			var r;
			var c0;
			var c1;
			var c2;

			T0 = document.createElement('table');
			T0.style.position = 'relative';
			//T0.style.height = '100%';
			T0.style.width = '100%';
			T0.cellSpacing = 0;
			T0.cellPadding = 0;

			// Body row
			r = T0.insertRow(-1);
			c0 = r.insertCell(-1);

				T1 = document.createElement('table');
				T1.style.position = 'relative';
				T1.style.width = '100%';
				//T1.style.height = '100%';
				T1.cellSpacing = 0;
				T1.cellPadding = 0;

				r = T1.insertRow(-1);
				
				c1 = r.insertCell(-1);
				
					T2 = document.createElement('table');
					T2.style.position = 'relative';
					T2.style.width = '100%';
					//T2.style.height = '100%';
					T2.cellSpacing = 0;
					T2.cellPadding = 0;

					r = T2.insertRow(-1);

						c2 = r.insertCell(-1);
						c2.style.verticalAlign = 'top';
						
							D2 = document.createElement('div');
							D2.style.backgroundColor = 'maroon';
							D2.style.position = 'relative';
							D2.style.top = 0;
							D2.style.left = 0;
							//D2.style.width = '100%';
							//D2.style.height = height - 46;
							//D2.style.overflow = 'hidden';
							D2.className = 'divElement';
							//D2.style.lineHeight = 0;
						
						c2.appendChild(D2);

				c1.appendChild(T2);
				
			c0.appendChild(T1);

		D0.appendChild(T0);

		D.Parent.appendChild(D0);
		
		AddColumn('Categories', 'CategoryColumn', P3 - 4);
	}

	this.Category = function(index)
	{
		if ((0 <= index) && (index < D.Rows.length))
		{
			return D.Rows[index].Cells[0].Control;
		}
		else
		{
			return null;
		}
	}

	this.GetProperty = function(property)
	{
		if (property == 'CategoryCount')
		{
			return D.Rows.length;
		}
		else if (property == 'SelectionMode')
		{
			return P5;
		}
		else
		{
			return null;
		}
	}
	
	this.SetProperty = function(property, value)
	{
		var i;

		if (property == 'Top')
		{
			P1 = value;
			
			if (D0)
			{
				D0.style.top = P1;
			}
		}
		else if (property == 'Left')
		{
			P2 = value;
			
			if (D0)
			{
				D0.style.left = P2;
			}
		}
		else if (property == 'Width')
		{
			P3 = value;

			if (D0)
			{
				D0.style.width = P3;
			}
			
			if (D.Columns.length > 0)
			{
				D.Columns[0].Width = P3 - 4;
			}

			if (D2)
			{
				D2.style.width = P3;

				for (i = 0; i < D.Rows.length; i ++)
				{
					if (T4)
					{
						T4.rows[i].cells[0].style.width = D.Columns[0].Width;
					}

					D.Rows[i].Cells[0].Control.SetProperty('Width', P3 - 4);
				}
				
				if (T4)
				{
					T4.style.width = D.Columns[0].Width + 1;
				}
			}
		}
		else if (property == 'Height')
		{
			P4 = value;
			
			if (D0)
			{
				//D0.style.height = P4;
			}
		}
	}

	this.AddCategory = function(label, tag, font)
	{
		DrawRow(-1, label, tag, font);
	}

	this.InsertCategory = function(index, label, tag, font)
	{
		if ((index == 0) || ((T4) && ((0 <= index) && (index <= T4.rows.length))))
		{
			DrawRow(index, label, tag, font);
		}
	}

	this.DeleteCategory = function(index)
	{
		if ((T4) && ((0 <= index) && (index < T4.rows.length)))
		{
			EraseRow(index);
			
			DeleteElement(D.Rows, index);
		}
	}
	
	this.Clear = function()
	{
		var i;

		if (T4)
		{
			for (i = T4.rows.length - 1; i >= 0; i --)
			{
				EraseRow(i);
				
				DeleteElement(D.Rows, i);
			}
		}
	}

	var EraseRow = function(index)
	{
		if ((T4) && ((0 <= index) && (index < T4.rows.length)))
		{
			T4.deleteRow(index);
		}
	}

	var DrawRow = function(index, label, tag, font)
	{
		var t;
		var r;
		var r1;
		var c;
		var c1;
		var i;
		var d;
		var l;
		var w;

		var p;
		var q;

		if (D.Columns.length > 0)
		{
			if ( ! T4)
			{
				T4 = document.createElement('table');
				T4.style.backgroundColor = D.GridLineColor;
				T4.style.position = 'relative';
				T4.cellSpacing = 1;
				T4.cellPadding = 0;
				T4.style.font = D.Font;

				D2.appendChild(T4);
			}
			
			p = new DataRow();

			r = T4.insertRow(index);

			w = 0;

			for (i = 0; i < D.Columns.length; i ++)
			{
				q = new DataCell();

				c = r.insertCell(-1);

				c.style.width = D.Columns[i].Width;
				
				w = w + D.Columns[i].Width + 1;
				
				c.style.backgroundColor = D.BackgroundColor;

				d = document.createElement('div');
				d.style.color = D.HeaderForegroundColor;
				d.style.position = 'relative';
				d.style.width = '100%';
				//d.style.height = '100%';
				d.style.overflow = 'hidden';
				d.className = 'divElement';
				
				
				
					var x;
					
					x = new Category();
					x.SetProperty('Top', 0);
					x.SetProperty('Left', 0);
					x.SetProperty('Width', P3 - 4);
					//x.SetProperty('Height', 360);
					x.SetProperty('Text', label);
					x.SetProperty('Tag', tag);
					x.Parent = d;
					x.Font = font;
					x.Subscribe('Click', CategoryClicked, x, true);
					x.Initialize();

					q.Control = x;

				AddElement(p.Cells, q);

				c.appendChild(d);
			}
			
			if (index == -1)
			{
				AddElement(D.Rows, p);
			}
			else
			{
				InsertElement(D.Rows, index, p);
			}

			T4.style.width = w + 1;
		}
	}

	var CategoryClicked = function(type, arguments, object)
	{
		var i;
		var s;
		
		if (P5 == SelectionMode.None)
		{
		}
		else if (P5 == SelectionMode.One)
		{
			s = object.GetProperty('Selected');

			if (s)
			{
			}
			else
			{
				for (i = 0; i < D.Rows.length; i ++)
				{
					if (D.Rows[i].Cells[0].Control != object)
					{
						D.Rows[i].Cells[0].Control.SetProperty('Selected', false);
					}
				}
				
				object.SetProperty('Selected', true);
			}
		}
		else if (P5 == SelectionMode.Multiple)
		{
			object.SetProperty('Selected', ! s);
		}

		for (i = 0; i < categoryClickedEvent.subscribers.length; i ++)
        {
			categoryClickedEvent.subscribers[i].obj = object;
        }

		categoryClickedEvent.fire();
	}

	var AddColumn = function(caption, columnName, width)
	{
		var c;

		c = new DataColumn();
		
		c.Caption = caption;
		
		c.ColumnName = columnName;
		
		c.Width = width;
		
		AddElement(D.Columns, c);
	}

	var DeleteElement = function(array, i)
    {
	    var j;
    	
	    try {delete array[i]} catch(e) { }
    	
	    for (j = i + 1; j < array.length; j ++) array[j - 1] = array[j];

	    array.length = array.length - 1;
    }

    var AddElement = function(array, element)
    {
	    array.length = array.length + 1;

	    array[array.length - 1] = element;
    }
	
	var InsertElement = function(array, i, element)
    {
	    var j;
    	
	    array.length = array.length + 1;
    	
	    for (j = array.length - 2; j >= i; i --) array[j + 1] = array[j];

	    array[i] = element;
    }
}

function DataColumn()
{
	this.Caption = '';
	
	this.ColumnName = '';
	
	this.Width = 10;
	
	this.Type = 'Label';
}

function DataRow()
{
	this.Cells = new Array();
}

function DataCell()
{
	this.Control = null;
}