function
popupPic (url, title)
{
    if (!document.getElementById ("lade_bild")) {
        /* Um dem Besucher auf mögliche Wartezeit vorzubereiten, wird auf einer
         * neuen Ebene (div) eine Statusmeldung eingeblendet: */
        var picdiv2  = document.createElement ("div");   /* create new div   */
        var picid   = document.createAttribute ("id");  /* create id for    */
        picid.nodeValue = "lade_bild";                  /* the div elem.    */
        picdiv2.setAttributeNode (picid);                /* append id to div */
        var padding = Math.round (screenh / 2) - 100;
        picdiv2.innerHTML  = "<img src='images/kraenze/laden.png' alt='' " +
                             "style='margin-top:"                          +
                             padding + "px;' />";
        picdiv2.style.top  = screeny + "px";
        picdiv2.style.left = 0       + "px";

        /* Append picture div to body: */
        var docbody = document.body;
        docbody.appendChild (picdiv2);
    }

    /* Bevor das Bild ausgetauscht werden kann, muss es erst geladen werden, was
     * mittels dem Image Objekt passiert: */
    // Initialise the image:
    var picture = new Image();

    // Load the image by adding an onload handler:
    picture.onload = function() {
        // After the image has been loaded, calculate the height and width of
        // the popup:
        var width   = picture.width;
        var height  = picture.height;

        // Calculate the screen coordinates where the window should open:
        x = (screen.availWidth - width) / 2;
        y = screeny + Math.round ((screenh - height) / 2);

        /* Create picture div/canvas: */
        var picdiv  = document.createElement ("div");   /* create new div   */
        var picid   = document.createAttribute ("id");  /* create id for    */
        picid.nodeValue = "picture";                    /* the div elem.    */
        picdiv.setAttributeNode (picid);                /* append id to div */
        picdiv.innerHTML = 
                "<a href=\"javascript:rem_picture();\">"
            +   "<img src=\"" + url + "\" alt=\"\" border=\"0\" />"
            +   "</a>"
        picdiv.style.top  = y + "px";
        picdiv.style.left = x + "px";

        /* Append picture div to body: */
        var docbody = document.body;
        docbody.appendChild (picdiv);

        /* Statusmeldung ausblenden: */
        docbody.removeChild (picdiv2);
    }

    // The picture source has to be set AFTER the definition of the onload
    // function so the user can click multiple times on the same image to pop it
    // up:
    picture.src = url;
}



/* If an html element with the id "picture" is present, it get's removed. */
function
rem_picture ()
{
    if (document.getElementById ("picture")) {  /* picture-div present? */
        var picdiv = document.getElementById ("picture");
        document.body.removeChild (picdiv);
    }
}



function 
update_mcoords (mevent) {
    if (!mevent) {
        mevent = window.event;
    }

    /* Well, two possibilities of where the mouse coordinates relative to the
     * whole document get stored. Either pageX/pageY or offsetX/offsetY: */
    if (!mevent.offsetY) {
        mousey  = mevent.pageY;
        screeny = window.pageYOffset;
    }
    else {
        mousey = mevent.clientY;
        /* Since clientY holds the y-pos relative to the screen and not relative
         * to the document, the number of pixels already scrolled down has to be
         * added: */
        screeny = document.documentElement.scrollTop
        mousey += screeny;
    }

    /* Update screen settings (width & height): */
    screenw = (window.innerWidth)  
             ? window.innerWidth  : document.documentElement.clientWidth;
    screenh = (window.innerHeight) 
             ? window.innerHeight : document.documentElement.clientHeight;
}

var mousey, screeny  = 0;
var screenw, screenh = 0;
document.onmousedown = update_mcoords;