ÿþ
//------------------------------------------------
// constants
//------------------------------------------------
var AIR_FRICTION					= 0.2;
var GRAVITY							= 4.0;	
var X_POKE_FORCE					= 1.0;
var Y_POKE_FORCE					= 1.0;
var ANIMATION_DURATION				= 30;
var ANCHOR_X						= 400;
var HEAD_HANG_LIMIT					= 100;
var	HEAD_HANG_TENSION				= 0.3;
var PI180							= Math.PI / 180.0;
var HEAD_WIDTH						= 146;
var HEAD_HEIGHT						= 111;
var START_HEIGHT_ABOVE_ANCHOR		= 300;
var MILLISECONDS_PER_ANIMATION_STEP =  60;
var ONE_HALF						= 0.5;
var DRAG_FORCE						= 0.2;
var WOBBLE							= 5.0;


//---------------------------
// names of parts
//--------------------------
var NULL_PART			= -1;
var HANG_UPPERARM		=  0;
var HANG_FOREARM		=  1;
var RIGHT_UPPER_ARM		=  2;
var RIGHT_FOREARM		=  3;
var RIGHT_HAND			=  4;
var LEFT_UPPER_ARM		=  5;
var LEFT_FOREARM		=  6;
var LEFT_HAND			=  7;
var BOTTOM_UPPER_ARM	=  8;
var BOTTOM_FOREARM		=  9;
var BOTTOM_HAND			= 10;
var HEAD				= 11;
var NUM_PARTS			= 12;

//------------------------------------------------
// DOM elements
//------------------------------------------------
var part = [];

var ventrellaLink	= null;
var alifeLink		= null;
var artLink			= null;
var ideasLink		= null;

//------------------------------------------------
// variables
//------------------------------------------------
var animating		= 0;
var clock			= 0;
var mouseX			= 0;
var mouseY			= 0;
var animationTimer	= 0;
var time			= 0;
var headXVelocity	= 0.0;
var headYVelocity	= 0.0;
var imageFolder		= 'CreatureImages/';
var browserWidth 	= 0;
var centerX			= 0;



