var popupActief = false;

function ToonGecentreerdeDiv(breedte, hoogte, divid) {
    var scrolledX, scrolledY;
    if (self.pageYOffset) {
        scrolledX = self.pageXOffset;
        scrolledY = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
        scrolledX = document.documentElement.scrollLeft;
        scrolledY = document.documentElement.scrollTop;
    } else if (document.body) {
        scrolledX = document.body.scrollLeft;
        scrolledY = document.body.scrollTop;
    }

    var centerX, centerY;
    if (self.innerHeight) {
        centerX = self.innerWidth;
        centerY = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        centerX = document.documentElement.clientWidth;
        centerY = document.documentElement.clientHeight;
    } else if (document.body) {
        centerX = document.body.clientWidth;
        centerY = document.body.clientHeight;
    }

    var leftOffset = scrolledX + (centerX - breedte) / 2;
    var topOffset = scrolledY + (centerY - hoogte) / 2;
    var o = document.getElementById(divid);
    var r = o.style;
    r.position = 'absolute';
    r.top = topOffset + 'px';
    r.left = leftOffset + 'px';
    r.display = "block";
    r.width = breedte + 'px';
    // r.height = hoogte + 'px';
}

function addEvent(obj, evt, fnc) {
    if (obj.addEventListener)
        obj.addEventListener(evt, fnc, false);
    else if (obj.attachEvent)
        obj.attachEvent('on' + evt, fnc);
    else
        return false;
    return true;
}

function removeEvent(obj, evt, fnc) {
    if (obj.removeEventListener)
        obj.removeEventListener(evt, fnc, false);
    else if (obj.detachEvent)
        obj.detachEvent('on' + evt, fnc);
    else
        return false;
    return true;
}

function appendElement(node, tag, id, htm) {
    var ne = document.createElement(tag);
    if (id) ne.id = id;
    if (htm) ne.innerHTML = htm;
    node.appendChild(ne);
}

function showPopup(divId, breedte, hoogte) {
    greyout(true);
    ToonGecentreerdeDiv( 500, 300, divId);
  //  document.getElementById(p).style.display = 'block';
}

function showPopupMetBreedteEnHoogte(divId, breedte, hoogte) {
    greyout(true);
    ToonGecentreerdeDiv( breedte, hoogte, divId);
    //  document.getElementById(p).style.display = 'block';
}

function InstellenBlokkering() {
    popupActief = true;
}

function OpheffenBlokkering() {
    popupActief = false;
}

function hidePopup(p) {
    if (!popupActief) {
        greyout(false);
    }
    document.getElementById(p).style.display = 'none';
}

function greyout(d, z) {
    var obj = document.getElementById('greyout');

    if (!obj) {
        appendElement(document.body, 'div', 'greyout');
        obj = document.getElementById('greyout');
        obj.style.position = 'absolute';
        obj.style.top = '0px';
        obj.style.left = '0px';
        obj.style.background = '#CCC';
        obj.style.opacity = '.5';
        obj.style.filter = 'alpha(opacity=50)';
    }
    if (d) {
        var ch = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
        var cw = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
        var sh = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
        if (document.body.scrollHeight) sh = Math.max(sh, document.body.scrollHeight)
        var sw = document.documentElement.scrollWidth ? document.documentElement.scrollWidth : document.body.scrollWidth;
        if (document.body.scrollWidth) sh = Math.max(sh, document.body.scrollWidth)
        var wh = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
        if (!z) { z = 50 }
        obj.style.zIndex = z;
        obj.style.height = Math.max(wh, Math.max(sh, ch)) + 'px';
        obj.style.width = Math.max(sw, cw) + 'px';
        obj.style.display = 'block';
        addEvent(window, 'resize', greyoutResize);
    }
    else {
        obj.style.display = 'none';
        removeEvent(window, 'resize', greyoutResize);
    }
}

function greyoutResize() {
    var ch = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
    var cw = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
    var sh = document.documentElement.scrollHeight ? document.documentElement.scrollHeight : document.body.scrollHeight;
    if (document.body.scrollHeight) sh = Math.max(sh, document.body.scrollHeight)
    var sw = document.documentElement.scrollWidth ? document.documentElement.scrollWidth : document.body.scrollWidth;
    if (document.body.scrollWidth) sh = Math.max(sh, document.body.scrollWidth)
    var wh = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
    var obj = document.getElementById('greyout');
    obj.style.height = ch + 'px';
    obj.style.width = cw + 'px';
    obj.style.height = Math.max(wh, Math.max(sh, ch)) + 'px';
    obj.style.width = Math.max(sw, cw) + 'px';
}