var drag=0;
var offsetx;
var offsety;
document.onmousemove=dragdiv;
document.onmousedown=toggledrag;
document.onmouseup=toggledrag;
 
function showdiv()
{
    document.getElementById('popup').style.visibility="visible";
}
function hidediv()
{
    document.getElementById('popup').style.visibility="hidden";
    drag=0;
}
function toggledrag(e)
{
    if (drag==1)
        {
            drag=0;
        }
    else if (document.getElementById('popup').style.visibility=="visible")
        {
            posx=document.getElementById('popup').offsetLeft;
            posy=document.getElementById('popup').offsetTop;
            divwidth=document.getElementById('popup').offsetWidth;
            divheight=document.getElementById('popup').offsetHeight;
            if (document.all)
                {
                    offsetx=window.event.x;
                    offsety=window.event.y;
                }
            else
                {
                    offsetx=e.pageX;
                    offsety=e.pageY;
                }
            if ((offsetx>=posx) && (offsetx<=posx+divwidth) && (offsety>=posy) && (offsety<=posy+divheight))
                {
                    offsetx-=posx;
                    offsety-=posy;
                    drag=1;
                }
        }
}
function dragdiv(e)
{
    if (drag==1)
        {
            if (document.all)
                {
                    mousex=window.event.x;
                    mousey=window.event.y;
                }
            else
                {
                    mousex=e.pageX;
                    mousey=e.pageY;
                }
            mousex-=offsetx;
            mousey-=offsety;
            document.getElementById('popup').style.top=mousey+"px";
            document.getElementById('popup').style.left=mousex+"px";
        }
}

function hidediv2()
{
    document.getElementById('popup2').style.visibility="hidden";
    drag=0;
}