<%@language = "javascript" %>
<%
Session("customerId") = "UWVA";
ANONYMOUS_Allowed = 1; // We doen echt niets geheims.

var url = "http://sgf12/facilitor5iwork/?fac_id=UWVA";
var url = "https://uwva.facilitor.nl/?x=x";
//var url = "https://uwva-a.facilitor.nl/?x=x";
url += "&API=BEZ_OPROEP&APIKEY=fL6K7R6GntqaxjsKwZwcyDRC";

var refresh = getQParamInt("refresh", 5);
var bigtime = getQParamInt("bigtime", 10);
var locatiecode = getQParam("locatiecode", "");
var gebouwcode = getQParam("gebouwcode", "ROTS0");
var verdiepingcode = getQParam("verdiepingcode", "");
var groep = getQParam("groep", "");

%>
<!--#include file="../../../appl/Shared/common.inc" -->
<%
FCLTHeader.Requires({ plugins: ["jQuery"],
                      js: ["date.js"]
                    });

var soap_req = '<?xml version="1.0" encoding="utf-8"?>'
             + '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'
             + '  <soap:Body>'
             + '    <GetOproep>'
             + (locatiecode?   '<locatie_code>' + safe.html(locatiecode) + '</locatie_code>':"")
             + (gebouwcode?    '<gebouw_code>' + safe.html(gebouwcode) + '</gebouw_code>':"")
             + (verdiepingcode?'<verdieping_code>' + safe.html(verdiepingcode) + '</verdieping_code>':"")
             + (groep?         '<groep>' + safe.html(groep) + '</groep>':"")
             + '    </GetOproep>'
             + '  </soap:Body>'
             + '</soap:Envelope>';
