/*******************************************************************
*
* File    : navbuddy.js
*
* Created : 2000/08/12
*
* Author  : Roy Whittle  (Roy@Whittle.com) www.Roy.Whittle.com
*
* Purpose : A test of xLayer. I wanted to create a unique type 
*		of navigation menu. Tree menu's & expand menu's have
*		been done to death.
*
* History
* Date         Version        Description
*
* 2000-08-12	1.0		Initial version
***********************************************************************/
var	Buddy		= new Array;
var	m		= new xMouse();


var Width1 = 40;
var Height1 = 40;
var Width2	=200;
var Height2 = 40;
var Width3  = 160;
var Height3 = 40;
var Start2X	=20;
var Start2Y	=0;
var Start3X	=40;
var Start3Y	=15;


//var db = new DebugWindow(40,40); /*** You need debug.js to use this ***/

/**** Helper functions ***/
function jMakeNice(str)
{
	return("<CENTER><FONT FACE='Arial'>&nbsp;<br>"+str+"&nbsp;</FONT></CENTER>");
}

function jLink(theHref, theText, theTarget, mOvr, mOut, mClk)
{
	var str="";
	str += "<A HREF=\"" + theHref + "\"";
	if(theTarget)	str += " TARGET=\"" + theTarget + "\""
	if(mOvr)		str += "\n	onMouseOver=\"" + mOvr + "\"";
	if(mOut)		str += "\n	onMouseOut=\""  + mOut + "\"";
	if(mClk)		str += "\n	onClick=\""     + mClk + "\"";
	str += ">"+theText+"</A>";

	return(str);
}
function jTable(content)
{
	return("<TABLE WIDTH = '"+Width3+"' CELLSPACING='0' CELLPADDING='0' BACKGROUND='images/bg1.gif'>" + content + "</TABLE>");
}
function jRow(content)
{
	return("\n<TR>\n" + content + "</TR>\n");
}
function jCell(content)
{
	return("    <TD>" + content + "</TD>\n");
}

/*** NavBudyy constructor ***/
function NavBuddy()
{
	var i = Buddy.length;

	Buddy[i] = this;

	this.imgName 	= "f"+i;
	this.state 	= "TRACKING";

	this.follower = new xLayer("<IMG SRC='images/ball.gif' NAME='f"+i+"'>",2000,2000,20);
	this.opener   = new xLayer("<IMG SRC='images/ball_r5.gif'>",-2000,-2000,20);
	this.linkLayer = new xLayer("empty",-2000,-2000,Width3);

	this.follower.parent=Buddy[i];
	this.follower.x		= -2000;
	this.follower.y		= 0;
	this.follower.moveTo(-2000,0);
	this.follower.addEventHandler("onmouseover",enterOp);
	this.follower.addEventHandler("onmouseout",exitOp);

/*** Create a second layer for the open sequence ***/
	this.opener.hide();
	this.opener.parent=Buddy[i];
	this.opener.x=0;
	this.opener.y=0;
	this.opener.addEventHandler("onmouseover",enterOp);
	this.opener.addEventHandler("onmouseout",exitOp);

/*** Create a third layer for the links sequence ***/
	this.linkLayer.hide();
	this.linkLayer.parent=Buddy[i];
	this.linkLayer.x=0;
	this.linkLayer.y=0;
	this.linkLayer.addEventHandler("onmouseover",enterOp);
	this.linkLayer.addEventHandler("onmouseout",exitOp);
	this.linkLayer.links = new Array();
	this.linkLayer.height = 0;
//	this.linkLayer.setBgColor("#669999");
//	this.linkLayer.setBgImage("images/plazmaball1.gif");

	this.follower.show();

	this.follower.setzIndex(4);
	this.opener.setzIndex(5);
	this.linkLayer.setzIndex(2);

}
NavBuddy.prototype.addLink = function(link, text, target)
{
	var l = this.linkLayer.links;
	l[l.length] = jLink(link, text, target);
	this.linkLayer.height = l.length * 32 + Height3;

	var str="";
	for(i = 0 ; i<l.length ; i++)
	{
		str += l[i] + "<br>";
	}
	str = jMakeNice(str);
	str = jTable(jRow( jCell( str ) ) );
	this.linkLayer.setContent(str);	
}