//----------------------------------------------------------------------
function initializeCreature()
{
	time = 0;

	var body = document.getElementsByTagName( "body" )[0];
	
	browserWidth 	= document.body.clientWidth;
	centerX			= browserWidth / 2 - HEAD_WIDTH * ONE_HALF;
	
	//-------------------------------------------------------------------------------------------------------------------------------------
	// specify all the parts to be displayed along the time line
	//-------------------------------------------------------------------------------------------------------------------------------------
	//			body, index, 			parentIndex, 		xOff, 			yOff,			l,		a,		partName,				imageFile,				arm		URLString
	createPart( body, HANG_UPPERARM,	HEAD,				0,				0.0,			60,     -90, 	"",						"vertArmUpLeft.png",	false,	"null"										);
	createPart( body, HANG_FOREARM,		HANG_UPPERARM,		0.0,			0.0,			60,  	0, 		"",						"hangForearm.png",		false,	"null"										);
	createPart( body, RIGHT_UPPER_ARM, 	HEAD,				100,			45,				120,	40, 	"",						"armDownRight.png",		true,	"null"										);
	createPart( body, RIGHT_FOREARM,	RIGHT_UPPER_ARM,	10.0,			10.0,			80,		-90, 	"",						"armUpRight.png",		true,	"null"										);
	createPart( body, RIGHT_HAND,		RIGHT_FOREARM,		50.0,   		-10.0,			120,	70, 	"Ideas",				"rightHand.png",		true,	"http://www.ventrella.com/Ideas/index.html"	);
	createPart( body, LEFT_UPPER_ARM,	HEAD,				-30.0,  		40,				100,	120, 	"",						"armDownLeft.png",		true,	"null"										);
	createPart( body, LEFT_FOREARM,		LEFT_UPPER_ARM,		-10.0,  		-20.0,			80,  	100, 	"",						"armUpLeft.png",		true,	"null"										);
	createPart( body, LEFT_HAND, 		LEFT_FOREARM,		-10.0,  		-20.0, 			100,  	-60, 	"Virtual Creatures",	"leftHand.png",			true,	"http://www.ventrella.com/Alife/alife.html"	);
	createPart( body, BOTTOM_UPPER_ARM,	HEAD,				80,				100,			90,  	140, 	"",						"vertArmDownLeft.png",	true,	"null"										);
	createPart( body, BOTTOM_FOREARM,	BOTTOM_UPPER_ARM,	-10.0, 			40.0,			90,  	-90, 	"",						"vertArmDownRight.png",	true,	"null"										);
	createPart( body, BOTTOM_HAND, 		BOTTOM_FOREARM,		20.0,  			10.0,			100,  	-70, 	"Algorithmic Art",		"bottomHand.png",		true,	"http://www.ventrella.com/Tweaks/index.html");
	createPart( body, HEAD, 			NULL_PART,			0.0,   			0.0,			120, 	0, 		"Jeffrey Ventrella",	"jj_center.png",			false,	"http://www.jjventrella.com/"				);

	ventrellaLink = document.createElement( "div" );
	ventrellaLink.style.position = "absolute";
	ventrellaLink.style.left = -100;
	ventrellaLink.style.top  = -100;
	ventrellaLink.style.visibility = "hidden";	
	ventrellaLink.innerHTML 
	= "<a href = 'http://www.jjventrella.com/'  target = 'blank' ><img src = 'CreatureImages/Ventrella.png' border = 0></a>" 
	+ "<br>"
	+ "<a href = 'http://www.jjventrella.com/'  target = 'blank'  style = 'text-decoration:none'><font size = 3 face='arial' color=#666666>About Ventrella</font></a>"; 
	body.appendChild( ventrellaLink );

	alifeLink = document.createElement( "div" );
	alifeLink.style.position = "absolute";
	alifeLink.style.left = -100;
	alifeLink.style.top  = -100;
	alifeLink.style.visibility = "hidden";	
	alifeLink.innerHTML = 
	"<a href = 'http://www.ventrella.com/Alife/alife.html'  target = 'blank' ><img src = 'CreatureImages/virtual.png' border = 0></a>"
	+ "<br>"	
	+ "<a href = 'http://www.ventrella.com/Alife/alife.html'  target = 'blank'   style = 'text-decoration:none'><font size = 3 face='arial' color=#666666>Virtual Creatures</font></a>"; 
	
	body.appendChild( alifeLink );

	artLink = document.createElement( "div" );
	artLink.style.position = "absolute";
	artLink.style.left = -100;
	artLink.style.top  = -100;
	artLink.style.visibility = "hidden";
	artLink.innerHTML 
	= "<a href = 'http://www.ventrella.com/Tweaks/index.html'  target = 'blank' ><img src = 'CreatureImages/art.png' border = 0></a>"
	+ "<br>"	
	+ "<a href = 'http://www.ventrella.com/Tweaks/index.html'  target = 'blank'  style = 'text-decoration:none'><font size = 3 face='arial' color=#666666>Algorithmic Art</font></a>"; 
	body.appendChild( artLink );

	ideasLink = document.createElement( "div" );
	ideasLink.style.position = "absolute";
	ideasLink.style.left = -100;
	ideasLink.style.top  = -100;
	ideasLink.style.visibility = "hidden";	
	ideasLink.innerHTML 
	= "<a href = 'http://www.ventrella.com/Ideas/index.html'  target = 'blank' ><img src = 'CreatureImages/ideas.png' border = 0></a>"
	+ "<br>"
	+ "<a href = 'http://www.ventrella.com/Ideas/index.html'  target = 'blank'  style = 'text-decoration:none'><font size = 3 face='arial' color=#666666>Ideas</font></a>"; 
	body.appendChild( ideasLink );



	//---------------------------------------------------
	// initialize head
	//---------------------------------------------------
	part[ HEAD ].x		= centerX;
	part[ HEAD ].y		= - START_HEIGHT_ABOVE_ANCHOR;
	part[ HEAD ].width	= HEAD_WIDTH;
	part[ HEAD ].height	= HEAD_HEIGHT;
	headXVelocity		= -20.0 + Math.random() * 40.0;
	headYVelocity		= 0.0;
	headPokeState		= 0;



	//---------------------------------------------------
	// initialize creature
	//---------------------------------------------------
	setPositionOfCreature();
	
	//--------------------------------------------------------------
	// this gets all the parts in place so it starts up correctly
	//--------------------------------------------------------------
	updateCreatureBehavior();

	//---------------------------------------------------
	// start it not moving
	//---------------------------------------------------
	animating = true;
	//console.log( "STARTING for the first time" );

	//------------------------------------------------------------
	// start up the animationTimer...
	// (first clear it out in case it is already on)
	//------------------------------------------------------------
	clearTimeout ( animationTimer );
	animationTimer = setTimeout( "updateAnimation()", MILLISECONDS_PER_ANIMATION_STEP );


}//----------------------------------------------------------------------






