I have 2 issues and one bug

[Kiyomori]

The first issue I have is coming up with a javascript function that will play a midi from the site if it can't find a certain mp3 on the viewer's computer. The mp3 it would look for is "C:\Program Files\Gravity\RagnarokOnline\BGM\01.mp3".

Next issue is, I have movable, floating layer that I want to appear centered on the screen. This is the major coding for it.

<DIV ID="lyrServer"
STYLE="POSITION:absolute;
LEFT:100;
TOP:100;
BACKGROUND-IMAGE:URL(lyr_Server_Background.gif);
HEIGHT:120;
WIDTH:280;
VISIBILITY:hide;
VISIBILITY:hidden">

<TABLE ID ="titleBar" BORDER="0" HEIGHT="16" WIDTH="280">
<TR>
<TD WIDTH="100%">
<iLAYER WIDTH="100%" onSelectStart="return false">
<LAYER WIDTH="100%"
onMouseOver="isHot = true; if (isN4) ddN4(lyrServer)"
onMouseOut="isHot = false">
</LAYER>
</iLAYER>
</TD>
</TR>
</TABLE>
(There more coding that goes here but it's no important)
</DIV>

I've tried changing the TOP and LEFT attributes to 50% and the layer did appear somewhat centered (I didn't conpensate for it's size). However, when I tried to move it, it snapped back to 100/100. I know the rest of the coding isn't causing this because, if I use any numbers without the percent sign, it'll appear at that place and move like it's supposed to.

The bug is a dosey! When the site loads, the background track is playing. However, when the user clicks on the title image and the floating layer pops up, the track stops playing and won't start again unless the page is reloaded.

Here's the rest of the coding for the floating layer. Be prepared because it's a LOT! You'll probably notice that my organization is different. This is because I took C++ before learning Javascript.

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

//Action: Allows floating layers to be moved
//Begin procedure
isIE = document.all;
isNN =! document.all && document.getElementById;
isN4 = document.layers;
isHot = false;

function ddInit(e)
{
topDog = isIE ? "BODY" : "HTML";
whichDog = isIE ? document.all.lyrServer : document.getElementById("lyrServer");
hotDog = isIE ? event.srcElement : e.target;
while (hotDog.id != "titleBar" && hotDog.tagName != topDog)
{
hotDog = isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id == "titleBar")
{
offsetx = isIE ? event.clientX : e.clientX;
offsety = isIE ? event.clientY : e.clientY;
nowX = parseInt(whichDog.style.left);
nowY = parseInt(whichDog.style.top);
ddEnabled = true;
document.onmousemove = dd;
}
}

function dd(e)
{
if (!ddEnabled) return;
whichDog.style.left = isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top = isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
return false;
}

function ddN4(whatDog)
{
if (!isN4) return;
N4 = eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown = function(e)
{
N4.captureEvents(Event.MOUSEMOVE);
N4x = e.x;
N4y = e.y;
}

N4.onmousemove = function(e)
{
if (isHot)
{
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}

N4.onmouseup = function()
{
N4.releaseEvents(Event.MOUSEMOVE);
}
}

function hideMe()
// Action: Hides the "Server Selection" layer
// Call: btnServerExit on lyrServer

{
if (isIE || isNN)
{
whichDog.style.visibility = "hidden";
// btnServerPrev.style.visibility = "hidden";
btnServerOk.style.visibility = "hidden";
btnServerExit.style.visibility = "hidden";
}
else if (isN4)
{
document.lyrServer.visibility = "hide";
// btnServerPrev.style.visibility = "hide";
btnServerOk.style.visibility = "hide";
btnServerExit.style.visibility = "hide";
}
}

// Action: Shows the "Server Selection" layer
//Call: Clicking on "Index_Title_Big.gif"
function showMe()
{
if (isIE || isNN)
{
whichDog.style.visibility = "visible";
// btnServerPrev.style.visibility = "visible";
btnServerOk.style.visibility = "visible";
btnServerExit.style.visibility = "visible";
}
else if (isN4)
{
document.lyrServer.visibility = "show";
// btnServerPrev.style.visibility = "show";
btnServerOk.style.visibility = "show";
btnServerExit.style.visibility = "show";
}
}
</SCRIPT>

Here's the title image HTML

<A HREF="javascript:showMe();">
<BR><IMG SRC="Index_Title_Big.gif" NAME="Title"
WIDTH="728"
HEIGHT="434"
BORDER="0">
</A>

If you can figure out the answer to this problem, I'll gladly add a creditline for you in the source code!

[Kiyomori]

Thanks. It's not centered but it's better than what I had before and now I got something I can tinker with. I appreciate it.