<%@language = "javascript"%>
<% /*
     $Revision$
     $Id$

    File:               shared/BijlagenSignature.asp
    Description:        Laat een (hand)tekening zetten en sla die op als png
    Parameters:
        key             ALG_RUIMTE_KEY of ...
        Module          "ALG" of "CNT" of ...
        Kenmerk_key     ALG_KENMERK_KEY of ...

        DoDelete        optioneel: bestandsnaam om te verwijderen
        Reado           optioneel: readonly
    Context:            Automatisch bij flexkenmerk type 'F' en dimensie 'xxx'
    Note:               Met TAMPER bescherming!
*/ %>

<!-- #include file="../Shared/common.inc" -->
<!-- #include file="../Shared/iface.inc" -->
<!-- #include file="../Shared/flexfiles.inc" -->

<%
protectQS.verify(); // tamper check
FCLTHeader.Requires({plugins: ["jQuery"],
                     js:      ["../Localscripts/signature/signature_pad.min.js"],
                     css:     ["../Localscripts/signature/signature-pad.css"]});

// key of folder wordt doorgegeven
var pKey = getQParamInt("key", -1);
var pNiveau = getQParamSafe("niveau", "");
var pModule = getQParamSafe("module");
var pKenmerk_key = getQParamInt("kenmerk_key", -1);
var pMobile = getQParamInt("mobile", 0);

var transitParam = buildTransitParam(["key", "module", "niveau", "kenmerk_key", "encrypt", "extFilter", "pregexp", "reado", "multi", "tmpfolder"]);

params = flexProps(pModule, pKey, String(pKenmerk_key), pNiveau);

__Log("Zoeken bestanden onder " + params.AttachPath);

if (params.extFilter != "xxx")
{
    abort_with_warning("INTERNAL ERROR:\nExtfilter not xxx");
}

%>
<html>
<head>
<%  FCLTHeader.Generate(); %>
    <script>
        function sig_submit()
        {
            if (signaturePad.isEmpty())
            {
                $.post("<%=protectQS.create("base64_png_save.asp?action=delete"+transitParam)%>",
                        {  },
                        FcltCallbackAndThen(uploadDone), "json");
            }
            else
            {
                $.post("<%=protectQS.create("base64_png_save.asp?action=insert"+transitParam)%>",
                        { data: signaturePad.toDataURL() },
                        FcltCallbackAndThen(uploadDone), "json");
            }
        }
        function sig_clear()
        {
            signaturePad.clear();
        }
        function sig_cancel()
        {
<% if (pMobile) { %>
            window.parent.$("#bijlagepopup").popup( "close" );
<% } else { %>
            FcltMgr.closeDetail(window, { cancel: true } );
<% } %>
        }

        function uploadDone(json)
        {
            var aantal = ((json.safefilename||"") == "" ? 0 : 1);
            var return_data = { cnt: aantal,
                                fileName: json.safefilename||"",
                                fullPath: json.fullPath||"",
                                org_data: FcltMgr.dialogArguments()
                              };
<% if (pMobile) { %>
            window.parent.return_data = return_data;
            window.parent.$("#bijlagepopup").popup( "close" );
<% } else { %>
            window.return_data = return_data;
            FcltMgr.closeDetail(window, return_data);
<% } %>
        }

        function init()
        {

            var wrapper = document.getElementById("signature-pad");
            var canvas = wrapper.querySelector("canvas");

            // Adjust canvas coordinate space taking into account pixel ratio,
            // to make it look crisp on mobile devices.
            // This also causes canvas to be cleared.
            function resizeCanvas() {
                var ratio =  window.devicePixelRatio || 1;
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }

            window.onresize = resizeCanvas;
            resizeCanvas();

            window.signaturePad = new SignaturePad(canvas, {
                        xbackgroundColor: "rgb(255, 255, 255)"
                    });
        }

        $(document).ready(function()
            {
                window.parent.$("#bijlagepopup").addClass("m-bijlagepopup-ext1");
                window.parent.$("#fcltmodal"   ).removeClass().addClass("m-bijlagepopup-ext1");

                var w_popup  = window.parent.$("#fcltmodal").width();  // breedte van popup
                var w_screen = window.parent.$("body").width();        // breedte van (achtergrond)scherm
                var x_screen = (w_screen > w_popup ? ((w_screen - w_popup) / 2) : 0);
                window.parent.$("#bijlagepopup-popup").css( {left: x_screen });

                FcltMgr.resized(window);
            } );

    </script>
    <style>
        div#buttons { padding-top: 5px; }
    </style>
</head>
<body id="mod_signature" class='modal' onload="init()">
    <div id="signature-pad" class="m-signature-pad">
        <div class="m-signature-pad--body">
          <canvas></canvas>
        </div>
        <div class="m-signature-pad--footer">
<%
        var buttons = [ {title: L("lcl_filedelete"), id: "btn_clear",  action:"sig_clear()",  icon: "delete.png",  singlepress: true },
                        {title: L("lcl_submit"),     id: "btn_submit", action:"sig_submit()", icon: "opslaan.png", singlepress: true },
                        {title: L("lcl_cancel"),     id: "btn_cancel", action:"sig_cancel()", icon: "undo.png" }
                      ];
        CreateButtons(buttons);
%>
        </div>
    </div>
</body>
</html>
