var		options;			// an array of MainOption s
var		previousMain;		// previous main option - used in mouseover
var		debug	= 1;		

/** these get set in config
// can be set to show current main and sub option
var	currentMainID			= 'td_2';
var	currentSubID			= 'td_2_2';
**/


// to know where sub option box is
var		subLeft;
var		subTop;
var		subWidth;
var		subHeight;
var		subDisplay = 0;

// Output objects needed
out = "    \
<!-- top tabs -->    \
<div id='top' class='tabTop'>    \
	<script language='JavaScript' type='text/JavaScript'>    \
	showMainOptions();    \
	</script>    \
</div>    \
    \
<!-- is used to hold sub options -->    \
<div id='subOptions'  class='subItemsBox'>    \
</div>    \
    \
<!-- this is our iframe shim -->    \
<iframe    \
  id='shim'    \
  scrolling='no'    \
  frameborder='0'    \
  style='position:absolute; top:0px; left:0px; height: 0px; width: 0px; z-index=10; display:none;'>    \
</iframe>    \
    \
";
document.write(out);




// do events here


document.onmousemove = handleMouse;

function handleMouse(evt)
{
	var	left;
	var	top;
	// in some cases we get evt, others we get from window. this line sets to evt every time
	evt = (evt) ? evt : ((window.event) ? window.event : null);
	if(evt.x)
	{
		left	=   evt.x;
		top =		evt.y;
		}
	else
	{
		// for mozilla etc you must use clientY out by about 95px.
		left 	= 	evt.clientX;
		top =		evt.clientY;
	}
	// display positioning info if needed
	//var text = "left=" + left + " top=" + top;
	//if(subLeft) text += " subLeft=" + subLeft + "subTop=" + subTop + "subWidth=" + subWidth + "subHeight=" + subHeight;
	//window.status = text;
		
	// When none displayed
	if(!subDisplay) return;
	
	// only interested in mouse events outsid the box  - with disc as the discrepancy outside to allow
	var	disc	=   30;
	var	inside = true;
	if(left < subLeft - disc)	inside = false;
	if(top  < subTop - disc)    inside = false;
	
	if(left > subLeft + subWidth + disc) inside = false;
	if(top > subTop + subHeight + disc) inside = false;
	
	
	if(inside == true) return;
	
	// we hide the sub ops
	divSetVisible('subOptions','shim',0);
}

// End of define section
 
/*********************************  building arrays all here **************************************/
/* 
*	builds everything - gets called on load, else will get called in showMainOptions(0 if not done
*/
function	buildOptions()
{
	var	name;
	var	url;
	var	id;

	options = new Array();
		
	// find all vars called td_*
	var j=0;
	
	// increments through vars td_1 td_2 etc, seeing if they are defined
	while(eval("typeof(td_"+ ++j +") != \"undefined\""))
	{
		// does a line like name = td_2 etc
		eval("name = td_" + j);
		//alert("name was " + name);
		
		id = "td_" + j;
		
		// matching url - see if matching url is there
		if(eval("typeof(url_"+ j +") != \"undefined\""))
		{
			// does a line like url = url_2 etc
			eval("url = url_" + j);
		}
		else
			url = '';
		//alert("url was " + url);
		
		// We now can do sub options
		subs = buildSubOptions(j);
		
		// We can now make the full option here
		opt = new MainOption(id,name,url,subs);
		
		// add to main array of options
		toAdd = options.length;
		options[toAdd] = opt;
	}
	//alert("main options " + j + " " + td_1);
}
/*
*	makes an array of sub options for this main option
*	arg		ekement number    eg 1 in td_1 etc
*/
function	buildSubOptions(elem)
{
	var	name;
	var	url;
	var	id;

	var		subs = new Array();
	
	// find all vars called td_2_* etc by trying from 1 upwards until we cant any more
	var j=0;
	while(eval("typeof(td_" + elem + "_" + ++j + ") != \"undefined\""))
	{
		// does a line like name = td_2 etc
		eval("name = td_" + elem + "_" + j);
		//alert("subname was " + name);
		
		id = "td_" + elem + "_" + j;
		
		// matching url
		if(eval("typeof(url_" + elem + "_" + j +") != \"undefined\""))
		{
			// does a line like url = url_2 etc
			eval("url = url_" + elem + "_" + j);
		}
		else
			url = '';
		//alert("suburl was " + url);
		
		sub = new SubOption(id,elem,name,url);
		
		toAdd = subs.length;
		subs[toAdd] = sub;
	}
	return subs;
}
/*********************************  building arrays ends here **************************************/


