JavaScript: Fun 3D Text Rotator, horizontal rotation

3D Text Rotator, horizontal rotation
Rotate your messages in the center of the webpage. Real 3D-look and stunning picture-filling. Add as many messages and pictures as you like. Easy configuration of messages, pictures, colors, size and vertical position. Requires Internet Explorer 5x/6x or higher. Brought to you by www.fabulant.com

3D Text Rotator, vertical rotation
Click here to the view 3D Text Rotator with vertical rotation.

Configuration:

Step 1: Open your webpage. Paste the following code into the head-section of your webpage:

Step 2: Paste the following code right above the </body>-tag of your webpage (almost at the bottom of the webpage):

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// Set the URLs of the pictures filling your letters
// You may add as many pictures as you like
var pic=new Array("pic1.jpg","pic2.jpg","pic3.jpg")

// Set the messages
// You may add as many messages as you like
var message=new Array("Do you love JavaScript?","Download more than 500 scripts","Be happy don't worry")

// Set the font
var fnt="Arial Black"

// Set the width of the message-box
var formwidth=800

// Set the color of the 3D-extrusion. HTML-values required
var fillcolor="#666666"

// Set the depth of the 3D-extrusion (pixels)
var backdepth=6

// Set the speed of rotation (higher means faster)
// Acceptable values are 1,2,5,10,25
var speed=10

// Set the opacity of the filling
// Accepteable values range from 0% to 100%
var opacity="100%"

// Set the fill-effect of the pictures
// Acepptable calues are "frame" or "tile" or "pattern"
var filltype="frame"

// Set the pause between the messages (seconds)
var pause=2

// Shall the script stop after displaying all messages?
// Set "true" or "false"
var stopafterdisplay=false

// Set the vertical position the the textrotator
// Set it to "middle" if you want it to be displayed in the middle of the page
// Set any pixel-value if you want it to be positioned absolutely
var postop=120

// Do not edit below this line
var circlemark=" "
var i_angle1=0
var i_pic=0
var i_message=0
var posleft=0
var pagewidth
var pageheight
var longestmessage=0
var emptyspace=" "
var flagstarted=false
pause*=1000

var opera=navigator.userAgent.match(/Opera/) 
var ie5=document.getElementById&&document.all&&!opera?1:0

for (i=0;i<=message.length-1;i++) {
	if (message[i].length>longestmessage) {
		longestmessage=message[i].length
	}
	longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {
	var emptyspace=""
	var i_emptyspace=(longestmessage-message[i].length)/2
	for (ii=0;ii<=i_emptyspace;ii++) {
		emptyspace+=circlemark
	}
	message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function initform() {
	pagewidth=document.body.clientWidth
	pageheight=document.body.clientHeight
	posleft=(pagewidth-formwidth)/2
	if (postop=="middle") {
		postop=pageheight/2
	}
	document.getElementById('rectid').style.left=posleft
	document.getElementById('rectid').style.top=postop
	preload()
}
function preload() {
	var i_preload=0
	for (i=0;i<=pic.length-1;i++) {
		var imgref=eval("document.n"+i)
		if (imgref.complete) {i_preload++}
	}
	if (i_preload>=pic.length-1) {
		window.status=i_preload
		var timer=setTimeout("changeform()",pause)
	}
	else {
		var timer=setTimeout("preload()",50)
	}
}

function changeform() {
	i_angle1+=speed
	if (i_angle1==360) {
		pausenow()
	}
	else {
		if (i_angle1==250) {
			i_pic++
			i_message++
			if (i_pic>=pic.length) {i_pic=0}
			if (i_message>=message.length) {i_message=0}
			document.getElementById('fillid').src=pic[i_pic]
			document.getElementById('textpathid').string=message[i_message]
			flagstarted=true
		}
		document.getElementById('extrusionid').rotationangle=0+","+i_angle1
		if (stopafterdisplay && i_message==0 && flagstarted) {
			document.getElementById('textpathid').string=""
		}
		else {
			var timer=setTimeout("changeform()",20)
		}
	}
}

function pausenow() {
	i_angle1=0
	document.getElementById('extrusionid').rotationangle=0+","+i_angle1
	var timerendpause=setTimeout("changeform()",pause)
}

if (ie5) {
	document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
	for (i=0;i<=pic.length-1;i++) {
		document.write('<img src="'+pic[i]+'" name="n'+i+'" width=1 height=1>')
	}
	document.write('</div>')
   	document.write('<v:curve id="rectid" strokeweight="2pt" style="position:absolute;" from="0,0" to="'+formwidth+',0.1">')
   	document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" backdepth="'+backdepth+'" diffusity="2.5" metal="true"/>')
 document.write('<v:fill id="fillid" opacity="'+opacity+'" color="'+fillcolor+'" type="'+filltype+'" src="'+pic[0]+'"/>')
	document.write('<v:path textpathok="t"/>')
	document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string="'+message[i_message]+'"/>')
   	document.write('</v:curve>')
	window.onload=initform
   }
</script>

Step 3: Go to the top of the script and configure messages, URLs of pictures colors, strength of opacity and size.