Applying Slide Effects to DHTML Popups

<script type='text/javascript'>
var stop = 0;
var padding = 30;
var X = 0;
var Y = 100;

function slideMyPopup() {
 X--;
 if( X < stop ) return;
 document.getElementById("styled_popup").style.left = X + "px";
 setTimeout("slideMyPopup()", 25);
}

function fireMyPopup() {
 var scrolledX;
 if( self.pageYOffset ) {
   scrolledX = self.pageXOffset;
 } else if( document.documentElement && document.documentElement.scrollTop ) {
   scrolledX = document.documentElement.scrollLeft;
 } else if( document.body ) {
   scrolledX = document.body.scrollLeft;
 }

 var centerX;
 if( self.innerHeight ) {
   centerX = self.innerWidth;
 } else if( document.documentElement && document.documentElement.clientHeight ) {
   centerX = document.documentElement.clientWidth;
 } else if( document.body ) {
   centerX = document.body.clientWidth;
 }

 // Don't forget to subtract popup's width! ( 380 in our case )

 stop = scrolledX + centerX - 380 - padding;
 X = scrolledX + centerX;

 document.getElementById("styled_popup").style.top = Y + "px";
 document.getElementById("styled_popup").style.display = "block";
 slideMyPopup();
}

function styledPopupClose() {
 document.getElementById("styled_popup").style.display = "none";
 Y = bottom; // if it was closed, make sure extra computations are done in dropMyPopup()
}
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; z-index: 100'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='media/x11_title.gif'></td>
<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='media/x11_close.gif'
border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("media/x11_body.gif") no-repeat top left; width: 380px; height: 277px'>
I'm sliding in!
</td></tr>
</table>
</div>

<input type='submit' onClick='fireMyPopup()' value=' Fire! '>