{% extends "base.html" %} {% block main_content %}
<script>
    var gap=0.8

    function NewWidth()
    {
        w_r=im.width/(window.innerWidth*gap)
        h_r=im.height/(window.innerHeight*gap)
        if( w_r > h_r )
            return window.innerWidth*gap
        else
            return im.width*gap / (im.height/window.innerHeight)
    }

    function NewHeight()
    {
        w_r=im.width/(window.innerWidth*gap)
        h_r=im.height/(window.innerHeight*gap)
        if( h_r > w_r )
            return window.innerHeight*gap
        else
            return im.height*gap / (im.width/window.innerWidth)
    }

    // Define this once and before it will be called, hence at the top of this file
    function DrawImg()
    {
        // another call to this func will occur on load, so skip this one
        if( im.width == 0 )
            return

        canvas.width=NewWidth(im)
        canvas.height=NewHeight(im)

        // actually draw the pixel images to the canvas at the right size
        context.drawImage(im, 0, 0, canvas.width, canvas.height )

        if( $('#faces').attr('faces') == 1 )
        {
            // draw rect on each face
            for( i=0; i<faces.length; i++ )
            {
                x = faces[i].x / ( im.width/canvas.width )
                y = faces[i].y / ( im.height/canvas.height )
                w = faces[i].w / ( im.width/canvas.width )
                h = faces[i].h / ( im.height/canvas.height )
                context.beginPath()
                context.rect( x, y, w, h )
                context.lineWidth = 2
                context.strokeStyle = 'green'
                if( faces[i].who )
                {
                    // finish face box, need to clear out new settings for
                    // transparent backed-name tag
                    context.stroke();
                    context.beginPath()
                    context.lineWidth = 0.1
                    context.font = "30px Arial"
                    context.globalAlpha = 0.6
                    bbox = context.measureText(faces[i].who);
                    f_h=bbox.fontBoundingBoxAscent
                    if( bbox.fontBoundingBoxDescent )
                        f_h += bbox.fontBoundingBoxDescent
                    f_h -= 8
                    context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
                    context.fillStyle="white"
                    context.fill()
                    context.stroke();
                    context.beginPath()
                    context.globalAlpha = 1.0
                    context.font = "30px Arial"
                    context.textAlign = "center"
                    context.fillStyle = "green"
                    context.fillText(faces[i].who, x+w/2, y-2)
                }
                context.stroke();
            }
        }
    }

    function ResizeVideo()
    {
        $('#_v').height(window.innerHeight*gap)
    }

    function Toggle(id)
    {
        b=$('#'+id )
        b.toggleClass('badge-info')
        b.toggleClass('badge-outline-info')
        b.toggleClass('text-white')
        b.toggleClass('text-secondary')
        if( b.attr('faces') == 1 )
            b.attr('faces', 0 )
        else
            b.attr('faces', 1 )
        DrawImg()
    }
</script>

<div id="viewer" class="container-fluid">
    {% set max=eids.split(',')|length %}
    <div id="bbar" class="form-row offset-lg-1 col">
        <span id="faces" class="badge p-2 text-secondary" onClick="Toggle('faces')" style="border: 1px solid #5bc0de" faces=0><i class="fas fa-brain fa-2x"></i></button>
    </div>
    <center>
        <input type="hidden" name="eids" value={{eids}}>
        <div class="form-row col-lg-12">
            {% if eids.find(obj.id|string) > 0 %}
                <form id="prev" class="form form-inline" action="/viewprev" method="POST">
                <input type="hidden" name="current" value="{{obj.id}}">
                <input type="hidden" name="eids" value="{{eids}}">
                <button class="btn btn-outline-info h-75" id="la"><i class="fas fa-angle-double-left"></i></button>
                </form id="prev">
            {% endif %}
            {% if obj.type.name == "Image" %}
                <figure style="border: 1px solid #5bc0de; border-radius: 3px;">
                    <canvas id="canvas"></canvas>
                    <script>
                        var im=new Image();
                        im.onload=DrawImg
                        im.src="/{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"
                        var faces=[]
                        {% for face in obj.file_details.faces %}
                            data = { 
                                'x': '{{face.locn[3]}}', 'y': '{{face.locn[0]}}', 
                                'w': '{{face.locn[1]-face.locn[3]}}', 'h':'{{face.locn[2]-face.locn[0]}}' 
                                }
                            {% if face.refimg %}
                                data['who']='{{face.refimg.person.tag}}'
                            {% endif %}
                            faces.push( data )
                        {% endfor %}
                        var context = canvas.getContext('2d')
                        window.addEventListener('resize', DrawImg, false);
                    </script>
                    <figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
                </figure>
            {% elif obj.type.name == "Video" %}
                <video id="_v" controls>
                    <source src="/{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <script>
                window.addEventListener('resize', ResizeVideo, false);
                ResizeVideo()
                </script>
            {% endif %}

            {% for eid in eids.split(',') %}
                {% if loop.index == max-1 %}
                    {% if eid|int != obj.id %}
                        <form id="next" class="form form-inline" action="/viewnext" method="POST">
                        <input type="hidden" name="current" value="{{obj.id}}">
                        <input type="hidden" name="eids" value="{{eids}}">
                        <button class="btn btn-outline-info h-75" id="ra"><i class="fas fa-angle-double-right"></i></button>
                        </form id="next">
                    {% endif %}
                {% endif %}
            {% endfor %}
        </div id="/form-row">
    </center>
</div class="container">
{% endblock main_content %}
{% block script_content %}
<script>
$( document ).keydown(function(event) {
    switch (event.key) 
    {
        case "Left": // IE/Edge specific value
        case "ArrowLeft":
            $('#la').click()
            break;
        case "Right": // IE/Edge specific value
        case "ArrowRight":
            $('#ra').click()
            break;
        default:
            return; // Quit when this doesn't handle the key event.
    }
});
</script>
{% endblock script_content %}