function TabsContainer (parentDiv, contId, defaultStyle)  {
		
		this._parentDiv = parentDiv;
		this._id = contId;
		this._tabs = [];
		this._mainTableId = "";
		this._tabsLineId = "";
		this._defaultTabWidth = "120";
		this._defaultMinWidth = "16";
		this._paneStyles = [];
		this._defaultStyle = defaultStyle;
		this._defaultStyleObject = null;
		
		this.construct = function() {
			
			this._mainTableId = "TabsContainer" + this._id + "_mainTable";
			this._tabsLineId = "TabsContainer" + this._id + "_line";
			this.defineStyles();
			this._defaultStyleObject = this._paneStyles[this._defaultStyle];
			parentDiv.innerHTML = "<table cellspacing='0' cellpadding='0' id='" + this._mainTableId + "' style='border-spacing:0px; padding: 0px;' height='" + this._defaultStyleObject._tabHeight + "px'> <tr id='" + this._tabsLineId + "' height='" + this._defaultStyleObject._tabHeight +"px'></tr></table>";
		}
	
		// Creates a new tab, returnes the newly added TabPane object
		this.addTab = function(tabCaption,tabWidth,minWidth,tabPaneStyle) {
			var tabsLine = document.getElementById(this._tabsLineId);
			var newTD = document.createElement("TD");
			newTD.id = "TabCont" + this._id + "_tabTD" + this._tabs.length;
			newTD.style.padding = "1px 0px 0px 0px"; // top right bottom left  - control the spacing between tabs.
			tabsLine.appendChild(newTD);
			
			if (tabWidth == null)
			{
				tabWidth = this._defaultTabWidth;
			}
			
			if (minWidth == null)
			{
				minWidth = this._defaultMinWidth;
			}
			var newPaneStyle = this._paneStyles[tabPaneStyle];
			if (newPaneStyle == null)
			{
				newPaneStyle = this._paneStyles[this._defaultStyle];
			}
			var newPane = new TabPane(newTD,tabCaption,this._tabs.length,"TabCont" + this._id + "_tab" + this._tabs.length,newPaneStyle,tabWidth, minWidth);
			this._tabs.push(newPane);
			return newPane;
		}	

		this.destroy = function() {
			for (i=0; i<this._tabs.length; i++)
			{
				this._tabs[i].destroy();
				this._tabs[i] = null;
			}
			
			for (i=0; i<this._paneStyles.length; i++)
			{
				this._paneStyles[i] = null;
			}
			
			this._tabs = null;
			this._parentDiv = null;
			this._defaultStyleObject = null;
		}
		
		this.defineStyles = function() {
			this._paneStyles["T4T"] = new PaneStyle(
					"T4T",
					"#64A138",
					"media/styles/img/tab-left-T4T.gif",
					"media/styles/img/tab-right-T4T.gif",
					20,
					8,
					8,
					12,
					"Arial",
					"bold",
					"#ffffff",
					13);
			
			this._paneStyles["T4B"] = new PaneStyle(
					"T4T",
					"#F26A22",
					"media/stylesT4B/img/tab-left-T4B.gif",
					"media/stylesT4B/img/tab-right-T4B.gif",
					20,
					8,
					8,
					12,
					"Arial",
					"bold",
					"#ffffff",
					13);		
	
			this._paneStyles["TDM"] = new PaneStyle(
					"TDM",
					"#64A138",
					"media/styles/img/tab-left-T4T.gif",
					"media/styles/img/tab-right-T4T.gif",
					20,
					8,
					8,
					12,
					"Arial",
					"bold",
					"#ffffff",
					13);
					
			this._paneStyles["T4E"] = new PaneStyle(
					"T4E",
					"#0000FF",
					"media/stylesT4E/img/tab-left-T4E.gif",
					"media/stylesT4E/img/tab-right-T4E.gif",
					20,
					8,
					8,
					12,
					"Arial",
					"bold",
					"#ffffff",
					13);
					
			this._paneStyles["GRAY"] = new PaneStyle(
					"GRAY",
					"#898D90",
					"media/stylesT4E/img/tab-left-gray.gif",
					"media/stylesT4E/img/tab-right-gray.gif",
					18,
					8,
					8,
					12,
					"Arial",
					"400",
					"#ffffff",
					13);
		}
		
		this.construct();
	}
	
	function PaneStyle(styleId,background,leftImage,rightImage,tabHeight,leftImageWidth,rightImageWidth,fontSize,fontFace,fontWeight,textColor,tabMargin) {
		this._styleId = styleId;
		this._background = background; // T4T
		this._leftImage = leftImage;
		this._rightImage = rightImage;
		this._tabHeight = tabHeight;
		this._leftImageWidth = leftImageWidth;
		this._rightImageWidth = rightImageWidth;
		this._fontSize = fontSize;
		this._fontFace = fontFace;
		this._fontWeight = fontWeight;
		this._textColor = textColor;
		this._tabMargin = tabMargin;
		
	}
	
	function TabPane(parentElement,tabText,tabIndex,tabId, paneStyle, tabWidth, minWidth, prepDiv) {
		
		this._tabIndex = tabIndex;
		this._tabId = tabId;
		this._tabText = tabText;
		this._paneStyle = paneStyle;
		this._givenWidth = tabWidth; // possible values: "auto" - width is determined according to the caption. or absolute number of pixels (caption is cropped if needed)
		this._minWidth = minWidth;
		this._width; 
		this._parentElement = parentElement;
		this._centerWidth = 0;
		this._paddingTop = 0;
		this._prepDiv = prepDiv;
		this._isPrepDivTemp = false;

	this.construct = function() {
			
			if (this._givenWidth == "auto")
			// deteremine width according to the caption length
			{
				if (this._prepDiv == null)
				{
					this._prepDiv = document.createElement("DIV");
					this._isPrepDivTemp = true;
					document.body.appendChild(this._prepDiv);
				}
				else
				{ 
					this._isPrepDivTemp = false;
				}
				
				this._prepDiv.innerHTML = "<table><tr><td style='font-family: Arial; font-size: " + this._paneStyle._fontSize +"px; font-weight: 400;' id='testTD"+this._tabId+"'></td></tr></table>";
				var testTd = document.getElementById("testTD"+this._tabId);
				testTd.innerHTML = this._tabText;
				
				// If a min-width is given - checking whether the caption is longer than min
				if (testTd.clientWidth + this._paneStyle._rightImageWidth + this._paneStyle._leftImageWidth + (2* this._paneStyle._tabMargin) < this._minWidth )
				{
					this._width = this._minWidth;
					this._centerWidth = this._width - (this._paneStyle._rightImageWidth + this._paneStyle._leftImageWidth);
				}
				else
				{
					this._centerWidth = testTd.clientWidth + (2* this._paneStyle._tabMargin);
					this._width = this._centerWidth + this._paneStyle._rightImageWidth + this._paneStyle._leftImageWidth;
				}
				
				testTd.innerHTML = "";
				this._prepDiv.innerHTML = "";
				
				// destroting the temp div
				if (this._isPrepDivTemp)
				{
					document.body.removeChild(this._prepDiv);
				}
				
			}
			else
			// Fixed width
			{
				if (this._givenWidth < this._paneStyle._rightImageWidth + this._paneStyle._leftImageWidth) 
				{
					this._width = this._paneStyle._rightImageWidth + this._paneStyle._leftImageWidth;
				}
				else
				{
					this._width = this._givenWidth;
				}
				
				this._centerWidth = this._width - this._paneStyle._rightImageWidth - this._paneStyle._leftImageWidth;		
			}
			isIE = (window.ActiveXObject) ? true : false;
			
			if (isIE)
			{
				this._paddingTop = Math.floor((this._paneStyle._tabHeight - this._paneStyle._fontSize) / 2) - 1;
				
				// Calculating if we need extra top padding for this tab (in case the style of the current tab has lower height than the other tabs on the container)
				var neededPadding = this._parentElement.clientHeight - this._paneStyle._tabHeight - 1;
				var paddingString = "";
				if (neededPadding > 0)
				{
					paddingString = "padding: " + neededPadding + "px 0px 0px 0px;";
				}
				this._parentElement.innerHTML += "<div id='" + this._tabId + "' style=' color:" + this._paneStyle._textColor+ "; font-family: " + this._paneStyle._fontFace + "; font-size: " + this._paneStyle._fontSize + "px; font-weight: " + this._paneStyle._fontWeight + "; "  + paddingString + " height:" + this._paneStyle._tabHeight + "px; width:" + this._width + "px;'></div>";
				document.getElementById(this._tabId).innerHTML = "<img src='" + this._paneStyle._leftImage + "'><div style='overflow: hidden; text-align: center; padding-top:" + this._paddingTop + "px; height: " + (this._paneStyle._tabHeight - this._paddingTop) + "px; width: " + this._centerWidth +"px; background:" + this._paneStyle._background + "; position: relative; top: -" + this._paneStyle._tabHeight + "px; left: " + this._paneStyle._leftImageWidth + "px;'>" + this._tabText + "</div><img src='" + this._paneStyle._rightImage +"' style='position: relative; top:-" + (this._paneStyle._tabHeight * 2) +"px; left:" + (this._paneStyle._rightImageWidth + this._centerWidth) + "px'>";
			}
			else
			{
				this._paddingTop = Math.floor((this._paneStyle._tabHeight - this._paneStyle._fontSize) / 2) - 1;
			
				// Calculating if we need extra top padding for this tab (in case the style of the current tab has lower height than the other tabs on the container)
				var neededPadding = this._parentElement.clientHeight - this._paneStyle._tabHeight - 1;
				var paddingString = "";
				if (neededPadding > 0)
				{
					paddingString = "padding: " + neededPadding + "px 0px 0px 0px;";
				}
				this._parentElement.innerHTML += "<div id='" + this._tabId + "' style=' color:" + this._paneStyle._textColor+ "; font-family: " + this._paneStyle._fontFace + "; font-size: " + this._paneStyle._fontSize + "px; font-weight: " + this._paneStyle._fontWeight + "; "  + paddingString + " height:" + this._paneStyle._tabHeight + "px; width:" + this._width + "px;'></div>";
				document.getElementById(this._tabId).innerHTML = "<img src='" + this._paneStyle._leftImage + "'><div style='overflow: hidden; text-align: center; padding-top:" + this._paddingTop + "px; height: " + (this._paneStyle._tabHeight - this._paddingTop - 1) + "px; width: " + this._centerWidth +"px; background:" + this._paneStyle._background + "; position: relative; top: -" + (this._paneStyle._tabHeight + 4) + "px; left: " + this._paneStyle._leftImageWidth + "px;'>" + this._tabText + "</div><img src='" + this._paneStyle._rightImage +"' style='position: relative; top:-" + ((this._paneStyle._tabHeight * 2) + 4) +"px; left:" + (this._paneStyle._rightImageWidth + this._centerWidth) + "px'>";
			}
			
		}
	
		
	
		this.destroy = function() {
		
			 this._parentElement = null;
			 this._prepDiv = null;	
			 this._paneStyle = null;
		}
		
		this.construct();	
	}