<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Simulateur ActiPAGE</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            body{
                text-align: center;background: #003754; padding: 0; margin: 0;
                font-family: sans-serif;
                color: white;
                font-size: 0.9em
            }
            .header{
                padding:15px;
                background:#001723;
                margin-bottom: 20px
            }
            iframe{
                border: none;
                -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
                -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
                box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);
            }
        </style>
    </head>

    <body>
        <div>
            <div class="header">
                Sélectionner un appareil : 
                <select id="listDevices">

                </select>
            </div>
            <iframe id="previewDevice" src=""></iframe>
        </div>


    <script>
        (function() {
            var select = document.getElementById("listDevices");
            var iframe = document.getElementById("previewDevice");

            function $_GET(param) {
                var vars = {};
                window.location.href.replace( location.hash, '' ).replace(
                    /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
                    function( m, key, value ) { // callback
                        vars[key] = value !== undefined ? value : '';
                    }
                );

                if ( param ) {
                    return vars[param] ? vars[param] : null;
                }
                return vars;
            }

            var url = decodeURIComponent($_GET('data'));

            iframe.setAttribute("src", url);

            var arrayDevice = [
                {"id": 1, "name": "Ipad Portrait", "size":[768, 1024]},
                {"id": 2, "name": "Ipad Paysage", "size":[1024, 768]},
                {"id": 3, "name": "Galaxy S5", "size":[360, 640]},
                {"id": 4, "name": "Pixel 2", "size":[411, 731]},
                {"id": 5, "name": "iPhone 4", "size":[320, 480]},
                {"id": 6, "name": "iPhone X", "size":[375, 812]}
            ];

            for(var i = 0; i<arrayDevice.length; i++){
                var selected = false;
                if(i === 0)
                    selected = true;
                var option = document.createElement("option");
                option.text = arrayDevice[i].name;
                option.value = arrayDevice[i].id;
                option.selected = selected;

                select.appendChild(option)
            }

            getIframeSize();

            select.addEventListener("change", getIframeSize);
            function getIframeSize(){
                var optionSelected = select.value;
                if(optionSelected == 0)
                    return;
                var elementInArray = arrayDevice.find(function(element){
                    return element.id == optionSelected
                });

                setIframeSize(elementInArray)

            }

            function setIframeSize(elementToSet){
                var size = elementToSet.size;
                iframe.style.width = size[0];
                iframe.style.height = size[1];
            }
        })();

    </script>
    </body>
</html>
