function TabPannel(tabid){
	var tabpannel = this;
	this.pannelcontainer = document.createElement("div");
	this.pannelcontainer.id = tabid + "pannel";
	this.pannelcontainer.className = "tabs";
	this.pannelresult = document.createElement("div");
	//this.pannelresult.style.border = "0px solid #E4E4E4";
	//this.pannelresult.style.borderTop = "0px solid #E4E4E4";
	this.pannelresult.style.width = "100%";
	this.pannelresult.style.height = "98%";
	this.pannelresult.id = tabid + "tabresult";
	this.pannelresult.innerHTML = " ";
	this.pannel = document.createElement("ul");
	this.pannel.className = "tabsul";
	$(tabid).appendChild(this.pannelcontainer);
	$(tabid).appendChild(this.pannelresult);
	this.panneldiv = document.createElement("div");
	this.panneldiv.style.position = "relative";
	this.panneldiv.style.left = 0;
	this.panneldiv.style.top = 0;
	this.panneldiv.style.width = "240";
	//this.panneldiv.style.border = "1px solid red";
	this.panneldiv.style.overflow = "hidden";
	this.pannelcontainer.appendChild(this.panneldiv);
	this.panneldiv.appendChild(this.pannel);
	this.addTab = function (id,title,href){
		var tab = document.createElement("li");
		tab.id = id;
		tab.className = "tabsli";
		tab.setAttribute("tabhref",href);
		tab.onmousedown = function (){
			tabpannel.tabMouseDown(this);
			var href = this.getAttribute("tabhref");
			if (href == undefined || href == ""){
			    if ($(id + "div") != null){
			        var outerHTML = $(id + "div").outerHTML;
			        $(id + "div").parentNode.removeChild($(id + "div"));
			        tabpannel.pannelresult.innerHTML += outerHTML;	 
			        outerHTML = null;       
			    }
			}else{
			    tabpannel.pannelresult.innerHTML = "<iframe id='tabiframe" + this.id + "' height='100%' width='100%'  frameborder=0 scrolling=no src='" + href + "'></iframe>";
		    }
		};
		tab.ondblclick = function (){
			this.parentNode.removeChild(this);
		};
		tabpannel.pannel.appendChild(tab);
		var span = document.createElement("span");
		span.className = "tabsspan";
		span.innerHTML = title;
		tab.appendChild(span);
		return tab;
	};
	this.tabMouseDown = function (tab){
		var childs = tab.parentNode.childNodes;
		if (childs.length > 0)
		{
			for (var i = 0;i < childs.length ;i++ )
			{
				var child = childs[i];
				child.className = "tabsli";
				child.firstChild.className = "tabsspan";
				if ($(child.id + "div") != null){
				    $(child.id + "div").style.display = "none";
				}
			}
		}
		if ($(tab.id + "div") != null){
		    $(tab.id + "div").style.display = "block";
		}
		tab.className = "tabslig";
		tab.firstChild.className = "tabsspang";
	};
	this.activateTab = function (tab){
		tab.onmousedown();
	};
}