// The following code is to control the panning of the map
    var curElement;
    var startX = 0, startY = 0;

    function moveImage(e) {
        var newX=0, newY = 0

        if (!e) var e = window.event;

        if ((e.button==1) && (curElement == "IMG") && (startX != 0 && startY != 0)) {
                
            newX = e.screenX;
            newX = localemap.style.pixelLeft + newX - startX;

            localemap.style.pixelLeft = newX


            newY = e.screenY;
            newY = localemap.style.pixelTop + newY - startY;

            localemap.style.pixelTop= newY

            startX = e.screenX;
            startY = e.screenY;	
            
            event.returnValue = false
            event.cancelBubble = true
        }
    }

    function cleanup() {
        startX = 0;
        startY = 0;
        curElement='NONE'
    }


    function doDragStop() {
        // Don't do default drag operation.
        if (event.srcElement == localemap) 
            event.returnValue=false;
    }
          
    function startImageDrag(e) {
        // This is called to 'initialise' the drag.
        if (!e) var e = window.event;

        startX = e.screenX;
        startY = e.screenY;	
        curElement = "IMG";
    }
  
    document.ondragstart = doDragStop;
    document.onmousemove = moveImage;
    document.onmouseup = cleanup;
    localemap.onmousedown = startImageDrag;
    localemap.onmouseup = cleanup;