/*********************************  Classes All Here **********************************************/

// class to hold options
function	MainOption(id,name,url,subOptions)
{
	this.id   = id;
	this.name = name;
	this.url = url;
	this.subOptions = subOptions;		// an array of subOption objects
	}
// class to hold sub-options
function	SubOption(id,option,name,url)
{
	this.id    	= id;
	this.option = option;
	this.name 	= name;
	this.url 	= url;
}
/*********************************  Classes end Here **********************************************/

/*********************************  All for showing and processing the options here ***************/
function	showMainOptions()
{
	var	name;
	var	url;

	// options is a global array created in buildOptions(). If we dont have one, we need to
	// run this build first.
	if(typeof(options) == 'undefined')
		buildOptions();
		
	len = options.length;
	
		
	out = "";		// what we will write
	
	// loop through main options
	for(var i=0;i < len; i++)
	{
		// each main option
		opt = options[i];
		
		name 	= opt.name;
		url  	= opt.url;
		id		= opt.id;
		
		// our normal state is set, but use a diff class if this id is the one selected in config
		var selectedClass = "tabTopItem";
		if(id == currentMainID)
			selectedClass = "tabTopItemSelected";
		if(url == "")
		{
			// so link doesnt work as zero length
			out += "<div id=\"" + id + "\" " + "class=\"" + selectedClass + "\" ";
			out += "><a href=\"" + url + "\"";
			out += " onClick=\"return false;\"\n";
			out += " onMouseOver=\"mainOptionOver(\'" + id + "\')\"\n";
			out += " onMouseOut=\"mainOptionOut(\'" + id + "\')\"\n";
			out += ">" + name + "</a></div>\n";	
		}
		else
		{
			out += "<div id=\"" + id + "\" " + "class=\"" + selectedClass + "\" ";
			out += "><a href=\"" + url + "\"";
			out += " onMouseOver=\"mainOptionOver(\'" + id + "\')\"\n";
			out += " onMouseOut=\"mainOptionOut(\'" + id + "\')\"\n";
			out += ">" + name + "</a></div>\n";	
		}
	}
	//alert(out);
	document.write(out);
}

/**
*	makesa div to hold sub options
*/
function	showSubOptions(mainID)
{

	var mainDiv = document.getElementById(mainID);
	var	left = findPosX(mainDiv);
	var	top  = findPosY(mainDiv) + gapDownToSubOptions;   // put it just below
	var	width = subOptionWidth ;   // see parameters
	var	height = 20;	// defau;t - will be recalcualated
	
	// turn existing off
	divSetVisible('subOptions','shim',0);

	// use options array to find matching objects
	var	mainOpt = getObjectByID(mainID);
	if(mainOpt == "")
		alert("cant get main option " + mainID);
	
	if(!mainOpt.subOptions) return;
	
	var  numSubs = mainOpt.subOptions.length;
	if(numSubs == 0) return;
	
	// use our parameter
	height = numSubs * subOptionHeight;
	
	subs = document.getElementById('subOptions');
	if(!subs)
		alert("cant get subOptions");
	subs.style.positioning 	= 'absolute';
	subs.style.width 		= width + 'px';
	subs.style.height 		= height + 'px';
	subs.style.left 		= left + 'px';
	subs.style.top 			= top + 'px';

	// normally you dont want these unless testing  - see config
	if(showSubOptionBackground == 1)
	{
		if(subDivBackgroundColour != "")
			subs.style.background = subDivBackgroundColour;
	}
	
	var html = getSubOptionHTML(mainOpt);
	
	subs.innerHTML = html;

	// show it, with shim behind
	divSetVisible('subOptions','shim',1);
}
/*
*	We fill in the sub option div with options
*	we send back the required html as text
*/
function	getSubOptionHTML(mainOpt)
{
	var		subs =  mainOpt.subOptions;
	var		numOfSubs = subs.length;
	var		i;
	var		subOpt;
	var		id;
	var		url;
	var		name;
	var		out;
	var 	selectedClass;
	
	out = "";
	
	for(i = 0 ; i < numOfSubs; i++)
	{
		subOpt = subs[i];
		
		id 		= subOpt.id;
		url 	= subOpt.url;
		name 	= subOpt.name;
		
		// our normal state is set, but use a diff class if this id is the one selected in config
		selectedClass = "tabBottomItem";
		if(id == currentSubID)
			selectedClass = "tabBottomItemSelected";
	
		out +=  "<div class=\"" + selectedClass + "\" id=\"" + id + "\">";
		out +=  "<a href=\"" + url + "\"" 
		out +=  " onMouseOver=\"subOptionOver(\'" + id + "\')\"";
		out +=  " onMouseOut=\"subOptionOut(\'" + id + "\')\"";
		out  += ">"+ name + "</a>\n";
		out +=  "</div>\n";
		
		
	}
	//alert(out);
	return out;

}
/*********************************  End of showing and processing the options here ***************/

