var imageHeight = 40;
var imageWidth = 30;
var speakerHeight = 80;
var speakerWidth = 60;
var hMargin = 0.2 * screen.availHeight;
var wMargin = 0.2 * screen.availWidth;
var diameter = screen.availHeight - hMargin;
var radius = 0.5 * diameter;
var numFrames = 10;
var interval = 200;
window.resizeTo(screen.availWidth,screen.availHeight);

function turnLabelOnFromLeadersList(element, event)
{
    var label, profile;
    var id = element.id;
    if (document.all) { 
        // Code for IE
        label = document.all[id+"_label"];
	label.left = parseInt(label.style.left) + 20;
	label.top = parseInt(label.style.top) + 20;
    	label.style.visibility = "visible";
        profile = document.all[id+"_profile"];
	profile.left = parseInt(profile.style.left) + 20;
	profile.top = parseInt(profile.style.top) + 20;
    	profile.style.visibility = "visible";
    }
    else if ( document.getElementById) { 
        // DOM compliant browsers
        label = document.getElementById(id+"_label"); 
	label.style.left = parseInt(label.style.left) + 20 + "px";
	label.style.top = parseInt(label.style.top) + 20 + "px";
    	label.style.visibility = "visible";
        profile = document.getElementById(id+"_profile"); 
	profile.style.left = parseInt(profile.style.left) + 20 + "px";
	profile.style.top = parseInt(profile.style.top) + 20 + "px";
    	profile.style.visibility = "visible";
    }
    else if (document.layers) { 
        // Code for Netscape4
        label = document.layers[id+"_label"];
	label.left = parseInt(label.style.left) + 20;
	label.top = parseInt(label.style.top) + 20;
    	label.style.visibility = "visible";
        profile = document.layers[id+"_profile"];
	profile.left = parseInt(profile.style.left) + 20;
	profile.top = parseInt(profile.style.top) + 20;
    	profile.style.visibility = "visible";
    }
}

function turnLabelOnFromProfile(element, event)
{
    var label, labelPattern, id, result;
    labelPattern = /([0-9]+)\_([a-z]+)/;
    result = element.id.match(labelPattern);
    id = result[1];
    if (document.all) { 
        // Code for IE
        label = document.all[id+"_label"];
    	label.style.visibility = "visible";
    	element.style.visibility = "visible";
    }
    else if ( document.getElementById) { 
        // DOM compliant browsers
        label = document.getElementById(id+"_label"); 
    	label.style.visibility = "visible";
    	element.style.visibility = "visible";
    }
    else if (document.layers) { 
        // Code for Netscape4
        label = document.layers[id+"_label"]
    	label.style.visibility = "visible";
    	element.style.visibility = "visible";
    }
}


function Face(player)
{
    var initialTheta = ( player.initialTheta / 100000 ) * 2 * Math.PI;
    var finalTheta = ( player.finalTheta / 100000 ) * 2 * Math.PI;
    this.initX = ( ( ( 100 - player.initialRho ) / 100 ) * radius * Math.cos(initialTheta) ) + radius + wMargin;
    this.x = this.initX;
    this.initY = ( ( ( 100 - player.initialRho ) / 100 ) * radius * Math.sin(initialTheta) ) + radius + ( 0.4 * hMargin);
    this.y = this.initY;
    this.finalX = ( ( ( 100 - player.finalRho ) / 100 ) * radius * Math.cos(finalTheta) ) + radius + wMargin;
    this.finalY = ( ( ( 100 - player.finalRho ) / 100 ) * radius * Math.sin(finalTheta) ) + radius + ( 0.4 * hMargin);
    this.dX = ( this.finalX - this.initX ) / numFrames;
    this.dY = ( this.finalY - this.initY ) / numFrames;
    this.rhoMovement = player.rhoMovement;
    this.thetaMovement = player.thetaMovement;
    this.said = player.said;
    this.addr = player.addr;
    this.isSpeaker = player.isSpeaker;
    this.score = player.score;
    this.previousScore = player.previousScore;
    this.hasWonPoints = this.score - this.previousScore;
    this.isWinner = player.isWinner;
    if ( document.getElementById) {
        this.front = document.getElementById(player.said+"_front");
        this.profile = document.getElementById(player.said+"_profile");
        this.label = document.getElementById(player.said+"_label");
    }
    else if (document.all) {
       this.front = document.all[player.said+"_front"]
       this.profile = document.all[player.said+"_profile"];
       this.label = document.all[player.said+"_label"];
    }
    else if (document.layers) {
       this.front = document.layers[player.said+"_front"];
       this.profile = document.layers[player.said+"_profile"];
       this.label = document.layers[player.said+"_label"];
    }
    if (this.front) { 
       var frontImage = new Image();
       frontImage.src = "FaceImages/"+player.imageID+".jpg";
       var profileImage = new Image();
       profileImage.src = "FaceImages/"+player.imageID+player.profile+".jpg";
       if ( this.isSpeaker ) {
           this.front.innerHTML = '<A href="'+messagesCGIScript+'&id='+this.said+'" target="messages_posted_by_'+this.addr+'"><IMG src="'+frontImage.src+'" width='+speakerWidth+' height='+speakerHeight+'"></A>';
           this.profile.innerHTML = '<IMG src="'+profileImage.src+'" width='+speakerWidth+' height='+speakerHeight+'">';
       }
       else {
           this.front.innerHTML = '<A href="'+messagesCGIScript+'&id='+this.said+'" target="messages_posted_by_'+this.addr+'"><IMG src="'+frontImage.src+'"></A>';
           this.profile.innerHTML = '<IMG src="'+profileImage.src+'">';
       }
       if ( this.isWinner ) { this.label.innerHTML = '<B class=winnercaptiontext>'+this.addr+'</B> <B class=scorelisttext>'+this.score+'</B>'; }
       else { this.label.innerHTML = '<B class=captiontext>'+this.addr+'</B> <B class=scorelisttext>'+this.score+'</B>'; }
//     If IE was DOM compliant all of the innerHTML statements
//     above could be replaced with something like this:
//     this.profile.appendChild(profileImage); 
    }
}