%>
<html>
    <head>
    <%  FCLTHeader.Generate(); %>
        <style>
            body {
                margin: 0;
                font-family: Verdana;
            }
            table.fullscreen {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            table {
                padding: 5px;
                border: 0px;
            }
            div#error {
                background-color:red;
                color:white;
                position:absolute;
                z-index: 1;
                padding:4px;
                display:none;
            }
            td.tdleft {
                color: white;
                background-color: #0099ff;
                text-align: center;
                font-weight: bold;
                vertical-align: middle;
                padding: 0;
                border-width: 4px 4px 4px 0px;
                border-style: solid;
                border-color: white;
                width: 25%;
            }
            td.tdright {
                width: 50%;
                color: white;
                background-color: #0099ff;
                text-align: center;
                vertical-align: middle;
                font-weight: bold;
                border-width: 4px 0px 4px 4px;
                border-style: solid;
                border-color: white;
                padding: 0;
                line-height: 8em
            }
            td.empty {
                background-color: #fff;
            }
            td.tdleft span.nummer {
                font-size: 6em;
            }
            td.tdleft span.ruimte {
                font-size: 3em;
            }
            td.tdleft span.groep {
                font-size: 3em;
            }
            td.tdright span.nummer {
                font-size: 20em;
            }
            td.tdright span.ruimte {
                font-size: 8em;
            }
            td.tdright span.groep {
                font-size: 8em;
            }
        </style>
        <script>
            function xtext(xelm)
            {
                return xelm.textContent || xelm.text;
            }

            var lastBigTijd = null;
            var bigtimerId = null;
            function callbackDone(data, textStatus, jqXHR)
            {
                $("#error").hide();
                var xmlResp = jQuery.parseXML(jqXHR.responseText);
                var data = [];
                if (xmlResp)
                {
                    var bezoekers = xmlResp.getElementsByTagName("bezoeker");
                    var bigindex = -1; // index van degene die we big gaan tonen
                    for (i=0; i < bezoekers.length; i++)
                    {
                        var ruimtenr = xtext(bezoekers[i].getElementsByTagName("RUIMTENR")[0]);
                        var nummer = xtext(bezoekers[i].getElementsByTagName("OPROEP_NUMMER")[0]);
                        var groep = xtext(bezoekers[i].getElementsByTagName("GROEP")[0])
                        groep = groep.replace(/[\n\r\t]/g,""); // Strip ongewenste lege karakters
                        var tijd = xtext(bezoekers[i].getElementsByTagName("OPROEP_TIJD")[0]);

                        data.push({
                                    ruimte: ruimtenr,
                                    groep: groep,
                                    nummer: nummer,
                                    tijd: tijd
                                  });
                        if (tijd > lastBigTijd)
                        {
                            bigindex = data.length - 1;
                        }
                    }
                }
                td(data, 0, 0);
                td(data, 0, 1);
                td(data, 1, 0);
                td(data, 1, 1);
                td(data, 2, 0);
                td(data, 2, 1);
                td(data, 3, 0);
                td(data, 3, 1);
                // Nu het grote nummer:
                if (!lastBigTijd)
                    bigindex = data.length?0:-1; // Bij opstarten alleen de nieuwste tonen
                if (bigindex >= 0)
                {
                    var bez = data[bigindex];
                    lastBigTijd = bez.tijd;
                    var $td = $("#tdbig");
                    $td.html("<span class='nummer'>" + bez.nummer + "</span><br><br>"
                                    + (bez.groep?"<span class='groep'>" + bez.groep + "</span><br>":"")
                                    + "<span class='ruimte'>" + bez.ruimte + "</span>")
                       .removeClass("empty");
                    PlaySound("sound1");
                    clearTimeout(bigtimerId);
                    bigtimerId = setTimeout(eraseBig, 1000 * <%=bigtime%>);
                }
            }
            function eraseBig()
            {
                var $td = $("#tdbig");
                $td.html("<span class='nummer'>&nbsp;</span><br><br>"
                                + "<span class='ruimte'>&nbsp;</span>")
                   .addClass("empty");

            }

            function td(data, row, col)
            {
                var $td = $("#td" + row + col);
                var bez = data[row + col * 4];
                if (!bez)
                    bez = { nummer: "&nbsp;", ruimte: "&nbsp;" };
                $td.html("<span class='nummer'>" + bez.nummer + "</span><br><br>"
                                + (bez.groep?"<span class='groep'>" + bez.groep + "</span><br><br>":"")
                                + "<span class='ruimte'>" + bez.ruimte + "</span>");
            }

            function callbackFail(jqXHR, textStatus, errorThrown)
            {
                $("#error").text("FAIL: "
                                 + toTimeString(new Date, true) + " "
                                 +  jqXHR.status + " " + (typeof errorThrown == "string"?errorThrown:errorThrown.message))
                           .show();
            }

            // Overrule de ajaxSetup.error uit FcltJquery.js
            // We willen absoluut geen alert popup's
            $.ajaxSetup(
                {"error":function(XMLHttpRequest,textStatus, errorThrown)
                    {
                        $("#error").text("FAIL: " + (typeof errorThrown == "string"?errorThrown:errorThrown.message))
                           .show();
                    }
                });

            function refresh()
            {
                $.post("<%= safe.jsstring(url) %>", "<%= safe.jsstring(soap_req) %>").done(callbackDone).fail(callbackFail);
                setTimeout( refresh, 1000 * <%=refresh %>);
            }

            function PlaySound(soundObj)
            {
              var snd = new Audio("Windows Exclamation.mp3"); // buffers automatically when created
              snd.play();
            }
            $(refresh);

        </script>
    </head>
    <body>
        <div id='error'></div>
        <embed src="Windows Exclamation.mp3" autostart="false" width="0" height="0" style='display:none' id="sound1" enablejavascript="true">
        <table class='fullscreen'>
            <tr><td class='tdleft' id="td00"></td><td class='tdleft' id="td01"></td>
                                                    <td class='tdright empty' rowspan='4' id="tdbig"></td></tr>
            <tr><td class='tdleft' id="td10"></td><td class='tdleft' id="td11"></td></tr>
            <tr><td class='tdleft' id="td20"></td><td class='tdleft' id="td21"></td></tr>
            <tr><td class='tdleft' id="td30"></td><td class='tdleft' id="td31"></td></tr>
        </table>
    </body>
</html>

