// Browser safe opacity handling function

function setOpacity( value ) {
 document.getElementById("styled_popup").style.opacity = value / 10;
 document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ )
   setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}

function fadeOutMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ ) {
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
 }

 setTimeout('closeMyPopup()', 800 );
}

function closeMyPopup() {
 document.getElementById("styled_popup").style.display = "none"
}

function fireMyPopup(reg) {
 setOpacity( 0 );
 document.getElementById("styled_popup").style.display = "block";
 fadeInMyPopup();
}
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 50px; left: 50px; zoom: 1'>
<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:fadeOutMyPopup();'><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;'>
Hey, look at me!<br>
<script>document.write(reg);</script>
I'm fading :-)
</td></tr>
</table>
</div>