var faces = Array();
var i;
var subjDiv = "";
var sentDiv = "";

// Create the faces
for (i = 0; i < players.length; i++) {
    faces[i] = new Face(players[i]);
}

// Place the other faces in profile, to face the speaker, and on the 
// page in their initial positions.
for (i = 0; i < players.length; i++) {
    var captionSpacer;
    if ( faces[i].isSpeaker ) { 
        captionSpacer = speakerHeight * 0.2; 
        if ( document.getElementById) { subjDiv = document.getElementById("subject_line_div"); }
	else if ( document.all ) { subjDiv = document.all["subject_line_div"]; }
	else if ( document.layers ) { subjDiv = document.layers["subject_line_div"]; }
        subjDiv.innerHTML = '<B class=subjecttext>'+subjectLineText+'</B>'; 
        if ( document.getElementById) { sentDiv = document.getElementById("sentence_div"); }
	else if ( document.all ) { sentDiv = document.all["sentence_div"]; }
	else if ( document.layers ) { sentDiv = document.layers["sentence_div"]; }
	if ( sentenceText ) {
            sentDiv.innerHTML = '<B class=sentencespeakertext>'+currentSpeaker+'<B class=sentencetext>'+sentenceText+'</B>'; 
        }
    }
    else { captionSpacer = imageHeight * 0.2; }
    if (faces[i].profile.style) {
        faces[i].profile.style.left = faces[i].initX + "px";
        faces[i].profile.style.bottom = faces[i].initY + "px";
	faces[i].profile.style.visibility = "visible";
	faces[i].label.style.left = faces[i].initX + "px";
        faces[i].label.style.bottom = ( faces[i].initY - captionSpacer ) + "px";
	if ( faces[i].hasWonPoints || faces[i].isSpeaker || faces[i].isWinner ) {
            faces[i].label.style.visibility = "visible";
	}
	else { faces[i].label.style.visibility = "hidden"; }
        if ( faces[i].isSpeaker ) { 
	    subjDiv.style.left = ( imageWidth + faces[i].initX ) + "px";
	    subjDiv.style.bottom = ( faces[i].initY + ( 0.5 * speakerHeight ) ) + "px";
 	    subjDiv.style.visibility = "visible";
	    sentDiv.x = ( imageWidth + faces[i].initX );
	    sentDiv.style.left = sentDiv.x + "px";
	    sentDiv.y = ( faces[i].initY + ( 0.5 * imageHeight ) );
	    sentDiv.style.top = sentDiv.y + "px";
	    sentDiv.dX = ( wMargin - sentDiv.x ) / numFrames;
	    sentDiv.dY = ( sentDiv.y - ( 0.05 * hMargin) ) / numFrames;
 	    sentDiv.style.visibility = "hidden";
	}
    }
    else {
	faces[i].profile.left = faces[i].initX;
        faces[i].profile.bottom = faces[i].initY;
	faces[i].profile.visibility = "visible";
	faces[i].label.left = faces[i].initX;
        faces[i].label.bottom = faces[i].initY - captionSpacer;
	if ( faces[i].dX || faces[i].dY || faces[i].isSpeaker || faces[i].isWinner ) {
            faces[i].label.visibility = "visible";
	}
	else { faces[i].label.visibility = "hidden"; }
        if ( faces[i].isSpeaker ) { 
	    subjDiv.left = ( imageWidth + faces[i].initX );
	    subjDiv.bottom = faces[i].initY + ( 0.5 * speakerHeight );
 	    subjDiv.visibility = "visible";
	    sentDiv.x = ( imageWidth + faces[i].initX );
	    sentDiv.left = sentDiv.x;
	    sentDiv.y = ( faces[i].initY + ( 0.5 * imageHeight ) );
	    sentDiv.top = sentDiv.y;
	    sentDiv.dX = ( wMargin - sentDiv.x ) / numFrames;
	    sentDiv.dY = ( sentDiv.y - ( 0.05 * hMargin) ) / numFrames;
 	    sentDiv.visibility = "hidden";
	}
    }
}


