var maria_mediaOverlay_overlayData = {};
var maria_mediaOverlay_closeString = "schließen";

function maria_mediaOverlay_closeOverlay (onclose) {
    onclose();
    removeElement("maria_mediaOverlay_container");
}


function maria_mediaOverlay_startOverlay (contentId,contType,onclose) {

    if (typeof(onclose) !== "function") {
        onclose = noop;
    }

    var myContent = maria_mediaOverlay_overlayData[contentId].content;
    var content;

    if (contType == "img") {

        var innerWindowWidth;
        var innerWindowHeight;

        if (typeof(window.innerWidth) == "number") {
            //normal browsers
            innerWindowWidth = window.innerWidth;
            innerWindowHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth ||    document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            innerWindowWidth = document.documentElement.clientWidth;
            innerWindowHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            innerWindowWidth = document.body.clientWidth;
            innerWindowHeight = document.body.clientHeight;
        }

        var screenWidth = Math.round(innerWindowWidth*0.9);
        var screenHeight = Math.round(innerWindowHeight*0.9);


        var thisWidth = myContent.width;
        var thisHeight = myContent.height;
        var ratioHeight = thisHeight/thisWidth;
        var ratioWidth = thisWidth/thisHeight;
        if (thisWidth>screenWidth){
            var diff = thisWidth-screenWidth;
            thisWidth = screenWidth;
            thisHeight = thisHeight-Math.round(ratioHeight*diff);
        }
        if (thisHeight>screenHeight){
            var diff = thisHeight-screenHeight;
            thisHeight = screenHeight;
            thisWidth = thisWidth-Math.round(ratioWidth*diff);
        }
        content = IMG({"src":myContent.url});
    } else if  (contType == "generic") {
        var thisWidth = myContent.width;
        var thisHeight = myContent.height;
        content = DIV({});
        content.innerHTML = myContent.html;
    }

    setStyle(content,{
        "width":thisWidth+"px",
        "height":thisHeight+"px"
    });


    var closeButton = A({"href":"#","id":"maria_mediaOverlay_closeButton"},maria_mediaOverlay_closeString);
    setStyle(closeButton,{
        "position":"absolute",
        "bottom":"-25px",
        "right":"0px",
        "color":"#000000",
        "text-decoration":"underline"
    });

    var overlayWindow = DIV({"id":"maria_mediaOverlay_overlayWindow"},content,closeButton);
    setStyle(overlayWindow,{
        "position":"absolute",
        "width":thisWidth+"px",
        "height":thisHeight+"px",
        "background-color":"#ffffff",
        "border-style":"solid",
        "border-width":"8px",
        "border-color":"#999999",
        "padding":"0px"
    });

    if (navigator.appVersion.indexOf("MSIE") !== -1) {
        setStyle(overlayWindow,{
            "top":"50%",
            "left":"50%",
            "margin":"auto",
            "margin-left":(0-Math.round(thisWidth/2))+"px",
            "margin-top":(0-Math.round(thisHeight/2))+"px"
        });
    } else {
        setStyle(overlayWindow,{
            "top":"0px",
            "left":"0px",
            "right":"0px",
            "bottom":"0px",
            "margin":"auto"
        });
    }


    var overlayContainer = DIV({"id":"maria_mediaOverlay_container"},overlayWindow);
    setStyle(overlayContainer,{
        "position":"fixed",
        "width":"100%",
        "height":"100%",
        "top":"0px",
        "left":"0px",
        "right":"0px",
        "bottom":"0px",
        "background-image":"url(wp-content/plugins/maria_mediaOverlay/images/t_pix.png)"
    });


    appendChildNodes(document.body,overlayContainer);

    connect("maria_mediaOverlay_closeButton","onclick",partial(maria_mediaOverlay_closeOverlay,onclose));
    connect(document,"onkeyup",partial(function (onclose,e) {
        if (e.key().string == "KEY_ESCAPE") {
            maria_mediaOverlay_closeOverlay (onclose);
        }
    },onclose));
}