function ClientTabControl()
{
	var tabHeaders;
	var tabPages;
	var name;
	var contentArea;
	var currentIndex = -1;
    this.Init = function(controlName)
    {
		tabHeaders = new Array();
		tabPages = new Array();
		name = controlName;
		contentArea = document.getElementById(controlName + "_ContentArea");
    }

    this.InitializeFirstSelectedTabIndex = function(firstIndex)
    {
    	currentIndex = firstIndex;
    	var data = $('#' + name + '_ContentArea').html();
        tabPages[currentIndex] = data;
    }
    
    this.AddTab = function(id)
    {
		tabHeaders[tabHeaders.length] = document.getElementById(id);
		tabPages[tabPages.length] = "#";
    }

    this.ChangeTabContent = function(index, newContent)
    {
    	tabPages[index] = newContent;
    }

    this.SetSelectedIndex = function(nextIndex)
    {
		if (nextIndex != currentIndex)
		{
			if (tabHeaders.length >= nextIndex)
			{
				currentIndex = nextIndex;
				
				if (tabPages[currentIndex] == "#")
				{
					HideGrid(contentArea.id);
					$.ajax({
						url: "/AjaxRequestHandler.php?action=ChangeTab&name=" + name + "&nextIndex=" + nextIndex,
						contentType: "text/html; charset=windows-1252",
						context: this,
						cache: false,
						success: function(data, textStatus, jqXHR){
							tabPages[currentIndex] = data;
							$('#' + name + '_ContentArea')
							.empty()
							.append(data);
							this.ChangeTabCallback(currentIndex);
						},
						error: function(jqXHR, textStatus, errorThrown) {
						   ShowGrid();
						}
					});
				}
				else
				{
					$('#' + name + '_ContentArea')
					.empty()
					.append(tabPages[currentIndex]);
					this.ChangeTabCallback(currentIndex);
				}
			}
		}
    }
	
	this.ChangeTabCallback = function(nextIndex)
	{
		for (var i = 0; i < tabHeaders.length; i++)
			tabHeaders[i].className = "TabControlTabItem";
		tabHeaders[nextIndex].className = "TabControlSelectedTabItem";
		ShowGrid();
		
		InitTooltip();
	}
}