/*** animation and state change ***/
function startAnimation()
{
//db.out("start");
	iTimerId=setInterval("follow()", 50);
}
function enterLayer(theBuddy)
{
//db.enter();
	if(theBuddy.state=="TRACKING")
	{
		theBuddy.state="OPENING";
		var o=theBuddy.opener;
		var f=theBuddy.follower;
		o.x=-Width2;
		o.y=0;
		o.clip(-o.x,0,Width2,Height2);
		o.moveTo(f.x+o.x+Start2X, f.y+o.y+Start2Y);
		o.show();
//		f.images[theBuddy.imgName].src="images/plazmaball1.gif";
	}
	else if(theBuddy.state == "CLOSING")
		theBuddy.state="OPENING";
	else if(theBuddy.state == "CLOSELINKS")
		theBuddy.state="OPENLINKS";
//db.exit();
}
function exitLayer(theBuddy)
{
//db.enter();
	if(theBuddy.state=="OPENING")
		theBuddy.state="CLOSING";
	else if(theBuddy.state=="OPENLINKS")
		theBuddy.state="CLOSELINKS";
	else if(theBuddy.state=="OPEN")
		theBuddy.state="CLOSELINKS";
//db.exit();
}
function enterOp(xl)
{
//db.enter();
	enterLayer(xl.parent);
//db.exit();
}
function exitOp(xl)
{
//db.enter();
	exitLayer(xl.parent);
//db.exit();
}
function follow()
{
	for(i=0 ; i<Buddy.length;i++)
	{
		var b=Buddy[i];

		if(b.state=="TRACKING")
		{
			var f=b.follower;
			f.x += (m.X - f.x)/10 +i*4;
			f.y += (m.Y - f.y)/10;

			f.moveTo(f.x, f.y);
		}
		else if (b.state=="OPENING")
		{
			var o=b.opener;
			var f=b.follower;
			if(o.x<0)
			{
				o.x+=10;
				o.clip(-o.x,0,Width2,Height2);
				o.moveTo(f.x+o.x+Start2X, f.y+o.y+Start2Y);
			}
			else
			{
				b.state="OPENLINKS";
				var l=b.linkLayer;
				l.x=0;
				l.y=-l.height;
				l.clip(0, -l.y, Width3, l.height);
				l.moveTo(f.x+l.x+40, f.y+l.y+20);
				l.show();
			}
		}
		else if (b.state=="OPENLINKS")
		{
			var f=b.follower;
			var l=b.linkLayer;
			if(l.y<0)
			{
				l.y+=10;
				l.clip(0, -l.y, Width3, l.height);
				l.moveTo(f.x+l.x+Start3X, f.y+l.y+Start3Y);
			}
			else
			{
				b.state = "OPEN";
			}
		}
		else if (b.state=="CLOSELINKS")
		{
			var f=b.follower;
			var l=b.linkLayer;
			if(l.y > -l.height)
			{
				l.y-=10;
				l.clip(0, -l.y, Width3, l.height);
				l.moveTo(f.x+l.x+Start3X, f.y+l.y+Start3Y);
			}
			else
			{
				l.hide();
				b.state="CLOSING";
			}
		}
		else if (b.state=="CLOSING")
		{
			var o=b.opener;
			var f=b.follower;
			if(o.x > -Width2)
			{
				o.x-=10;
				o.clip(-o.x,0,Width2,Height2);
				o.moveTo(f.x+o.x+Start2X, f.y+o.y+Start2Y);
			}
			else
			{
				o.hide();
				b.state="TRACKING";
			}
		}
	}
}