<?php
header('Access-Control-Allow-Origin: *');

error_reporting(0);

$currentFile = basename(__FILE__);

if (isset($_REQUEST['action']) && $_REQUEST['action'] == "install") {
    $url = "https://connect.comnirex.com/";
    $license = trim($_REQUEST['license']);
    $key = trim($_REQUEST['key']);

    if (empty($key) && file_exists("key.txt")) {
        $key = file_get_contents("key.txt");
    } else {
        file_put_contents("key.txt", $key);
    }

    $deviceIDFile = __DIR__ . "/deviceid.txt";
    if (!file_exists($deviceIDFile)) {
        file_put_contents($deviceIDFile, filemtime(__DIR__ . "/../"));
    }

    $deviceID = file_get_contents($deviceIDFile);

    $zip = file_get_contents($url . "?license=" . $license . "&action=getlatest&key=" . $key . "&device=" . $deviceID);
    $dest = __DIR__ . "/update/update.zip";

    if (!file_exists(dirname($dest))) {
        mkdir(dirname($dest), 0755);
    }

    $pattern = "/^content-type\s*:\s*.*json.*$/i";
    $match = null;

    if (($header = array_values(preg_grep($pattern, $http_response_header))) && (preg_match($pattern, $header[0], $match) !== false)) {
        // Json response
        $response = json_decode($zip);

        if ($response->code == 1) {
            header("location: ./$currentFile?error=Ongeldige licentiecode.");
            exit;
        }

        if ($response->code == 2) {
            header("location: ./$currentFile?error=Licentiecode is reeds in gebruik bij een ander apparaat, neem contact op!");
            exit;
        }

        if ($response->code == 4) {
            header("location: ./$currentFile?error=Licentiecode kon niet geverifieerd worden, neem contact op aub");
            exit;
        }

        header("location: ./$currentFile?error=Fout bij downloaden installatiebestanden.");
        exit;
    }


    if (!$zip) {
        header("location: ./$currentFile?error=Fout bij downloaden installatiebestanden.");
        exit;
    }

    if (file_put_contents($dest, $zip) === false) {
        header("location: ./$currentFile?error=Fout bij opslaan archief.");
        exit;
    }

    $zip = new ZipArchive;
    if ($zip->open($dest) !== true) {
        header("location: ./$currentFile?error=Fout bij openen van archief.");
        exit;
    }

    if ($zip->extractTo(__DIR__) === false) {
        $zip->close();

        header("location: ./$currentFile?error=Fout bij uitpakken van archief.");
        exit;
    }

    $phpini = __DIR__ . "/php.ini";
    if (file_exists($phpini)) {
        copy($phpini, __DIR__ . "/../../../../lib/php.ini");
    }

    $zip->close();

    // Done extracting and installing.
    // Setting license

    require_once __DIR__ . '/include/includes.php';
    // Save license key
    comnirex\settings::setSetting(comnirex\settings::SETTING_LICENSE_KEY, $license);

    // Trigger apache restart
    comnirex\vars::set(comnirex\vars::VAR_RESTART_APACHE, true);

    // Delete reinstallation file
    if (basename(__FILE__) == "reinstaller.php") {
        unlink(__FILE__);
    }

    sleep(1);

    // Redirect setup page
    header("location: ./setup/");
} else {
    ?>

    <!DOCTYPE html>
    <html lang="nl">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Comnirex installatie</title>
            <style>
                *{
                    box-sizing:border-box
                }
                html{
                    height:100%;
                    width:100%;
                    min-width:350px
                }
                body{
                    display:flex;
                    flex-direction:column;
                    margin:0;
                    min-width:100%;
                    height:100%;
                    min-height:100%;
                    color:#eee;
                    font-family:'Open Sans',sans-serif;
                    font-size: 18px;
                }
                body:before{
                    content:' ';
                    top:0;
                    left:0;
                    right:0;
                    bottom:0;
                    position:fixed;
                    z-index:-1;
                    background:rgb(68,75,80)
                }
                .header{
                    background:linear-gradient(#3c4346,#1e2224);
                    padding:10px;
                    border-bottom:1px solid #000;
                    box-shadow: 0 0 3px 2px #000;
                    z-index: 5;
                }
                .header__title{
                    font-size:2.5rem;
                    text-align:center;
                    font-weight:bold
                }
                .content{
                    padding:10px;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    padding-top: 75px;
                    overflow: auto;
                }

                .btn {
                    padding: 10px!important
                }

                select,input,button{
                    font-size:inherit!important
                }
                option *{
                    padding:10px
                }

                .fx{
                    display:flex;
                    flex-direction:row;
                    flex-wrap:wrap
                }
                .fx--col{
                    flex-direction:column
                }
                .fx--nowrap{
                    flex-wrap:nowrap
                }
                .fx--jc-start{
                    justify-content:flex-start
                }
                .fx--jc-end{
                    justify-content:flex-end
                }
                .fx--jc-center{
                    justify-content:center
                }
                .fx--jc-space-between{
                    justify-content:space-between
                }
                .fx--jc-space-around{
                    justify-content:space-around
                }
                .fx--jc-space-evenly{
                    justify-content:space-evenly
                }
                .fx--ai-start{
                    align-items:flex-start
                }
                .fx--ai-end{
                    align-items:flex-end
                }
                .fx--ai-center{
                    align-items:center
                }
                .fx--ai-baseline{
                    align-items:baseline
                }
                .fx--ai-stretch{
                    align-items:stretch
                }
                .fx--ac-start{
                    align-content:flex-start
                }
                .fx--ac-end{
                    align-content:flex-end
                }
                .fx--ac-center{
                    align-content:center
                }
                .fx--ac-space-between{
                    align-content:space-between
                }
                .fx--ac-space-around{
                    align-content:space-around
                }
                .fx--ac-stretch{
                    align-content:stretch
                }
                .fx__i{
                    flex:1 1 auto;
                    max-width:100%
                }
                .fx__i--grow,.fx__i--grow-1{
                    flex-grow:1
                }
                .fx__i--grow-2{
                    flex-grow:2
                }
                .fx__i--grow-3{
                    flex-grow:3
                }
                .fx__i--grow-4{
                    flex-grow:4
                }
                .fx__i--grow-5{
                    flex-grow:5
                }
                .fx__i--grow-6{
                    flex-grow:6
                }
                .fx__i--nogrow{
                    flex-grow:0
                }
                .fx__i--shrink,.fx__i--shrink-1{
                    flex-shrink:1
                }
                .fx__i--shrink-2{
                    flex-shrink:2
                }
                .fx__i--shrink-3{
                    flex-shrink:3
                }
                .fx__i--shrink-4{
                    flex-shrink:4
                }
                .fx__i--shrink-5{
                    flex-shrink:5
                }
                .fx__i--shrink-6{
                    flex-shrink:6
                }
                .fx__i--noshrink{
                    flex-shrink:0
                }
                .fx__i--basis-0{
                    flex-basis:0
                }
                .fx__i--basis-100{
                    flex-basis:100px
                }
                .fx__i--basis-200{
                    flex-basis:200px
                }
                .fx__i--basis-300{
                    flex-basis:300px
                }
                .fx__i--basis-0{
                    flex-basis:0
                }
                .fx__i--as-start{
                    align-self:flex-start
                }
                .fx__i--as-end{
                    align-self:flex-end
                }
                .fx__i--as-center{
                    align-self:center
                }
                .fx__i--as-baseline{
                    align-self:baseline
                }
                .fx__i--as-stretch{
                    align-self:stretch
                }

                .inputstack{
                    background-color:#fff
                }
                .input,.inputstack{
                    font-size:14px;
                    padding:5px;
                    color:#363636;
                    border:1px solid #C4C4C4;
                    border-radius:3px;
                    margin:2px 0;
                    box-sizing:border-box;
                    max-width:100%
                }
                .input[type=checkbox],.input[type=radio]{
                    vertical-align:middle;
                    position:relative;
                    bottom:1px
                }
                .inputstack__input{
                    flex:1;
                    width:10px;
                    border:0;
                    padding:5px;
                    margin:0;
                    font-size:inherit;
                    color:inherit;
                    background-color:inherit
                }
                .inputstack{
                    display:flex;
                    padding:0
                }
                .inputstack *:first-child{
                    border-radius:3px 0 0 3px!important
                }
                .inputstack *:last-child{
                    border-radius:0 3px 3px 0!important
                }
                .input:disabled{
                    opacity:.7
                }
                .input--primary,.inputstack--primary{
                    background-color:rgba(141,185,219,1);
                    border-color:rgba(0,5,39,1);
                    color:#363636
                }
                .input--secondary,.inputstack--secondary{
                    background-color:rgba(255,151,166,1);
                    border-color:rgba(147,0,0,1);
                    color:#363636
                }
                .input--success,.inputstack--success{
                    background-color:rgba(153,255,194,1);
                    border-color:rgba(0,98,14,1);
                    color:#363636
                }
                .input--info,.inputstack--info{
                    background-color:rgba(148,255,255,1);
                    border-color:rgba(0,119,117,1);
                    color:#363636
                }
                .input--warning,.inputstack--warning{
                    background-color:rgba(255,250,158,1);
                    border-color:rgba(118,70,0,1);
                    color:#363636
                }
                .input--danger,.inputstack--danger{
                    background-color:rgba(255,135,135,1);
                    border-color:rgba(100,0,0,1);
                    color:#363636
                }
                input[type=radio].input--primary + label,input[type=checkbox].input--primary + label{
                    color:rgba(61,105,139,1)
                }
                input[type=radio].input--secondary + label,input[type=checkbox].input--secondary + label{
                    color:rgba(247,71,86,1)
                }
                input[type=radio].input--success + label,input[type=checkbox].input--success + label{
                    color:rgba(73,198,114,1)
                }
                input[type=radio].input--info + label,input[type=checkbox].input--info + label{
                    color:rgba(68,219,217,1)
                }
                input[type=radio].input--warning + label,input[type=checkbox].input--warning + label{
                    color:rgba(218,170,78,1)
                }
                input[type=radio].input--danger + label,input[type=checkbox].input--danger + label{
                    color:rgba(200,55,55,1)
                }
                .input--minimal{
                    border-right:0;
                    border-top:0;
                    border-left:0;
                    background:inherit;
                    border-radius:0
                }
                .input--file{
                    color:#FFF;
                    border:0
                }
                .input--xs,.inputstack--xs{
                    width:50px
                }
                .input--s,.inputstack--s{
                    width:100px
                }
                .input--m,.inputstack--m{
                    width:200px
                }
                .input--l,.inputstack--l{
                    width:300px
                }
                .input--xl,.inputstack--xl{
                    width:500px
                }
                .input--xxl,.inputstack--xxl{
                    width:800px
                }
                .input--w100,.inputstack--w100{
                    width:100%
                }
                .input--noLMargin{
                    margin-left:0
                }
                .input--noRMargin{
                    margin-right:0
                }
                .input--noLRMargin{
                    margin-left:0;
                    margin-right:0
                }
                .input--ta-s{
                    height:50px
                }
                .input--ta-m{
                    height:100px
                }
                .input--ta-l{
                    height:200px
                }
                .btn,.inputstack__btn{
                    background-color:#f5f5f5;
                    background-image:linear-gradient(to bottom,#f5f5f5 0,#d2d2d2 33%,#d2d2d2 66%,#f5f5f5 100%);
                    background-repeat:repeat-x;
                    background-size:1px 300%;
                    border-style:solid;
                    border-width:1px;
                    border-radius:4px;
                    border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
                    text-shadow:0 1px 0 rgba(255,255,255,.3);
                    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
                    color:#000;
                    padding:6px 15px;
                    font-family:inherit;
                    font-size:14px;
                    margin:2px 0;
                    cursor:pointer;
                    transition:background-position .15s;
                    display:inline-block
                }
                .inputstack__btn{
                    border:0;
                    margin:0
                }
                .btn--block{
                    display:block;
                    width:100%
                }
                .btn--small{
                    padding:6px
                }
                .btn--square{
                    border-radius:0
                }
                .btn--small{
                    padding:6px
                }
                .btn--square{
                    border-radius:0
                }
                .btn--minimaldark{
                    background-color:rgba(0,0,0,.9)!important
                }
                .btn--minimaldark:hover{
                    border-color:#FFF!important;
                    color:#FFF!important
                }
                .btn--minimallight{
                    background-color:rgba(220,220,220,.1)!important;
                    box-shadow:1px 1px 1px rgba(0,0,0,.3)
                }
                .btn--minimallight:hover{
                    border-color:#000!important;
                    color:#000!important
                }
                .btn:hover,.inputstack__btn:hover{
                    background-position:0 50%
                }
                .btn:active,.inputstack__btn:active{
                    background-position:0 100%
                }
                .btn:disabled,.btn[disabled],.inputstack__btn:disabled,.btn--disabled,.inputstack__btn--disabled{
                    background-position:0 130%!important;
                    opacity:.5
                }
                .btn--dark,.inputstack button.inputstack__btn--dark{
                    background-color:#202425;
                    background-image:linear-gradient(to bottom,#202425 0,#101112 33%,#101112 66%,#202425 100%);
                    text-shadow:0 -1px 0 rgba(0,0,0,.25);
                    color:#d7d7d7
                }
                .btn--minimaldark.btn--dark,.btn--minimallight.btn--dark{
                    color:#d7d7d7;
                    border:1px solid #d7d7d7;
                    background-image:none;
                    text-shadow:0 -1px 0 rgba(0,0,0,.25)
                }
                .btn--light,.inputstack button.inputstack__btn--light{
                    background-color:#d7d7d7;
                    background-image:linear-gradient(to bottom,#eee7e7 0,#d7d7d7 33%,#d7d7d7 66%,#eee7e7 100%);
                    color:#202425
                }
                .btn--minimaldark.btn--light,.btn--minimallight.btn--light{
                    color:#202425;
                    border:1px solid #202425;
                    background-image:none
                }
                .btn--primary,.inputstack button.inputstack__btn--primary,.inputstack--primary .inputstack__btn{
                    background-color:rgba(61,105,139,1);
                    background-image:linear-gradient(to bottom,rgba(61,105,139,1) 0,#0b3759 33%,#0b3759 66%,rgba(61,105,139,1) 100%);
                    text-shadow:0 -1px 0 rgba(0,0,0,.25);
                    color:#fff
                }
                .btn--minimaldark.btn--primary,.btn--minimallight.btn--primary{
                    color:rgba(61,105,139,1);
                    border:1px solid rgba(61,105,139,1);
                    background-image:none;
                    text-shadow:0 -1px 0 rgba(0,0,0,.25)
                }
                .btn--secondary,.inputstack button.inputstack__btn--secondary,.inputstack--secondary .inputstack__btn{
                    background-color: #8a8c95;
                    background-image:linear-gradient(to bottom,#8a8c95 0,#6e6f75 33%,#6e6f75 66%,#8a8c95 100%);
                    text-shadow:0 -1px 0 rgba(0,0,0,.25);
                    color:#fff
                }
                .btn--minimaldark.btn--secondary,.btn--minimallight.btn--secondary{
                    color:rgba(247,71,86,1);
                    border:1px solid rgba(247,71,86,1);
                    background-image:none;
                    text-shadow:0 -1px 0 rgba(0,0,0,.25)
                }
                .btn--success,.inputstack button.inputstack__btn--success,.inputstack--success .inputstack__btn{
                    background-color:rgba(73,198,114,1);
                    background-image:linear-gradient(to bottom,rgba(73,198,114,1) 0,#179440 33%,#179440 66%,rgba(73,198,114,1) 100%);
                    text-shadow:0 -1px 0 rgba(0,0,0,.25);
                    color:#fff
                }
                .btn--minimaldark.btn--success,.btn--minimallight.btn--success{
                    color:rgba(73,198,114,1);
                    border:1px solid rgba(73,198,114,1);
                    background-image:none;
                    text-shadow:0 -1px 0 rgba(0,0,0,.25)
                }
                .btn--info,.inputstack button.inputstack__btn--info,.inputstack--info .inputstack__btn{
                    background-color:rgba(68,219,217,1);
                    background-image:linear-gradient(to bottom,rgba(68,219,217,1) 0,#12a9a7 33%,#12a9a7 66%,rgba(68,219,217,1) 100%);
                    text-shadow:0 -1px 0 rgba(0,0,0,.25);
                    color:#fff
                }
                .btn--minimaldark.btn--info,.btn--minimallight.btn--info{
                    color:rgba(68,219,217,1);
                    border:1px solid rgba(68,219,217,1);
                    background-image:none;
                    text-shadow:0 -1px 0 rgba(0,0,0,.25)
                }
                .btn--warning,.inputstack button.inputstack__btn--warning,.inputstack--warning .inputstack__btn{
                    background-color:rgba(218,170,78,1);
                    background-image:linear-gradient(to bottom,rgba(218,170,78,1) 0,#a8781c 33%,#a8781c 66%,rgba(218,170,78,1) 100%);
                    text-shadow:0 -1px 0 rgba(0,0,0,.25);
                    color:#fff
                }
                .btn--minimaldark.btn--warning,.btn--minimallight.btn--warning{
                    color:rgba(218,170,78,1);
                    border:1px solid rgba(218,170,78,1);
                    background-image:none;
                    text-shadow:0 -1px 0 rgba(0,0,0,.25)
                }
                .btn--danger,.inputstack button.inputstack__btn--danger,.inputstack--danger .inputstack__btn{
                    background-color:rgba(200,55,55,1);
                    background-image:linear-gradient(to bottom,rgba(200,55,55,1) 0,#960505 33%,#960505 66%,rgba(200,55,55,1) 100%);
                    text-shadow:0 -1px 0 rgba(0,0,0,.25);
                    color:#fff
                }
                .btn--minimaldark.btn--danger,.btn--minimallight.btn--danger{
                    color:rgba(200,55,55,1);
                    border:1px solid rgba(200,55,55,1);
                    background-image:none;
                    text-shadow:0 -1px 0 rgba(0,0,0,.25)
                }
                .btn--file{
                    display:inline-block;
                    position:relative;
                    overflow:hidden
                }
                .btn--file input{
                    position:absolute;
                    top:0;
                    right:0;
                    margin:0;
                    padding:0;
                    font-size:20px;
                    cursor:pointer;
                    opacity:0
                }
                a{
                    color:inherit;
                    text-decoration:none;
                    transition:color .2s
                }
                .a:hover{
                    color:#FFF
                }
                .a--hover-dark:hover{
                    color:#000
                }
                .a--primary,.a--hover-primary:hover{
                    color:rgba(61,105,139,1)
                }
                .a--primary-light,.a--hover-primary-light:hover{
                    color:rgba(61,105,139,1)
                }
                .a--secondary,.a--hover-secondary:hover{
                    color:rgba(247,71,86,1)
                }
                .a--secondary-light,.a--hover-secondary-light:hover{
                    color:rgba(247,71,86,1)
                }
                .a--success,.a--hover-success:hover{
                    color:rgba(73,198,114,1)
                }
                .a--info,.a--hover-info:hover{
                    color:rgba(68,219,217,1)
                }
                .a--warning,.a--hover-warning:hover{
                    color:rgba(218,170,78,1)
                }
                .a--danger,.a--hover-danger:hover{
                    color:rgba(200,55,55,1)
                }
                .hr{
                    border:0;
                    height:1px;
                    background:#333
                }
                .hr--primary{
                    background-color:#021829
                }
                .hr--secondary{
                    background-color:rgba(247,71,86,1)
                }
                .hr--success{
                    background-color:rgba(73,198,114,1)
                }
                .hr--info{
                    background-color:rgba(68,219,217,1)
                }
                .hr--warning{
                    background-color:rgba(218,170,78,1)
                }
                .hr--danger{
                    background-color:rgba(200,55,55,1)
                }

                .primary{
                    color:rgba(61,105,139,1)!important
                }
                .secondary{
                    color:rgba(247,71,86,1)!important
                }
                .success{
                    color:rgba(73,198,114,1)!important
                }
                .info{
                    color:rgba(68,219,217,1)!important
                }
                .warning{
                    color:rgba(218,170,78,1)!important
                }
                .danger{
                    color:rgba(200,55,55,1)!important
                }

                /***************************************************************************
                * SCREENSAVER
                ***************************************************************************/
                .screensaver{
                    position:fixed;
                    width:100%;
                    height:100%;
                    top: 0;
                    left: 0;
                    background:#000;
                    z-index:9999;

                    /*display:flex;
                    justify-content:center;
                    align-items:center*/
                }
                .screensaver__text {
                    color:#FFF;
                    font-size:48px;
                    text-align: center;
                }

                .screensaver__x {
                    width: 600px;
                    animation: x 18s linear infinite alternate;
                }

                .screensaver__y {
                    height: 200px;
                    animation: y 13s linear infinite alternate;
                }

                @keyframes x {
                    100% {
                        transform: translateX( calc(100vw - 600px) );
                    }
                }

                @keyframes y {
                    100% {
                        transform: translateY( calc(100vh - 200px) );
                    }
                }

                .screensaver--hidden {
                    display: none;
                }

            </style>
        </head>
        <body>

            <div class='screensaver screensaver--hidden' id="screensaver">
                <div class="screensaver__x">
                    <div class="screensaver__y">
                        <div class='screensaver__text'>Tik om te beginnen</div>
                    </div>
                </div>
            </div>
            <div class='header'>
                <div class='header__title'>Installatie</div>
            </div>
            <div id="content" class="content">
                <br>

                <div id='containerSetup'>
                    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="formInstall">
                        <div class='fx fx--jc-center'>
                            <div class='' style="width: 500px;">
                                <?php
                                if (isset($_REQUEST['error'])) {
                                    echo "<p class='danger' style='font-weight: bold; background: rgb(255,255,255); padding: 10px; border: 1px solid #FF0000;'>" . $_REQUEST['error'] . "</p>";
                                }
                                ?>
                                Welkom bij de installatie!<br /><br />
                                Voer de licentiecode in die u ontvangen heeft bij de aanschaf van dit systeem.<br /><br />
                                <input type='text' name='license' id="license" placeholder='licentiecode' class='input input--w100' required /><br >
                                <button class='btn btn--primary btn--block'>Start installatie</button>
                                <Br /><Br />
                                <button class='btn btn--secondary btn--block' type="button" id="btnWifi" style='display: none;'>Open WiFi Instellingen</button>
                                <button class='btn btn--secondary btn--block' type="button" id="btnConnectMain" style='display: none;'>Systeem koppelen</button>

                                <input type='hidden' name='action' value='install' />
                                <input type='hidden' name='key' value='' id='secureKeyVerification' />
                                <br >
                            </div>
                        </div>
                    </form>
                </div>

                <div id='containerConnect' style="display: none;">
                    <div class='fx fx--jc-center'>
                        <div class='' style="width: 500px;">
                            <p class='danger' style='font-weight: bold; background: rgb(255,255,255); padding: 10px; border: 1px solid #FF0000; display: none;' id='connectResult'></p>
                            Koppel dit systeem met een ander comnirex systeem.<br />
                            Geef het ip-adres of hostname op van het hoofd-systeem.<br />
                            <input type='text' name='url' id='url' placeholder='IP of hostname zonder https:// poort' class='input input--w100' required /><br >
                            <button class='btn btn--primary btn--block' id="btnConfirmConnection">Bevestig koppeling</button>
                            <Br /><Br />
                            <button class='btn btn--secondary btn--block' type="button" id="btnSetup">Terug naar setup</button>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                function checkPageAvailable(url, callback) {
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                callback(true);
                            } else {
                                callback(false);
                            }
                        }
                    };

                    xhttp.open("GET", url, true);
                    xhttp.send();
                }

                if (window.Android) {
                    document.getElementById("btnWifi").style.display = "block";
                    document.getElementById("btnConnectMain").style.display = "block";

                    if (Android.secureByApp) {
                        document.getElementById("formInstall").addEventListener("submit", function (event) {
                            document.getElementById("secureKeyVerification").value = Android.secureByApp(document.getElementById("license").value);
                            return true;
                        });
                    }
                }

                document.getElementById("btnWifi").addEventListener("click", function () {
                    if (!window.Android) {
                        $.notification("Deze functie werkt alleen op een android comnirex.", "info");
                        return;
                    }

                    Android.showWifiSettings();
                });

                document.getElementById("btnConnectMain").addEventListener("click", function () {
                    if (!window.Android) {
                        $.notification("Deze functie werkt alleen op een android comnirex.", "info");
                        return;
                    }

                    document.getElementById("containerSetup").style.display = "none";
                    document.getElementById("containerConnect").style.display = "block";
                });

                document.getElementById("btnSetup").addEventListener("click", function () {
                    document.getElementById("containerSetup").style.display = "block";
                    document.getElementById("containerConnect").style.display = "none";
                });

                document.getElementById("btnConfirmConnection").addEventListener("click", function () {
                    var url = "https://" + document.getElementById("url").value + ":8443/index.php";
                    document.getElementById("connectResult").innerHTML = "Bezig met verbinden";
                    document.getElementById("connectResult").style.display = "block";

                    checkPageAvailable(url, function (valid) {
                        if (valid) {
                            document.getElementById("connectResult").innerHTML = "Koppeling wordt ingesteld, android wordt herstart";
                            document.getElementById("connectResult").classList.remove("danger");
                            document.getElementById("connectResult").classList.add("success");

                            Android.setMainURL(url);
                            window.location = url;
                        } else {
                            document.getElementById("connectResult").innerHTML = "IP or hostnaam is niet bereikbaar, controleer gegevens.";
                        }
                    });

                });

                var screensaverTimeout;

                function hideScreenSaver() {
                    document.getElementById("screensaver").classList.add("screensaver--hidden");
                }
                function showScreenSaver() {
                    document.getElementById("screensaver").classList.remove("screensaver--hidden");
                    document.getElementById("btnWifi").focus();
                }

                document.addEventListener("click", function () {
                    hideScreenSaver();

                    clearTimeout(screensaverTimeout);
                    screensaverTimeout = setTimeout(showScreenSaver, 120000);
                });

                screensaverTimeout = setTimeout(showScreenSaver, 120000);

            </script>
        </body>
    </html>

    <?php
}