Problem with moving layer(javascript)

Hi,

I have a problem with javascript in moving layer.The basic requirement is to create a moving layer,but the layer should be 100% visible on screen it will not hide when you move layer with mouse.Here I am attaching the file.

If change the code in dd(e) function the layer is moving well,but it is moving out the screen.


function dd(e){
if (!ddEnabled) return;
whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;

return false;
}


If I replace the function dd(e) the layer is moving completly(100% you can't hide the layer even 5 or 10% also) on the screen, but it is not moving properly.

function dd(e){
if (!ddEnabled) return;

var Xposition = isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
if(Xposition >= 0 && (Xposition+whichDog.offsetWidth) < document.body.clientWidth)
whichDog.style.left= Xposition;
var Yposition = isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
if(Yposition >= 0 && (Yposition+whichDog.offsetHeight) < document.body.clientHeight)
whichDog.style.top= Yposition;
if((Xposition)==0 && (Yposition) == 0){
whichDog.style.left = 1;
whichDog.style.top = 1;
}
return false;
}

Here is the complete code

<script language="JavaScript1.2">

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
topDog=isIE ? "BODY" : "HTML";
whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");
hotDog=isIE ? event.srcElement : e.target;
while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
}
if (hotDog.id=="titleBar"){
offsetx=isIE ? event.clientX : e.clientX;
offsety=isIE ? event.clientY : e.clientY;
nowX=parseInt(whichDog.style.left);
nowY=parseInt(whichDog.style.top);
ddEnabled=true;
document.onmousemove=dd;
}
}

function dd(e){
if (!ddEnabled) return;
/* whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
*/
var Xposition = isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
if(Xposition >= 0 && (Xposition+whichDog.offsetWidth) < document.body.clientWidth)
whichDog.style.left= Xposition;
var Yposition = isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
if(Yposition >= 0 && (Yposition+whichDog.offsetHeight) < document.body.clientHeight)
whichDog.style.top= Yposition;
if((Xposition)==0 && (Yposition) == 0){
whichDog.style.left = 1;
whichDog.style.top = 1;
}
return false;
}

function ddN4(whatDog){
if (!isN4) return;
N4=eval(whatDog);
N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
N4.onmousedown=function(e){
N4.captureEvents(Event.MOUSEMOVE);
N4x=e.x;
N4y=e.y;
}
N4.onmousemove=function(e){
if (isHot){
N4.moveBy(e.x-N4x,e.y-N4y);
return false;
}
}
N4.onmouseup=function(){
N4.releaseEvents(Event.MOUSEMOVE);
}
}

function hideMe(){
if (isIE||isNN) whichDog.style.visibility="hidden";
else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
if (isIE||isNN) whichDog.style.visibility="visible";
else if (isN4) document.theLayer.visibility="show";
}



document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

</script>





<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:absolute;width:250px;left:100;top:100;visibility:visible">
<table border="0" width="400" bgcolor="#424242" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
<tr>
<td id="titleBar" style="cursor:move" width="100%">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
<font face="Arial" color="white">Layer Title</font>
</layer>
</ilayer>
</td>
<td style="cursor:hand" valign="top">
<a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial style="text-decoration:none">X</font></a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFCC" style="padding:4px" colspan="2">
<font face="Arial" color="GREEN">
<!-- PLACE YOUR CONTENT HERE //-->
This is where your content goes.<br>
It can be any html code or text.<br>
Remember to feed the reindeer.<br>
Avoid chewable giblet curtains.
<!-- END OF CONTENT AREA //--></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //-->
<a href="javascript:showMe();">show</a>

To hide the layer:

<a href="javascript:hideMe();">hide</a>


Please let me know the solution for this.