var Tabbar = {};

Tabbar.create = function(element)
{
	var tabs = [];
	var selectedTab = null;
	
	var initialize = function()
	{
		element = (typeof(element) == "string") ? document.getElementById(element) : element;
		
		// If the element contains <li> elements, then we convert these elements to tabs.
		collectTabs();
		
		// Replaces the <ul> element by a <div class="tabbar"> element.
		replaceTabbarElement();
		
		for(var i=0; i<tabs.length; i++)
		{
			renderTab(tabs[i]);
		}
	};
	
	var collectTabs = function()
	{
		for(var i = 0; i < element.childNodes.length; i++)
		{
			var tabNode = element.childNodes[i];
			
			// A tab can have one of the following formats:
			//  1.) <li><a href="...">some name</a></li>
			//  2.) <li>some name</li>
			
			if(tabNode.nodeType == 1 && tabNode.tagName.toLowerCase() == "li")
			{
				var tab = { text: "", href: null };
				
				if(tabNode.firstChild.nodeType == 3)
				{
					tab.text = tabNode.firstChild.nodeValue;
				}
				else if(tabNode.firstChild.nodeType == 1 && tabNode.firstChild.tagName.toLowerCase() == "a")
				{
					tab.text = tabNode.firstChild.firstChild.nodeValue;
					tab.href = tabNode.firstChild.href;
				}
				
				tabs.push(tab);
				
				// If the class of the <li> element contains the name "selected", then this will become the active tab.
				if(tabNode.className != null && tabNode.className.indexOf("selected") != -1)
					selectedTab = tab;
			}
		}
	};
	
	var replaceTabbarElement = function()
	{
		var tabbarEl = document.createElement("div");
		tabbarEl.className = "tabbar";
	
		// Replaces the <ul> element by a <div class="tabbar"> element.	
		element.parentNode.replaceChild(tabbarEl, element);
		element = tabbarEl;
	};
	
	var renderTab = function(tab)
	{
		var tabElement = document.createElement("div");
		var left = document.createElement("div");
		var center = document.createElement("div");
		var right = document.createElement("div");
		
		tabElement.appendChild(left);
		tabElement.appendChild(center);
		tabElement.appendChild(right);
		
		tabElement.className = "tab";
		left.className = "tab-left";
		center.className = "tab-center";
		right.className = "tab-right";

		center.appendChild(document.createTextNode(tab.text));
		
		if(tab.href != null)
			tabElement.onclick = function() { window.location = tab.href; };
		
		if(tab == selectedTab)
			tabElement.className = "tab-focus";
			
		element.appendChild(tabElement);
	};

	var addTab = function(text, href, selected)
	{
		var tab = { text: text, href: href };
		
		if(selected)
			selectedTab = tab;

		tabs.push(tab);
		renderTab(tab);
	};
	
	var pub = {
		addTab : addTab
	};
	
	initialize();
	
	return pub;
};