/* To use this, the ul must have id="tabs". 
 * See the following example of how to use this javascript:

 <div class="tabbed_contents">
    <ul class="tabs primary" id="tabs">
		<li class="img-onoff leftborder" name="Tab1"><a href="#Tab1" onclick="show_hide(Tab1, 1)"> Alphabetical List</a></li>
		<li class="img-offoff" name="Tab2"><a href="#Tab2" onclick="show_hide(Tab2, 2)">Topic List</a></li>
		<li class="img-offoff" name="Tab3"><a href="#Tab3" onclick="show_hide(Tab3, 3)">Tab 3 List</a></li>
		<li class="img-lastoff" name="Tab4"><a href="#Tab4" onclick="show_hide(Tab4, 4)">Tab 4 List</a></li>
    </ul>
    <div class="tabbed_content_border primary_background">

       <div class="tabspacer"></div>

       <div class="tabbed_content_border secondary_background">

		<div id="Tab1" style="display:inline">
			Tab 1 Content
		</div><!-- close of "Tab1" -->

		<div id="Tab2" style="display:none">
			Tab 2 Content
		</div><!-- close of "Tab2" -->

		<div id="Tab3" style="display:none">
			Tab 3 Content
		</div><!-- close of "Tab3" -->

		<div id="Tab4" style="display:none">
			Tab 4 Content
		</div><!-- close of "Tab4" -->

       </div><!-- close of "tabbed_content_border secondary_background" -->
    </div><!-- close of "tabbed_content_border primary_background" -->
 </div><!-- close of "tabbed_contents" -->

*/

var show_tab = "";
var show_tab_num = 0;
var totalTabs = 0;

function show_hide(tab_name, tab_num)
{
	tab(tab_num);

	var div_tab_name = tab_name;

	if(div_tab_name != show_tab)
	{
		if(show_tab == "")
		{
			var ul_tabs = document.getElementById("tabs");
			var li_tabs = ul_tabs.getElementsByTagName("li");
			totalTabs = li_tabs.length;
			show_tab = li_tabs[0].getAttribute("name");
		}
		document.getElementById(show_tab).style.display = "none";
		document.getElementById(div_tab_name).style.display = "inline";
		show_tab = div_tab_name;
	}

}

function tab(tab_num)
{

	tab_num--;
	var total = 0;
	if(show_tab_num != tab_num)
	{
		show_tab_num = tab_num;
		var ul_tabs = document.getElementById("tabs");
		var li_tabs = ul_tabs.getElementsByTagName("li");
		var children = 0;

		var regxFirst = new RegExp("leftborder");
		var regxLast = new RegExp("last");
		
		var li_tab;
		var x = 0;
		var back = "false";
		var first = "false";
		var styleClass;
		do
		{ 
			li_tab = li_tabs[x];
			if(x != tab_num)
			{
				styleClass = li_tab.attributes["class"].value;
				if (regxFirst.test(styleClass))
				{
					li_tab.attributes["class"].value = "img-offoff leftborder";
				}
				else if (regxLast.test(styleClass))
				{
					li_tab.attributes["class"].value = "img-lastoff";
				}
				else 
				{
					li_tab.attributes["class"].value = "img-offoff";
				}
				styleClass = li_tab.attributes["class"].value;
			}
			if(x == tab_num)
			{
				styleClass = li_tab.attributes["class"].value;
				if (regxFirst.test(styleClass))
				{
					li_tab.attributes["class"].value = "img-onoff leftborder";
				}
				else if (regxLast.test(styleClass))
				{
					li_tab.attributes["class"].value = "img-laston";

					styleClass = li_tabs[x-1].attributes["class"].value;

					if (regxFirst.test(styleClass))
						li_tabs[x-1].attributes["class"].value = "img-offon leftborder";
					else
						li_tabs[x-1].attributes["class"].value = "img-offon";
				}
				else 
				{
					li_tab.attributes["class"].value = "img-onoff";

					styleClass = li_tabs[x-1].attributes["class"].value;

					if (regxFirst.test(styleClass))
						li_tabs[x-1].attributes["class"].value = "img-offon leftborder";
					else
						li_tabs[x-1].attributes["class"].value = "img-offon";
				}
			}
		x++;
		}
		while (x < li_tabs.length)
	}
}