function	mainOptionOver(id)
{
	var obj = document.getElementById(id);
	if(!obj) alert("cant mouse over " + id);
	
	obj.className = "tabTopItemOver";
	
	// do the sub option
	showSubOptions(id);
}
function	mainOptionOut(id)
{
	var obj = document.getElementById(id);
	if(!obj) alert("cant mouse over " + id);
	
	// our normal state is set, but use a diff class if this id is the one selected in config
	var selectedClass = "tabTopItem";
	if(id == currentMainID)
		selectedClass = "tabTopItemSelected";
	
	obj.className = selectedClass;
}


function	subOptionOver(id)
{
	var obj = document.getElementById(id);
	if(!obj) alert("cant mouse over " + id);
	
	obj.className = "tabBottomItemOver";
	
	//alert("done over id=" + id);
}
function	subOptionOut(id)
{
	var obj = document.getElementById(id);
	if(!obj) alert("cant mouse over " + id);
	
	// our normal state is set, but use a diff class if this id is the one selected in config
	selectedClass = "tabBottomItem";
	if(id == currentSubID)
		selectedClass = "tabBottomItemSelected";

	obj.className = selectedClass;
	
	//alert("done out id=" + id);
}

/*********************  Minor functions here *****************************************/

 function divSetVisible(divName,shimName,showIt)
  {
   var DivRef = document.getElementById(divName);
   var IfrRef = document.getElementById(shimName);
   
   if(DivRef == 'undefined')
   	alert("cant get " + divName);
	
   if(showIt != 0)
   {
 		DivRef.style.display = "block";
 		IfrRef.style.display = "block";
		
 		// global vars to keep track of this option
		subLeft		= findPosX(DivRef);
		subTop 		= findPosY(DivRef);
		subWidth	= DivRef.offsetWidth;
		subHeight	= DivRef.offsetHeight;
		subDisplay = 1;
		
 		
		IfrRef.style.width = DivRef.offsetWidth + 'px';
		IfrRef.style.height = DivRef.offsetHeight + 'px'; 
		IfrRef.style.top = subTop + 'px';
		IfrRef.style.left = subLeft + 'px';
		IfrRef.style.zIndex = DivRef.style.zIndex - 1;
		IfrRef.style.zIndex = 99;   // !!!!
		
		// normally you dont want these unless testing  - see config
		if(showSubOptionBackground == 1)
		{
			if(subIframeBackgroundColour != "")
				IfrRef.style.background = subIframeBackgroundColour;  
		}
		
		//alert("new iframe height=" + IfrRef.style.height + " width=" + IfrRef.style.width + "left=" + IfrRef.style.left  + "top=" + IfrRef.style.top + "z=" + IfrRef.style.zIndex);
   }
   else
   {
		IfrRef.style.display = "none";
   		DivRef.style.display = "none";
		 
		// global vars to keep track of this option
		subDisplay = 0;
   }
  }

function	getObjectByID(mainID)
{	
	var	out = "";

	var	len = options.length;
	
	for(i = 0; i < len; i++)
	{
		obj = options[i];
		if(obj.id == mainID)
		{
			out = obj;
			break;
		}
	}
	return out;

}
function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}