css or dhtml issue z-index?

[Goshawk]

Hi,

I came across this dhtml script that does exactly what I need . It creates a simple popup window to display my larger graphics.
Can be seen here: http://www.inekesfashions.com.au/sho...&products_id=2
My pop up window does display as needed, but it disapears partly behind my logo.

I have tried to set the z-index of my background to -2, the z-index of my logo to -1, and the z-index of my new window to 1, but that does not seem to make any difference in FF, and in IE, it results in only part of the image being displayed on top.

Here is the cool code that I have placed in a new php file (jscript_loadwindow.php) in my jscript directory, as part of my template.

<?php
/*
//DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com)
//For full source code, documentation, and terms of usage,
//Visit http://www.dynamicdrive.com/dynamicindex9/dhtmlwindow.htm
*/
?>
<script>

var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

function iecompattest(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"
}
}

function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.display="none" //extra
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)

dragapproved=true
document.getElementById("dwindow").onmousemove=drag_drop
}

function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left="30px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
document.getElementById("cframe").src=url
}
}

function maximize(){
if (minrestore==0){
minrestore=1 //maximize window
document.getElementById("maxname").setAttribute("src","restore.gif")
document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
}
else{
minrestore=0 //restore window
document.getElementById("maxname").setAttribute("src","max.gif")
document.getElementById("dwindow").style.width=initialwidth
document.getElementById("dwindow").style.height=initialheight
}
document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"
}

function closeit(){
document.getElementById("dwindow").style.display="none"
}

function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=null;
document.getElementById("dwindowcontent").style.display="" //extra
}

</script>

The code below belongs inside my html file, and have placed it in the footer.php (as when I do place it in my html, my page does not display in my 'Product in Category' html editor - likely due to the iframe, and therefore will not let me update the code)

<?php
<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
<div align="right" style="background-color:navy"><img src="max.gif" id="maxname" onClick="maximize()"><img src="close.gif" onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">
<iframe id="cframe" src="" width=100% height=100%></iframe>
</div>
</div>
?>

This code than calls for the window to pop up in my html page:

<a href="javascript:loadwindow('http://www.inekesfashions.com.au/shop/images/large/inekesfashions/IF1039RD_Front_LRG.jpg',560,700)">
<img src="http://www.inekesfashions.com.au/shop/images/medium/inekesfashions/IF1039RD_01.jpg" width="141" height="249" alt="Red Ball Gown With Roses And Sequin - Front" border="0"></a>

Does anyone have any idea how to fix this?
I have also tried to set the window position by making changes to the style tag in my footer, and setting the left and top attributes.
This does not seem to make any difference.

Kind regards,

Goshawk