// Move each player
function nextMovePlayersFrame () 
{
        for (i = 0; i < faces.length; i++) {
    	    var captionSpacer;
            if ( faces[i].isSpeaker ) { captionSpacer = speakerHeight * 0.2; }
	    else { captionSpacer = imageHeight * 0.2; }
	    faces[i].x = faces[i].x + faces[i].dX;
	    faces[i].y = faces[i].y + faces[i].dY;
            if (faces[i].profile.style) {
	        faces[i].profile.style.left = faces[i].x + "px";
            	faces[i].profile.style.bottom = faces[i].y + "px";
	    	faces[i].label.style.left = faces[i].x + "px";
            	faces[i].label.style.bottom = (faces[i].y - captionSpacer ) + "px";
            	if ( faces[i].isSpeaker ) { 
	            subjDiv.style.left = ( imageWidth + faces[i].x ) + "px";
		    subjDiv.style.bottom = ( faces[i].y + ( 0.5 * speakerHeight ) )+ "px";
	    	}
            }
	    else {
	        faces[i].profile.left = faces[i].x;
            	faces[i].profile.bottom = faces[i].y;
	    	faces[i].label.style.left = faces[i].x;
            	faces[i].label.style.bottom = (faces[i].y - captionSpacer );
            	if ( faces[i].isSpeaker ) { 
	            subjDiv.left = ( imageWidth + faces[i].x );
	    	    subjDiv.bottom = faces[i].y + ( 0.5 * speakerHeight );
	    	}
            }
	}
}


// Create, place and then move the social networks' themes

function Theme(theme)
{
    var theta = ( theme.theta / 100000 ) * 2 * Math.PI;
    this.initX = radius + wMargin;
    this.x = this.initX;
    this.initY = radius + (0.4 * hMargin);
    this.y = this.initY;
    this.finalX = ( ( radius + ( 0.25 * wMargin ) ) * Math.cos(theta) ) + radius + wMargin;
    this.finalY = ( ( radius + ( 0.125 * hMargin ) ) * Math.sin(theta) ) + radius + (0.4 * hMargin);
    this.dX = ( this.finalX - this.initX ) / numFrames;
    this.dY = ( this.finalY - this.initY ) / numFrames;
    this.text = theme.text;
    if ( document.getElementById) {
        this.textBox = document.getElementById("theme_"+theme.network);
    }
    else if (document.all) {
        this.textBox = document.all["theme_"+theme.network];
    }
    else if (document.layers) {
        this.textBox = document.layers["theme_"+theme.network];	
    }
    if (this.textBox) { this.textBox.innerHTML = '<B class=themetext>'+this.text+'</B>'; }
}

// Create the themes
var themes = Array();
for (i = 0; i < networkThemes.length; i++) {
    themes[i] = new Theme(networkThemes[i]);
}

// Place the themes on the page.
for (i = 0; i < themes.length; i++) {
    if (themes[i].textBox.style) {
        themes[i].textBox.style.left = themes[i].initX + "px";
        themes[i].textBox.style.bottom = themes[i].initY + "px";
	themes[i].textBox.style.visibility = "hidden";
    }
    else {
        themes[i].textBox.left = themes[i].initX + "px";
        themes[i].textBox.bottom = themes[i].initY + "px";
	themes[i].textBox.visibility = "hidden";
    }
}

