Flying Spinning Eight Note

	var nAngle = 0;		// The changing angle used for the sin() function.
	var timerID = null;	// A handle to the setInterval and clearInterval timers
	var ORGIN_Y = 0;		// The initial Y-axis the motion begins on.


	// function animateEighth()
		// Step 1) Determine what browser the user is using.
			// Different actions need to be taken depending on whether the user's browser is MSIE
			// or Navigator, due to their different implementations of DHTML.
		// Step 2) Get the initial y position of the image.
		// Step 3) Show the image
		// Step 4) create a timer used to call the Action() function which performs the actual movement of the image.

	function animateEighth()
	{
		with ( navigator )
		{
			if ( ( appName.indexOf( "Microsoft" ) > -1 ) && ( parseInt( appVersion ) >= 4 ) )
			{
				ORGIN_Y = document.all( "Eighth" ).style.pixelTop;
				document.all( "Eighth" ).style.visibility = "visible";
			}
			else if ( ( appName == "Netscape" ) && ( parseInt( appVersion ) >= 4 ) )
			{
				ORGIN_Y = document.layers[ "Eighth" ].pageY;
				document.layers[ "Eighth" ].visibility = "show";
			}
		}
		timerID = setInterval( "Action()", 10 );
	}


	// function Action()
		//  Step 1)  // calculate the next y-position to apply to the upper left hand corner of the image. 
			// The angle must be converted to radians. It needs a negative sign because of the way that
			// browser windows coordinate systems work. Y values increase from the top of the
			// screen going down. The last parameter can be manipulated to change the distance between each point, or
			// the "height" of the curve.
		// Step 2) determine the browser the user is using, just like before.
			// Change the position of the image. in MSIE assign new values to the pixelLeft and pixelTop properties
			// of the style object. in Netscape the moveTo() method of the layer object can be called passing the 
			// new X and Y position.
		// Step 3) Examine the X position of the image to determine if the timer needs to continue. if it does then increase the Angle
			// (The difference can be changed for your purposes.) if it doesn't, then stop the time and hide the image.
.
	function Action()
	{
		with ( Math )
		{
			var nTop = -( round( sin( (nAngle * PI/180) ) * 100 ) );
		}

		with ( navigator )
		{
			if ( ( appName.indexOf( "Microsoft" ) > -1 ) && ( parseInt( appVersion ) >= 4 ) )
			{
				document.all( "Eighth" ).style.pixelLeft += 5;
				document.all( "Eighth" ).style.pixelTop =ORGIN_Y + nTop;
				if ( document.all( "Eighth" ).style.pixelLeft < screen.availWidth - document.all( "Eighth" ).style.width )
					nAngle += 5;
				else
				{
					// The image has reached the end of the page so the timer can be stopped.
					clearInterval( timerID );
					// Hide the images
					document.all( "Eighth" ).style.visibility = "hidden";
				}
			}
			else if ( ( appName == "Netscape" ) && ( parseInt( appVersion ) >= 4 ) )
			{
				document.layers[ "Eighth" ].moveTo( document.layers[ "Eighth" ].pageX += 5, ORGIN_Y + nTop );
				if ( document.layers[ "Eighth" ].pageX <screen.availWidth - document.layers[ "Eighth" ].width )
					nAngle += 5;
				else
				{
					clearInterval( timerID );
					document.layers[ "Eighth" ].visibility = "hide";
				}
			}
		}
	}

	// the setInitPos() function is called from the body onLoad event to set the initial position
	// and visibility of the image.
	function setInitPos()
	{
		with ( Navigator )
		{
			if ( ( appName.indexOf( "Microsoft" ) > -1 ) && ( parseInt( appVersion ) >= 4 ) )
			{
				document.all( "Eighth" ).style.position = "absolute";
				document.all( "Eighth" ).style.pixelTop = 100;
				document.all( "Eighth" ).style.pixelLeft = 0;
				document.all( "Eighth" ).visibility = "hidden";
			}
			else if ( ( appName == "Netscape" ) && ( parseInt( appVersion ) >= 4 ) )
			{
				document.Layers[ "Eighth" ].moveTo( 0, 100 );
				document.Layers[ "Eighth" ].visibility = "hide";
				document.Layers[ "Eighth" ].zIndex = 1;
			}
		}
	}