//---------------------------------------------------------------------------------------------------------
function createPart( body, index, parentIndex, xOff, yOff, l, a, partName, imageFile, arm, URLString)
{
	part[ index ] = document.createElement( "div" );
	
	part[ index ].parent			= parentIndex;
	part[ index ].style.position	= "absolute";
	part[ index ].title				= partName;
	part[ index ].image				= imageFile;
	part[ index ].URL				= URLString;
	part[ index ].xOffset			= xOff;
	part[ index ].yOffset			= yOff;
	part[ index ].length			= l;
	part[ index ].baseAngle			= a;
	part[ index ].left				= 0;
	part[ index ].top				= 0;
	part[ index ].width				= l;
	part[ index ].height			= l;
	part[ index ].armPart			= arm;
	part[ index ].id				= index;
	part[ index ].animating			= false;
	
	
	$( part[ index ] ).mousemove	( function( event ) { setMouseMove( event, this.id ); } );
	$( part[ index ] ).mouseover	( function( event ) { setMouseOver( event, this.id ); } );
	$( part[ index ] ).mouseout		( function( event ) { setMouseOut ( event, this.id ); } );
	
	body.appendChild( part[ index ] );

}//----------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function setPositionOfCreature()
{	
	browserWidth 	= document.body.clientWidth;
centerX			= browserWidth / 2 - HEAD_WIDTH * ONE_HALF;

//	centerX			= browserWidth / 2;

	for (var i=0; i< NUM_PARTS; i++)
	{
		updateInnerHTML(i);

		// this overrides the cancellation of scaling of non-stretchable parts - just this once...
		//setInnerHtml(i);
	}
	
	//------------------------------------------------------------------------
	// reset clock and start up again so it settles into its new place 
	//------------------------------------------------------------------------
	startAnimating();	
	
}//-------------------------------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function startAnimating()
{
	clock = 0;
	animating = true;
	//console.log( "animating" );

	//------------------------------------------------------------
	// start up the animationTimer...
	// (first clear it out in case it is already on)
	//------------------------------------------------------------
	clearTimeout ( animationTimer );
	animationTimer = setTimeout( "updateAnimation()", MILLISECONDS_PER_ANIMATION_STEP );

	for (var i=0; i< NUM_PARTS; i++)
	{
		part[i].animating = true;
	}
	
}//-------------------------------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function setMouseOver( event, index )
{
	//----------------------------------------------------
	// save off these values
	//----------------------------------------------------
	mouseX = event.clientX;
	mouseY = event.clientY;

	//console.log( "mouse over part " + index );
	//console.log( "x = " + mouseX );
	//console.log( "y = " + mouseY );

	
	if (( index == LEFT_HAND	)
	||  ( index == RIGHT_HAND	)
	||  ( index == BOTTOM_HAND	)
	||  ( index == HEAD			))
	{
		//part[ index ].animating = false;	
	
		if ( animating )
		{
			stopAnimation();
		}
			if ( index == HEAD )
			{
				ventrellaLink.style.left = part[ index ].left + 100;
				ventrellaLink.style.top  = part[ index ].top  - 80;
				ventrellaLink.style.visibility	= "visible";	
				
				alifeLink.style.visibility		= "hidden";	
				artLink.style.visibility		= "hidden";	
				ideasLink.style.visibility		= "hidden";	
			}
			else if ( index == LEFT_HAND )
			{
				alifeLink.style.left = part[ index ].left;
				alifeLink.style.top  = part[ index ].top  - 100;
				alifeLink.style.visibility		= "visible";	
				
				ventrellaLink.style.visibility	= "hidden";	
				artLink.style.visibility		= "hidden";	
				ideasLink.style.visibility		= "hidden";	
			}
			else if ( index == BOTTOM_HAND )
			{
				artLink.style.left = part[ index ].left + 20;
				artLink.style.top  = part[ index ].top  - 70;
				artLink.style.visibility		= "visible";	
				
				ventrellaLink.style.visibility	= "hidden";	
				alifeLink.style.visibility		= "hidden";	
				ideasLink.style.visibility		= "hidden";	
			}
			else if ( index == RIGHT_HAND )
			{
				ideasLink.style.left = part[ index ].left + 20;
				ideasLink.style.top  = part[ index ].top  - 80;
				ideasLink.style.visibility		= "visible";	
				
				ventrellaLink.style.visibility	= "hidden";	
				alifeLink.style.visibility		= "hidden";	
				artLink.style.visibility		= "hidden";	
			}
		}
		else
		{
			//console.log( "poke" );
			headXVelocity += -X_POKE_FORCE * ONE_HALF + Math.random() * X_POKE_FORCE;
			headYVelocity += -Y_POKE_FORCE;	
		}
		
}//-------------------------------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function setMouseOut( event, index )
{
	//----------------------------------------------------
	// save off these values
	//----------------------------------------------------
	mouseX = event.clientX;
	mouseY = event.clientY;

	//console.log( "mouse out part " + index );
	//console.log( "x = " + mouseX );
	//console.log( "y = " + mouseY );

	if ( ! animating )
	{
		startAnimating();
	}
	
	part[ index ].animating  = true;
	
}//-------------------------------------------------------------------------------------------