function nextMoveThemeFrame () 
{
	if ( sentDiv ) {
	    sentDiv.x = sentDiv.x + sentDiv.dX;
            sentDiv.y = sentDiv.y - sentDiv.dY;
	    if ( sentDiv.style ) {
	        sentDiv.style.left = sentDiv.x + "px";
	        sentDiv.style.top = sentDiv.y + "px";
		sentDiv.style.visibility = "hidden";
            }	
	    else {
	        sentDiv.left = sentDiv.x;
	        sentDiv.top = sentDiv.y;
		sentDiv.visibility = "hidden";
            }
        }
        for (i = 0; i < themes.length; i++) {
    	    themes[i].x = themes[i].x + themes[i].dX;
	    themes[i].y = themes[i].y + themes[i].dY;
	    if (themes[i].textBox.style) {
	       themes[i].textBox.style.left = themes[i].x + "px";
	       themes[i].textBox.style.bottom = themes[i].y + "px";
	       themes[i].textBox.style.visibility = "visible";	    
	    }
	    else {
	       themes[i].textBox.left = themes[i].x;
	       themes[i].textBox.bottom = themes[i].y;
	       themes[i].textBox.visibility = "visible";	    
	    }
	 }
}


function nextFrame()
{
   frameNum++;
   if ( frameNum >= numFrames ) { haveMovedPlayers = 1; }
   if ( frameNum >= ( 2 * numFrames ) ) { haveMovedThemes = 1; }
   if ( frameNum >= ( 3 * numFrames ) ) { stopAnimation = 1; }
   if ( haveMovedPlayers == 0 ) { nextMovePlayersFrame(); }
   else { 
        // After moving the players, face them all forward
        for (i = 0; i < players.length; i++) {
            if (faces[i].profile.style) {
	        faces[i].front.style.left = faces[i].profile.style.left;
                faces[i].front.style.bottom = faces[i].profile.style.bottom;
	        faces[i].profile.style.visibility = "hidden";
	        faces[i].front.style.visibility = "visible";
            }
            else {
                faces[i].front.left = faces[i].profile.left;
                faces[i].front.bottom = faces[i].profile.bottom;
	        faces[i].profile.visibility = "hidden";
	        faces[i].front.visibility = "visible";
            }
        }
   }
   if ( ( haveMovedPlayers == 1 ) && ( haveMovedThemes == 0 ) ) {
        nextMoveThemeFrame(); 
   }
   if ( haveMovedThemes == 1 ) {
        if ( sentDiv.style ) { sentDiv.style.visibility = "visible"; }
        else { sentDiv.visibility = "visible"; }
        for (i = 0; i < themes.length; i++) {
	    if (themes[i].textBox.style) {
	       themes[i].textBox.style.visibility = "visible";	    
	    }
	    else {
	       themes[i].textBox.visibility = "visible";	    
	    }
	 }
   }
   if ( stopAnimation == 1 ) { clearInterval(intervalId); }
}

/**
 * PortableDrag.js:
 * beginDrag() is designed to be called from an onmousedown event handler.
 * elementToDrag may be the element that received the mousedown event, or it
 * may be some containing element.  event must be the Event object for the
 * mousedown event.  This implementation works with both the DOM Level 2
 * event model and the IE Event model.
 *
 * author: David Flanagan, _JavaScript: The Definitive Guide_, 4th edition, (p. 380)
 *
 **/
