function getPositionOfDiv(divId) {
    divElem = document.getElementById(divId);
    //alert('divElem = ' + divElem.style.width);    
}
function getXYpos(elem) {
    if (!elem) {
        return { "x": 0, "y": 0 };
    }
    var xy = { "x": elem.offsetLeft, "y": elem.offsetTop }
    var par = getXYpos(elem.offsetParent);
    for (var key in par) {
        xy[key] += par[key];
    }
    return xy;
}
function toggleDiv(id, flagit, elem, boundaryElement) {
    //get position of img of mouseover
    if (elem != null) {
        posX = getXYpos(elem).x;
        posY = getXYpos(elem).y;
        elemWidth = elem.width;
        elemHeight = elem.height;
    } else {
        //default waarden invullen omdat er geen ref-element is
        elemWidth = 0;
        elemHeight = 0;
        posX = 0;
        posY = 0;
    }

    //show/hide mouseover info
    if (flagit == "1") {
        //bepalen welke positie tooltip moet worden getoond
        //positie tooltip bepalen

        tooltipElem = document.getElementById(id);
        boundaryElem = document.getElementById(boundaryElement);
        //alert(parseInt(boundaryElem.style.width));
        tooltipX = (posX) + (elemWidth);  //- ((parseInt((tooltipElem.style.width)));// + (elemWidth / 2)));  //+ 'px';
        tooltipY = (posY + (elemHeight / 2));  //+ 'px';
        //checken of ze in de boundary vallen
        if (tooltipElem) {
            tooltipHeight = parseInt((tooltipElem.style.height).substring(0, (tooltipElem.style.height).indexOf("px")));
            tooltipWidth = parseInt((tooltipElem.style.width).substring(0, (tooltipElem.style.width).indexOf("px")));
            tooltipMaxX = (tooltipWidth + tooltipX);
            tooltipMaxY = (tooltipHeight + tooltipY);
        }
        //boundary x en y
        if (boundaryElem) {
            boundaryX = getXYpos(boundaryElem).x;
            boundaryY = getXYpos(boundaryElem).y;
            boundaryHeight = parseInt((boundaryElem.style.height).substring(0, (boundaryElem.style.height).indexOf("px")));
            boundaryWidth = parseInt((boundaryElem.style.width).substring(0, (boundaryElem.style.width).indexOf("px")));
            boundaryXMax = boundaryWidth + boundaryX;
            boundaryYMax = boundaryHeight + boundaryY;
        }
        if (tooltipMaxX > boundaryXMax) {
            //dan moet de tooltipX kleiner
            tooltipX = tooltipX - ((tooltipMaxX - boundaryXMax) + 10);
        }
        if (tooltipMaxY > boundaryYMax) {
            tooltipY = tooltipY - ((tooltipMaxY - boundaryYMax) + 10);
        }
        document.getElementById(id).style.left = tooltipX + 'px';
        document.getElementById(id).style.top = tooltipY + 'px';
        //show mouseover info
        document.getElementById(id).style.visibility = "visible";
    } else {
        //hide mouseover info
        document.getElementById(id).style.visibility = "hidden";
        document.getElementById(id).style.left = 0 + 'px';
        document.getElementById(id).style.top = 0 + 'px';

    }
}