//-------------------------------------------------------------------------------------------
function setMouseMove( event, index )
{
	//----------------------------------------------------
	// save off these values
	//----------------------------------------------------
	var previousMouseX = mouseX;
	var previousMouseY = mouseY;
	
	mouseX = event.clientX;
	mouseY = event.clientY;

	//console.log( "mouse move on part " + index );
	//console.log( "x = " + mouseX );
	//console.log( "y = " + mouseY );

	if (( index != LEFT_HAND	)
	&&  ( index != RIGHT_HAND	)
	&&  ( index != BOTTOM_HAND	)
	&&  ( index != HEAD			))
	{
		headXVelocity += ( mouseX - previousMouseX ) * DRAG_FORCE;
		headYVelocity += ( mouseY - previousMouseY ) * DRAG_FORCE;
	}
	
	clock = 0;
	if ( ! animating )
	{
		startAnimating();
	}

}//-------------------------------------------------------------------------------------------



//----------------------------------------------------------------------
function stopAnimation()
{
	clock = ANIMATION_DURATION;
	animating = false;
	//console.log( "not animating" );
	clearTimeout ( animationTimer );
	
	ventrellaLink.style.visibility	= "hidden";	
	alifeLink.style.visibility		= "hidden";	
	ideasLink.style.visibility		= "hidden";	
	artLink.style.visibility		= "hidden";	
	
}//-------------------------------------------------------------------------------------------




//----------------------------------------------------------------------
function updateAnimation()
{
	time ++;
	
	//------------------------------------------------------------
	// reset the animationTimer so it keeps on tickin'
	//------------------------------------------------------------
	animationTimer = setTimeout( "updateAnimation()", MILLISECONDS_PER_ANIMATION_STEP );

	if ( animating == true )
	{
		clock ++;

		if ( clock > ANIMATION_DURATION )
		{
			stopAnimation();
		}
		
		//------------------------
		// update head physics
		//------------------------
		updateHeadPhysics();
	
		//-------------------------------
		// update creature behavior
		//-------------------------------
		updateCreatureBehavior();

		//console.log( clock );
	}

}//----------------------------------------------------------------------