function beginDrag(elementToDrag, event) {
    // Compute the distance between the upper-left corner of the element
    // and the mouse click. The moveHandler function below needs these values.
    var deltaX = event.clientX - parseInt(elementToDrag.style.left);
    var deltaY = event.clientY - parseInt(elementToDrag.style.top);

    // Register the event handlers that will respond to the mousemove events
    // and the mouseup event that follow this mousedown event.  
    if (document.addEventListener) {  // DOM Level 2 Event Model
	// Register capturing event handlers
        document.addEventListener("mousemove", moveHandler, true);
	document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) {  // IE 5+ Event Model
	// In the IE Event model, we can't capture events, so these handlers
	// are triggered when only if the event bubbles up to them.
	// This assumes that there aren't any intervening elements that
	// handle the events and stop them from bubbling.
	document.attachEvent("onmousemove", moveHandler);
	document.attachEvent("onmouseup", upHandler);
    }
    else {                            // IE 4 Event Model
	// In IE 4 we can't use attachEvent(), so assign the event handlers
	// directly after storing any previously assigned handlers so they 
        // can be restored.  Note that this also relies on event bubbling.
	var oldmovehandler = document.onmousemove;
	var olduphandler = document.onmouseup;
	document.onmousemove = moveHandler;
	document.onmouseup = upHandler;
    }

    // We've handled this event.  Don't let anybody else see it.  
    if (event.stopPropagation) event.stopPropagation();   // DOM Level 2
    else event.cancelBubble = true;                       // IE

    // Now prevent any default action.
    if (event.preventDefault) event.preventDefault();     // DOM Level 2
    else event.returnValue = false;                       // IE

    /**
     * This is the handler that captures mousemove events when an element
     * is being dragged.  It is responsible for moving the element.
     **/
    function moveHandler(e) {
	if (!e) e = window.event;  // IE event model

        // Move the element to the current mouse position, adjusted as
	// necessary by the offset of the initial mouse click.
	elementToDrag.style.left = (e.clientX - deltaX) + "px";
	elementToDrag.style.top = (e.clientY - deltaY) + "px";

	// And don't let anyone else see this event.
	if (e.stopPropagation) e.stopPropagation();       // DOM Level 2
	else e.cancelBubble = true;                       // IE
    }

    /**
     * This is the handler that captures the final mouseup event that
     * occurs at the end of a drag.
     **/
    function upHandler(e) {
	if (!e) e = window.event;  // IE event model

	// Unregister the capturing event handlers.
	if (document.removeEventListener) {    // DOM Event Model
	    document.removeEventListener("mouseup", upHandler, true);
	    document.removeEventListener("mousemove", moveHandler, true);
	}
	else if (document.detachEvent) {       // IE 5+ Event Model
	    document.detachEvent("onmouseup", upHandler);
	    document.detachEvent("onmousemove", moveHandler);
	}
	else {                                 // IE 4 Event Model
	    document.onmouseup = olduphandler;
	    document.onmousemove = oldmovehandler;
	}

	// And don't let the event propagate any further.
	if (e.stopPropagation) e.stopPropagation();       // DOM Level 2
	else e.cancelBubble = true;                       // IE
    }
}


// Place the newsgroup name, current time, and def button at the bottom of the page (off to the right)
var defButtonDiv = "";
if ( document.getElementById) { defButtonDiv = document.getElementById("def_button_div"); }
else if ( document.all ) { defButtonDiv = document.all["def_button_div"]; }
else if ( document.layers ) { defButtonDiv = document.layers["def_button_div"]; }
if ( defButtonDiv ) {
    defButtonDiv.innerHTML = defButtonHTML;
    if ( defButtonDiv.style ) {
        defButtonDiv.style.left = ( 0.7 * screen.availWidth ) + "px";
	defButtonDiv.style.bottom = ( 0.45 * hMargin ) + "px";
	defButtonDiv.style.visibility = "visible";
    }
    else {
        defButtonDiv.left = ( 0.7 * screen.availWidth );
	defButtonDiv.bottom = ( 0.45 * hMargin);
	defButtonDiv.visibility = "visible";
    }
}
var newsgroupDiv = "";
if ( document.getElementById) { newsgroupDiv = document.getElementById("newsgroup_div"); }
else if ( document.all ) { newsgroupDiv = document.all["newsgroup_div"]; }
else if ( document.layers ) { newsgroupDiv = document.layers["newsgroup_div"]; }
if ( newsgroupDiv ) {
    newsgroupDiv.innerHTML = newsgroupHTML;
    if ( newsgroupDiv.style ) {
        newsgroupDiv.style.left = ( 0.7 * screen.availWidth ) + "px";
	newsgroupDiv.style.bottom = ( 0.35 * hMargin ) + "px";
	newsgroupDiv.style.visibility = "visible";
    }
    else {
        newsgroupDiv.left = ( 0.7 * screen.availWidth );
	newsgroupDiv.bottom = ( 0.35 * hMargin);
	newsgroupDiv.visibility = "visible";
    }
}
var endDateDiv = "";
if ( document.getElementById) { endDateDiv = document.getElementById("end_date_div"); }
else if ( document.all ) { endDateDiv = document.all["end_date_div"]; }
else if ( document.layers ) { endDateDiv = document.layers["end_date_div"]; }
if ( endDateDiv ) {
    endDateDiv.innerHTML = endDateHTML;
    if ( endDateDiv.style ) {
        endDateDiv.style.left = ( 0.7 * screen.availWidth ) + "px";
	endDateDiv.style.bottom = ( 0.25 * hMargin ) + "px";
	endDateDiv.style.visibility = "visible";
    }
    else {
        endDateDiv.left = ( 0.7 * screen.availWidth );
	endDateDiv.bottom = ( 0.25 * hMargin);
	endDateDiv.visibility = "visible";
    }
}

