[SOLVED] HTML Inserts and overlay image problem - launching wrong page

Hi there.
I am in the process of building a site for my music podcasts.
I am using a button in my header area to launch a pop up window that features my MP3 player.
The system is that people can press play – and if they want, can click away from my website to go elsewhere (while my podcast keeps playing in the popup).
Due to the nature of my podcast downloading will not be allowed - streaming only.

Now to my problem.
The button I have created to launch the pop up window works fine when I am looking at the home page. But if I click to another page on my site, the pop up button launches a new window that features the URL of the page I am looking at.

For example.
The popup button in the header on my front page launches the URL:
http://mysite/listen-live.html

But if I am looking at my 'dedicate a song page' I click the same button but get a pop up that shows the URL
http://mysite/dedicate-a-song/listen-live.html [this is wrong]

In the Atahualpa admin section - HTML Inserts, I have placed the code:

<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=300,height=200,scrollbars=no resize=no');
return false;
}
//-->
</SCRIPT>


In the CSS Inserts field I have placed:
#header_image_sociable {position: absolute; left: 430px; top: 25px;}

And in the Overlay image field I have placed the code:
<div id="header_image_sociable"><a onclick="return popup(this, 'notes')" href="listen-live.html"><img src="/wp-content/my-images/Listen-Now-button.png" width="170" height="52" BORDER="0"></a></div>


Can anyone help me so that no matter what page or category a person may be looking at, that when they click the Play Button in the header area, the only page that will be launched is: http://mysite/listen-live.html

Many thanks for your time.

Sincerely.