

function ShowFrameBox(popUpTitle, url) {

    if (document.body.clientHeight > 200 && document.body.clientWidth > 200) {

        window.scrollTo(0, 0);
        document.body.scroll = "no";
        document.body.style.overflow = 'hidden';

        //Versuchen typ zu ermitteln

        var types = new Array(".jpg", ".jpeg", ".png", ".htm", ".html", ".php", ".jsp", ".pdf", ".xbap", ".xml");

        var detectedType;

        var lastDetectedIndex = 0;

        for (var i = 0; i != types.length; i++) {

            if (url.toLowerCase().indexOf(types[i].toString()) > 0) {

                lastDetectedIndex = url.toLowerCase().indexOf(types[i]);

                detectedType = types[i];
            }
        }

        var breakOutBackground = document.createElement("DIV");

        var loadingImage = document.createElement("IMG");

        var contentBorder = document.createElement("DIV");

        var titleArea = document.createElement("DIV");

        var close = document.createElement("IMG");

        var neuesFenster = document.createElement("IMG");

        breakOutBackground.style.position = "absolute";

        breakOutBackground.style.top = "0px";

        breakOutBackground.style.left = "0px";

        breakOutBackground.style.width = "100%";

        breakOutBackground.style.height = "100%";

        breakOutBackground.style.backgroundImage = "url(ressources/graphics/backgrounds/opacity50.png)";

        breakOutBackground.style.backgroundRepeat = "repeat";

        document.body.appendChild(breakOutBackground);

        //contentBorder
        contentBorder.className = "popup"

        contentBorder.style.position = "Absolute";

        contentBorder.style.top = "5%";

        contentBorder.style.left = "5%";

        contentBorder.style.textAlign = "center";

        contentBorder.style.minWidth = "100px";

        contentBorder.style.minHeight = "100px";
        
        contentBorder.style.zIndex = 999;

        breakOutBackground.appendChild(contentBorder);
        //Typenbehandlung

        //folgende Variable benutzen, type kann geändert werden, Element zu contentBorder hinzufügen!!!
        var myContent = document.createElement("DIV");

        switch (detectedType) {

            case ".jpg":
            case ".jpeg":
            case ".png":
            case ".gif":

                myContent = document.createElement("IMG");

                myContent.src = url;

                contentBorder.appendChild(myContent);

                myContent.style.minWidth = "100px";

                myContent.style.minHeight = "100px";

                var imageHeight = document.body.clientHeight - 100;

                var r1 = myContent.width / myContent.height;

                var r2 = myContent.height - imageHeight;

                myContent.style.height = imageHeight + "px";

                myContent.style.width = (myContent.width - (r1 * r2)) + "px";

                if (document.body.clientWidth - 50 < (myContent.width)) {

                    myContent.style.width = (document.body.clientWidth - 50) + "px";
                    myContent.style.height = imageHeight + "px";


                }

                break;

            default:

                myContent = document.createElement("IFRAME");

                myContent.style.frameBorder = "0";

                myContent.style.border = "0px solid black";

                myContent.style.minWidth = "100px";

                myContent.border = "0";

                myContent.src = url;

                myContent.style.height = (document.body.clientHeight * 0.9) + "px";

                myContent.style.width = (document.body.clientWidth * 0.9) + "px";

                contentBorder.style.left = (document.body.clientHeight * 0.1) + "px";

                contentBorder.appendChild(myContent);

                break;

        }

        myContent.title = popUpTitle;

        //Title

        titleArea.innerHTML = popUpTitle;

        titleArea.style.position = "absolute";

        titleArea.style.left = "1px";

        titleArea.style.top = "-23px";

        contentBorder.appendChild(titleArea);

        //CloseButton
        close.src = "ressources/graphics/close.png";

        close.style.right = "-25px";

        close.style.top = "-25px";

        close.style.position = "absolute";

        close.style.cursor = "pointer";

        close.title = "Schliessen"

        close.onmouseup = function () {

            if (myContent.src != "undefined") {

                myContent.src = "";

            }

            if (myContent.parentNode != null) {

                contentBorder.removeChild(myContent);

            }

            document.body.removeChild(breakOutBackground);
            document.body.scroll = "yes";
            document.body.style.overflow = 'scroll';


        };
        close.onmouseover = function () {
            close.src = "ressources/graphics/CloseOver.png";
        };
        close.onmouseout = function () {
            close.src = "ressources/graphics/Close.png";
        };

        contentBorder.appendChild(close);

        //Neues Fenster

        neuesFenster.src = "ressources/graphics/NeuesFenster.png";

        neuesFenster.style.right = "-25px";

        neuesFenster.style.top = "7px";

        neuesFenster.width = 30;

        neuesFenster.height = 30;

        neuesFenster.title = "In neuem Fenster öffnen"

        neuesFenster.style.position = "absolute";

        neuesFenster.style.cursor = "pointer";

        neuesFenster.onmouseup = function () {

            if (myContent.src != "undefined") {

                var newWin = window.open(myContent.src, 'popup', 'toolbar=no,resizable=yes,scrollbars=yes');

                try {
                    newWin.document.title = "www.opel-hindriks.de - " + popUpTitle;
                }
                catch (e) {

                }

                document.body.removeChild(breakOutBackground);
                document.body.scroll = "yes";
                document.body.style.overflow = 'scroll';

            }

            try {
                if (myContent.parentNode != null) {
                    contentBorder.removeChild(myContent);
                }
                document.body.removeChild(breakOutBackground);
            }
            catch (e) {
            }


        };
        neuesFenster.onmouseover = function () {
            neuesFenster.src = "ressources/graphics/NeuesFensterOver.png";
        };
        neuesFenster.onmouseout = function () {
            neuesFenster.src = "ressources/graphics/NeuesFenster.png";
        };

        contentBorder.appendChild(neuesFenster);

        //Resize

        window.onresize = function () {
            //Schliesse BreakOut-Fenster
            if (breakOutBackground.parentElement != null) {
                document.body.removeChild(breakOutBackground);

                ShowFrameBox(popUpTitle, url);
            }
        }

        myContent.onload = function () {

            //document.body.removeChild(breakOutBackground);

            //ShowFrameBox(popUpTitle, url);

        }
    }
    else {
        document.body.scroll = "";
        document.body.style.overflow = "";
    }
}