// Place the rewind and forward buttons under the circle (centered, one to right one to left of center)
var rewindButtonDiv = "";
if ( document.getElementById) { rewindButtonDiv = document.getElementById("rewind_button_div"); }
else if ( document.all ) { rewindButtonDiv = document.all["rewind_button_div"]; }
else if ( document.layers ) { rewindButtonDiv = document.layers["rewind_button_div"]; }
if ( rewindButtonDiv ) {
    rewindButtonDiv.innerHTML = rewindButtonHTML;
    if ( rewindButtonDiv.style ) {
        rewindButtonDiv.style.left = ( 0.4 * screen.availWidth ) + "px";
	rewindButtonDiv.style.bottom = ( 0.25 * hMargin ) + "px";
	rewindButtonDiv.style.visibility = "visible";
    }
    else {
        rewindButtonDiv.left = ( 0.4 * screen.availWidth );
	rewindButtonDiv.bottom = ( 0.25 * hMargin);
	rewindButtonDiv.visibility = "visible";
    }
}
var forwardButtonDiv = "";
if ( document.getElementById) { forwardButtonDiv = document.getElementById("forward_button_div"); }
else if ( document.all ) { forwardButtonDiv = document.all["forward_button_div"]; }
else if ( document.layers ) { forwardButtonDiv = document.layers["forward_button_div"]; }
if ( forwardButtonDiv ) {
    forwardButtonDiv.innerHTML = forwardButtonHTML;
    if ( forwardButtonDiv.style ) {
        forwardButtonDiv.style.left = ( 0.6 * screen.availWidth ) + "px";
	forwardButtonDiv.style.bottom = ( 0.25 * hMargin ) + "px";
	forwardButtonDiv.style.visibility = "visible";
    }
    else {
        forwardButtonDiv.left = ( 0.6 * screen.availWidth );
	forwardButtonDiv.bottom = ( 0.25 * hMargin);
	forwardButtonDiv.visibility = "visible";
    }
}

// Place [help] and [post] buttons centered and beneath the circle of participants
var postButtonDiv = "";
if ( document.getElementById) { postButtonDiv = document.getElementById("post_button_div"); }
else if ( document.all ) { postButtonDiv = document.all["post_button_div"]; }
else if ( document.layers ) { postButtonDiv = document.layers["post_button_div"]; }
if ( postButtonDiv ) {
    postButtonDiv.innerHTML = postButtonHTML;
    if ( postButtonDiv.style ) {
        postButtonDiv.style.left = ( 0.5 * screen.availWidth ) + "px";
	postButtonDiv.style.bottom = ( 0.30 * hMargin ) + "px";
	postButtonDiv.style.visibility = "visible";
    }
    else {
        postButtonDiv.left = ( 0.5 * screen.availWidth );
	postButtonDiv.bottom = ( 0.20 * hMargin);
	postButtonDiv.visibility = "visible";
    }
}
var helpButtonDiv = "";
if ( document.getElementById) { helpButtonDiv = document.getElementById("help_button_div"); }
else if ( document.all ) { helpButtonDiv = document.all["help_button_div"]; }
else if ( document.layers ) { helpButtonDiv = document.layers["help_button_div"]; }
if ( helpButtonDiv ) {
    helpButtonDiv.innerHTML = helpButtonHTML;
    if ( helpButtonDiv.style ) {
        helpButtonDiv.style.left = ( 0.5 * screen.availWidth ) + "px";
	helpButtonDiv.style.bottom = ( 0.05 * hMargin ) + "px";
	helpButtonDiv.style.visibility = "visible";
    }
    else {
        helpButtonDiv.left = ( 0.5 * screen.availWidth );
	helpButtonDiv.bottom = ( 0.05 * hMargin);
	helpButtonDiv.visibility = "visible";
    }
}


var frameNum = 0;
var haveMovedPlayers = 0;
var haveMovedThemes = 0;
var stopAnimation = 0;
var intervalId = setInterval("nextFrame()", interval);

</SCRIPT>
</BODY>
</HTML>