help please!!!

[onestopplay]

Hey!!
Please help me!!!
I found this script and am using it for users to chat on my site:
http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/
It works and I have made it so that it fits in this "Facebook-style" bar that I made. I found the script for that bar here:
http://www.dynamicdrive.com/forums/showthread.php?t=31628
It works fine and I've made it my own.
You can see what I've made here:
http://onestopplay.com/bottombar/test.php
Click on Someone to try the chat.
Now...for the big question.
How do I make it so that when I click "My Mail", It pops up just like the chat box did??

THANK YOU SO MUCH TO ANYONE WHO HELPS ME OUT WITH THIS!!!!! :)

[JShor]

(snip)

<script type="text/javascript">
function showMail() {
var mail = document.getElementById('mail');
var mbx = document.getElementById('mbx');
var height = 200; // mail box height in pixels, must be edit
var width = 100; // mail box vet pixels, must be edited

var top = (height - mail.y); // minus since the box is going up
var left = (width - mail.x);

mbx.style.height = height;
mbx.style.width = width;
mbx.style = "position: absolute; left: " + left + " top: " + top + "; overflow: scroll; display: visible";
}

function hideMail() {
var mbx = document.getElementById('mbx');
mbx.style.display = "none";
}
</script>

<div id="mbx" style="display: none">
<b>My Mail</b>
<span align="right"><a href="javascript:hideMail()">X</a></span>
Here, you put the contents of the mail inbox.
</div>

<div id="bottom">
<table border='0' width='100%'>
<tr>
<td valign='top' height='100%' width='25'>
<img src='mail.png' width='25' height='25'></td>
<td valign='center' width='70'>
<font face='Lucida Sans'>
<a href="javascript:mail()" id="mail">My Mail</a>
</font>
</td>
<td style='border-left:1;' valign='center'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</td>
</tr>
</table>
</div>
</body>
</html>