function initializeTabPanel( parmID )
{
	var panelID = document.getElementById( parmID );


	// panelParts[] = the "tab" and "panel" DIV elements

	var panelParts = getTags( panelID, "div" );


	// navigate down to the "li" tags (one per tab)

	var firstUL = panelParts[0].getElementsByTagName("ul")[0];

	var tabs = getTags( firstUL, "li" );


	// "tabs[]" is the list of "li" tags that make up the tabs

	tabs[0].className = "current";


	// create an array of the "a" elements under the "li" tags

	var tabAnchors = new Array( tabs.length );

	for ( var i=0; i<tabs.length; i++ )
	{
		tabAnchors[i] = getTags( tabs[i], "a" )[0];
	}


	// set the "blur" on each of the "a" elements

	for ( var i=0; i<tabs.length; i++ )
	{
		tabAnchors[i].onfocus=setblur;
	}


	// go back to the panelParts table and get a list of the "div" tags
	// under the "panel" div (i.e. element [1] is the panel ([0] is the tabs))

	var panels = getTags( panelParts[1], "div" );


	// under each of the panel "div" tags are a second set of "div"
	// tags which we need to toggle (show/hide) as well

	var subpanels = new Array( panels.length );

	for ( var i=0; i<panels.length; i++ )
	{
		var subpanelsDivs = getTags( panels[i], "div" );
		subpanels[i] = subpanelsDivs[0];
	}


	// set the first panel to "show" and the rest to "hide"

	for ( var i=0; i<panels.length; i++ )
	{
		panels[i].className    = ( i==0 ? "show" : "hide" );
		subpanels[i].className = ( i==0 ? "show" : "hide" );
	}

	
	// on each tab's anchor element ("<a>"), save the array of all tabAnchors 
	// (and the anchor's index value) and the "tab" table (so we can later 
	// toggle "current" as well as "hide/show")

	var tabnbr = tabAnchors.length;

	for ( var i=0; i<tabnbr; i++ )
	{
		tabAnchors[i]._panels 		= new Array( tabnbr );
		tabAnchors[i]._subpanels 	= new Array( tabnbr );
		tabAnchors[i]._tabs 		= new Array( tabnbr );
		tabAnchors[i]._tabIndex 	= i;					// index of current tab&panel

		for ( var j=0; j<tabnbr; j++ )
		{
			tabAnchors[i]._panels[j] 		= panels[j];	// used to set show/hide
			tabAnchors[i]._subpanels[j]		= subpanels[j];	// used to set show/hide
			tabAnchors[i]._tabs[j] 			= tabs[j];		// used to set current/not-current on tabs
		}
	}


	// set the "onclick" function for each tab's anchor tag

	for ( var i=0; i<tabnbr; i++ )
	{
		tabAnchors[i].onclick = function() 
			{
				for ( var i=0; i<this._panels.length; i++ )
				{
					if ( i==this._tabIndex )
					{
						this._panels[i].className    = "show";
						this._subpanels[i].className = "show";
						this._tabs[i].className = "current";
					}else{
						this._panels[i].className    = "hide";
						this._subpanels[i].className = "hide";
						this._tabs[i].className = "";
					}
				}
			};
	}
}

// 
// ----------------------------------------------------------------
// 

// get pointers to all matching tags one level below the element

function getTags( element, tag )
{
	var mytag = tag.toLowerCase();
	var table = new Array();
	var j = 0;
	for ( var i=0; i<element.childNodes.length; i++ )
	{
		if ( element.childNodes[i].nodeName.toLowerCase() == mytag )
		{
			table[j++] = element.childNodes[i];
		}
	}
	return table;
}

// 
// ----------------------------------------------------------------
// 

function setblur() { if(this.blur)this.blur(); }


// 
// ----------------------------------------------------------------
// 




/*

USE THIS TEMPLATE TO CREATE A TAB-PANEL 

------------------------------------------------------
<script language="javascript" type="text/javascript" src="./website/sys/tabpanel.js"    ></script>
<script language="javascript" type="text/javascript" src="./website/sys/dom_loaded.js"  ></script>
<style type="text/css">
	.panel { background:#F4F4F4; width: 300px; height: 225px; margin: 0px; }
</style>
<script>
function initializeWebSite()
{
	initializeTabPanel("TABPANEL NAME");
}
DomLoaded.load( initializeWebSite );
</script>
------------------------------------------------------
<body>
------------------------------------------------------
<div id="TABPANEL NAME" style="width: 300px;">

<div class="tabs">
   <ul>
     <li><a><span>TAB 1 NAME</span></a></li>
     <li><a><span>TAB 2 NAME</span></a></li>
     <li><a><span>TAB 3 NAME</span></a></li>
   </ul>
</div>

<div class="panel">

<div>
  <div style="height: 225px;">
    <br>TAB 1 CONTENTS<br>
  </div>
</div>

<div>
  <div style="height: 225px;">
    <br>TAB 2 CONTENTS<br>
  </div>
</div>

<div>
  <div style="height: 225px;">
	<br>TAB 3 CONTENTS<br>
  </div>
</div>

</div>
</div>
------------------------------------------------------

*/