//-------------------------------------------------------------------------------------------
function updateCreatureBehavior()
{
	// hanging parts
	

part[ HANG_FOREARM	].y = part[ HANG_UPPERARM ].y - 70;

	part[ HANG_UPPERARM ].y = ( part[ HEAD ].y ) * ONE_HALF;
	part[ HANG_UPPERARM ].x = part[ HEAD ].x - 10;
	
	
	part[ HANG_FOREARM	].width = 70;
	
	
	
	
	part[ HANG_UPPERARM ].width = part[ HEAD ].x - part[ HANG_UPPERARM ].x + 60;
	
	
	part[ HANG_FOREARM	].height = ( part[ HEAD ].y ) * ONE_HALF;
	part[ HANG_UPPERARM ].height = ( part[ HEAD ].y ) * ONE_HALF;
	

	part[ HANG_FOREARM  ].top	= part[ HANG_FOREARM  ].y;

	part[ HANG_UPPERARM ].left	= part[ HANG_UPPERARM ].x + 30;
	part[ HANG_UPPERARM ].top	= part[ HANG_UPPERARM ].y;




	part[ HEAD ].left = part[ HEAD ].x - 0; 
	part[ HEAD ].top  = part[ HEAD ].y - 0; 
	
	
part[ HANG_FOREARM	].x = part[ HEAD ].x;
part[ HANG_FOREARM  ].left	= ( centerX + 60 ) + ( part[ HANG_FOREARM	].x - ( centerX + 60 ) ) * 0.7;
	

	var angleAccum = part[ HEAD ].baseAngle;
		
	for (var i=0; i< NUM_PARTS; i++)
	{
		if ( part[i].armPart )
		{
			if ( part[i].parent == HEAD )
			{
				angleAccum = part[ HEAD ].baseAngle;
			}
		
			angleAccum += part[i].baseAngle;
			var a = ( angleAccum + WOBBLE * Math.sin( time * 0.1 + i * 1.5 ) ) * PI180;
			
			var vectorX = Math.cos(a);
			var vectorY = Math.sin(a);
			
			var px = part[ part[i].parent ].x + part[i].xOffset;
			var py = part[ part[i].parent ].y + part[i].yOffset;

			part[i].x = px + vectorX * part[i].length; 
			part[i].y = py + vectorY * part[i].length; 


			if ( part[i].animating )
			{
				if ( px < part[i].x )
				{
					part[i].left  = px; 
				}
				else
				{
					part[i].left = part[i].x; 
				}			
	
				if ( py < part[i].y )
				{
					part[i].top = py; 
				}
				else
				{
					part[i].top = part[i].y; 
				}	
			}
		}
		
		updateInnerHTML(i);
	}

}//-------------------------------------------------------------------------------------------


//----------------------------------------------------------------------
function updateHeadPhysics()
{
	//-------------------------------------------
	// head air friction
	//-------------------------------------------
	headXVelocity *= ( 1.0 - AIR_FRICTION );		
	headYVelocity *= ( 1.0 - AIR_FRICTION );	
	
	//-------------------------------------------
	// head gravity
	//-------------------------------------------
	headYVelocity += GRAVITY;			
	
	//-------------------------------------------
	// update head position by velocity
	//-------------------------------------------
	part[ HEAD ].x += headXVelocity;
	part[ HEAD ].y += headYVelocity;
	
	//-------------------------------------------
	// head hanging forces
	//-------------------------------------------
	var xx = centerX - part[ HEAD ].x;
	var yy = - part[ HEAD ].y;
	var d = Math.sqrt( xx*xx + yy*yy );
	
	if ( d > HEAD_HANG_LIMIT )
	{
		var diff = d - HEAD_HANG_LIMIT;
		
		var xForce = ( xx / d ) * diff;
		var yForce = ( yy / d ) * diff;
		
		headXVelocity += xForce * HEAD_HANG_TENSION;
		headYVelocity += yForce * HEAD_HANG_TENSION;
	}	

}//-------------------------------------------------------------------------------------------



//----------------------------------------------------------------------
function updateInnerHTML(i)
{
	part[i].right	= part[i].left	+ part[i].width;
	part[i].bottom	= part[i].top	+ part[i].height;

	part[i].style.left = part[i].left;
	part[i].style.top  = part[i].top;		
		
	setInnerHtml(i);

}//-------------------------------------------------------------------------------------------




//----------------------------------------------------------------------
function setInnerHtml(i)
{
	if ( part[i].animating )
	{
		var widthString  = " width  = "		+ ( part[i].width ).toString();
		var heightString = " height = "		+ ( part[i].height).toString();
	
//var imageString = imageFolder + part[i].image + " border = 0 " + widthString + heightString;
		var imageString = imageFolder + part[i].image + " border = 0 ";
	
		if ( part[i].URL == "null" )
		{
			part[i].innerHTML = "<img src = " + imageString + "></img>";
		}
		else
		{
			part[i].innerHTML = "<a href = " + part[i].URL + "  target = 'blank'  ><img src = " + imageString + " ></img></a>";
		}
	}

}//-------------------------------------------------------------------------------------------