<head>
<PUBLIC:COMPONENT tagName=TABS>
	<PUBLIC:PROPERTY Name=currentTab>
	<PUBLIC:METHOD Name=addTab>
	<PUBLIC:METHOD Name=changeTab>
	<PUBLIC:METHOD Name=changeTab2>
	<PUBLIC:METHOD Name=setTab>
	<PUBLIC:METHOD Name=removeTab>
	<PUBLIC:DEFAULTS viewLinkContent/>
	<PUBLIC:EVENT NAME=onTabClick ID=rcID />
	<PUBLIC:ATTACH event="oncontentready" onevent="fnInit()"/>
</PUBLIC:COMPONENT>
<style type="text/css">
	body
	{
		background: lightgray;
	}

	.eztabs
	{
		margin-bottom: 1em;
	}

	.eztabs ul
	{
		padding: 3px 9px 2px 5px;
		margin-left: 0;
		margin-top: 1px;
		margin-bottom: 0;
		font: bold 12px Verdana;
		list-style-type: none;
		text-align: left; /*set to left, center, or right to align the menu as desired*/
		border-bottom: 1px solid #929492;
	}

	.eztabs li
	{
		display: inline;
		margin: 0;
	}

	.eztabs li span
	{
		cursor:hand;
		text-decoration: none;
		padding: 3px 9px 2px 5px;
		margin: 0;
		margin-right: 1px; /*distance between each tab*/
		border-left: 1px solid #DDD;
		color: black;
		font-size: 13px;
		background: #ECEEEC url(media/tabright.gif) top right no-repeat;
	}
</style>
<script type='text/javascript'>
var tabCount = 1
var tabCounter = 1
var currentTab = null;
function fnInit()
{
	currentTab=tab1
}
function removeTab()
{
	if(currentTab == null){alert("Select a tab first"); return}
	if(tabCounter >1)
	{
		currentTab.parentNode.removeNode(true)
		tabCounter -= 1
		var spns = document.getElementsByTagName("span")
		currentTab = spns[0]
	}
	currentTab = null;
	colorTabs()
}
function addTab(sHref,sTxt)
{
	tabCount += 1
	tabCounter += 1
	var a = document.createElement("span")
	a.href = sHref
	a.innerText = sTxt
	a.id = "tab" + tabCount
	var li = document.createElement("li")
 	a.setAttribute("onclick",function(){fnliclick(this)})
	li.appendChild(a)
	ulTabs.appendChild(li)
	currentTab = a
	colorTabs()
}
function changeTab(sHref)
{
	if(currentTab == null){alert("Select a tab first"); return}
	var v = sHref.split("\\")
	var sTxt = v[v.length-1]
	if(currentTab.href == "")
	{
		currentTab.href = sHref
		currentTab.innerText = sTxt
	}
	else
	{
		addTab(sHref,sTxt)
	}
	colorTabs()
}
function changeTab2(sHref)
{
	if(currentTab == null){alert("Select a tab first"); return}
	var v = sHref.split("\\")
	var sTxt = v[v.length-1]
	currentTab.href = sHref
	currentTab.innerText = sTxt
	colorTabs()
}
function setTab(sHref)
{
	if(currentTab == null){alert("Select a tab first"); return}
	var v = sHref.split("\\")
	var sTxt = v[v.length-1]
	currentTab.href = sHref
	currentTab.innerText = sTxt
	colorTabs()
}
function fnliclick(obj)
{
	currentTab = obj
	oEvent = createEventObject();
	oEvent.result = obj.href;
	rcID.fire (oEvent);
	colorTabs()
}
function colorTabs()
{
	var spns = document.getElementsByTagName("span")
	for(var i=0;i<spns.length;i++)
	{
		if(currentTab == null)
			spns[i].style.background = "#ECEEEC"
		else
			if(spns[i].id==currentTab.id)
			{
				spns[i].style.background = "#00FFFF"	//set the colors you like here.
			}
			else
			{
				spns[i].style.background = "#ECEEEC"
			}
	}
}
</script>
</head>
<body>
<div class="eztabs">
	<ul id="ulTabs">
		<li><span id="tab1" href="" onclick="fnliclick(this)">Untitled</span></li>
	</ul>
</div>
</body>
