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
        if( grayscale )
            context.filter='grayscale(1)'
        context.drawImage(im, 0, 0, canvas.width, canvas.height )
        // -50 is a straight up hack, no idea why this works, but its good enough for me
        if( throbber )
            $('#throbber').attr('style', 'display:show; position:absolute; left:'+canvas.width/2+'px; top:'+(canvas.height/2-50)+'px' )
        else
            $('#throbber').hide();


        // show (or not) the whole figcaption with fname in it - based on state of fname_toggle
        if( $('#fname_toggle').prop('checked' ) )
        {
            $('.figcaption').attr('style', 'display:show' )
            // reset fname for new image (if navigated left/right to get here)
            $('#fname').html(objs[current].name)
        }
        else
            $('.figcaption').attr('style', 'display:none' )

        // if we have faces, the enable the toggles, otherwise disable them
        // and reset model select too
        if( objs[current].faces.length )
        {
            $('#faces').attr('disabled', false)
            $('#distance').attr('disabled', false)
            $('#model').val( Number(objs[current].face_model) )
        }
        else
        {
            $('#faces').attr('disabled', true)
            $('#distance').attr('disabled', true)
            // if no faces, then model is N/A (always 1st element - or 0 in select)
            $('#model').val(0)
        }

        // okay, we want faces drawn so lets do it
        if( $('#faces').prop('checked') )
        {
            // draw rect on each face
            for( i=0; i<objs[current].faces.length; i++ )
            {
                x = objs[current].faces[i].x / ( im.width/canvas.width )
                y = objs[current].faces[i].y / ( im.height/canvas.height )
                w = objs[current].faces[i].w / ( im.width/canvas.width )
                h = objs[current].faces[i].h / ( im.height/canvas.height )
                context.beginPath()
                context.rect( x, y, w, h )
                context.lineWidth = 2
                context.strokeStyle = 'green'
                if( objs[current].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
                    str=objs[current].faces[i].who
                    if( $('#distance').prop('checked') )
                        str += "("+objs[current].faces[i].distance+")"

                    bbox = context.measureText(str);
                    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(str, x+w/2, y-2)
                }
                /* can use to show lower left coords of a face for debugging
                else
                {
                    context.font = "14px Arial"
                    context.textAlign = "center"
                    context.fillStyle = "black"
                    context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
                    context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
                }
                */
                context.stroke();
            }
        }
    }

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

    function FaceToggle()
    {
        $('#distance').prop('disabled', function(i, v) { return !v; });
        DrawImg()
    }

    function ViewImageOrVideo()
    {
        if( objs[current].type == 'Image' )
        {
            im.src='http://mara.ddp.net:5000/' + objs[current].url
            $('#video').hide()
            $('#figure').show()
            if( fullscreen )
            {
                console.log('going fs on image')
                $('#canvas').get(0).requestFullscreen()
            }
        }
        if( objs[current].type == 'Video' )
        {
            $('#video').prop('src', 'http://mara.ddp.net:5000/' + objs[current].url )
            $('#figure').hide()
            $('#video').show()
            ResizeVideo()
            if( fullscreen )
            {
                console.log('going fs on video')
                $('#video').get(0).requestFullscreen()
            }
        }
    }