<!doctype html> <!-- NOTE: For testing porpoises only! -->
<html lang="en">

<head>
<meta charset="utf-8">
<title> Counter image URL's ({{NATIONALITY}}) </title>
<style>
th, td { text-align: left ; vertical-align: top ; padding-right: 1em ; }
th { background: #eee ; }
td { border-bottom: 1px solid #eee ; font-size: 90% ; }
td.nationality { border: 1px solid black ; padding: 0.25em 0.5em ; background: #e8e8e8 ; font-size: 100% ; }
img.counter { float: left ; margin: 0 0.5em 0.5em 0 ; height: 3em ; }
</style>
</head>

<body>
<div id="results" style="display:none;"></div>
</body>

<script src="{{url_for('static',filename='jquery/jquery-3.3.1.min.js')}}"></script>
<script src="{{url_for('static',filename='vo.js')}}"></script>
<script src="{{url_for('static',filename='utils.js')}}"></script>

<script>
gAppConfig = null ;
gVaslPieceInfo = null ;
gOnlineCounterImages = null ;

$(document).ready( function () {

    // parse URL arguments
    var fetch_images = getUrlParam( "fetch-images" ) ;

    // initialize
    var counter_image_urls ;
    var on_load_counter = 4 ;
    function on_data_loaded() {
        if ( --on_load_counter == 0 )
            show_counter_image_urls( counter_image_urls, fetch_images ) ;
    }

    // get the app config
    $.getJSON( "{{url_for('get_app_config')}}", function(data) {
        gAppConfig = data ;
        on_data_loaded() ;
    } ).fail( function( xhr, status, errorMsg ) {
        alert( "Can't get the application config:\n\n" + errorMsg ) ;
        return ;
    } ) ;

    // get the VASL piece info
    $.getJSON( "{{url_for('get_vasl_piece_info')}}", function(data) {
        gVaslPieceInfo = data ;
        on_data_loaded() ;
    } ).fail( function( xhr, status, errorMsg ) {
        alert( "Can't get the VASL piece info:\n\n" + errorMsg ) ;
        return ;
    } ) ;

    // get the online counter images
    $.getJSON( "{{url_for('get_online_counter_images')}}", function(data) {
        gOnlineCounterImages = data ;
        on_data_loaded() ;
    } ).fail( function( xhr, status, errorMsg ) {
        alert( "Can't get the online counter images:\n\n" + errorMsg ) ;
        return ;
    } ) ;

    // get the vehicle/ordnance listings
    var url ;
    if ( "{{VO_TYPE}}" == "ordnance" )
        url = "{{url_for( 'get_ordnance_listings', report=1 )}}" ;
    else if ( "{{VO_TYPE}}" == "vehicles" )
        url = "{{url_for( 'get_vehicle_listings', report=1 )}}" ; // nb: includes landing craft
        else {
                alert( "Invelid vo/type: {{VO_TYPE}}" ) ;
        return ;
    }
    url += "&merge_common=1" ;
    $.getJSON( url, function(data) {
        counter_image_urls = data ;
        if ( "{{NATIONALITY}}" != "*" )
            counter_image_urls = { "{{NATIONALITY}}": data[ "{{NATIONALITY}}" ] } ;
        on_data_loaded() ;
    } ).fail( function( xhr, status, errorMsg ) {
        alert( "Can't get the {{VO_TYPE0}} listings:\n\n" + errorMsg ) ;
        return ;
    } ) ;
} ) ;

function show_counter_image_urls( counters, fetch_images )
{
    // initialize
    if ( ! counters )
        counters = [] ;
    var buf = [] ;
    buf.push( "<table>" ) ;

    // process each nationality
    for ( var nat in counters ) {

        if ( Object.keys( counters ).length > 1 )
            buf.push( "<tr>", "<td class='nationality' colspan=5>", nat ) ;

        buf.push( "<tr>", "<th>ID", "<th>Name", "<th>GPID", "<th>Local URL's", "<th>Online URL's" ) ;

        function add_image( urls, online, caption, url ) {
            var buf2 = [ "<div>" ] ;
            if ( fetch_images ) {
                buf2.push( "<img" ) ;
                if ( online )
                    buf2.push( " data-url='" + url + "'" ) ;
                else
                    buf2.push( " src='" + url + "'" ) ;
                buf2.push( " class='counter' data-caption='" + caption + "'>" ) ;
            }
            buf2.push( "<a href='" + url + "' target='_blank'>" + url + "</a>" ) ;
            buf2.push( "</div>" ) ;
            urls.push( buf2.join("") ) ;
        }
        function check_image( evt ) {
            // check if the counter image loaded OK
            var img = evt.target ;
            if ( img.complete && img.naturalWidth !== 0 )
                return ;
            var $img = $( img ) ;
            console.log( "COUNTER ERROR: " + $img.data("caption") + "\n-", $img.prop("src") ) ;
        }

        // process each counter
        for ( var i=0 ; i < counters[nat].length ; ++i ) {

            var counter = counters[nat][i] ;
            buf.push( "<tr>",
                "<td>", counter.id,
                "<td>", counter.name,
            ) ;

            // process each counter variant
            var gpids = $.isArray( counter.gpid ) ? counter.gpid : [ counter.gpid ] ;
            var gpids2=[] , local_urls=[] , online_urls=[] ;
            for ( var j=0 ; j < gpids.length ; ++j ) {

                if ( gpids[j] === null )
                    continue ;
                gpids2.push( gpids[j] ) ;

                // NOTE: We don't handle the case where there are multiple images available for a GPID,
                // but this happens so infrequently, we can live with it (see expected-multiple-images.json).
                var index = 0 ;

                // generate the counter image URL's
                var caption = "gpid=" + gpids[j] ;
                add_image( local_urls, false, caption,
                    make_local_counter_image_url( gpids[j], index, false )
                ) ;
                add_image( online_urls, true, caption,
                    make_online_counter_image_url( gpids[j], index )
                ) ;
            }

            buf.push(
                "<td>", gpids2.join( "<br>" ),
                "<td>", local_urls.join( "<br>" ),
                "<td>", online_urls.join( "<br>" ),
            ) ;
        }

    }

    buf.push( "</table>" ) ;
    var $results = $( buf.join("") ) ;
    var onlineImages = [] ;
    $results.find( "img.counter" ).each( function() {
        if ( $(this).data( "url" ) )
            onlineImages.push( $(this) ) ;
        else
            $(this).on( "load", check_image ).on( "error", check_image ) ;
    } ) ;
    $("#results").html( $results ).show() ;

    // FUDGE! If we just insert all the online images into the page get the browser to downloaded them normally,
    // a lot of them fail, I assume because Github is rate-limiting requests. We work around this by manually
    // downloading them one at a time :-/
    function downloadNextOnlineImage() {
        if ( onlineImages.length == 0 ) {
            console.log( "- Done." ) ;
            return ;
        }
        if ( onlineImages.length % 100 == 0 )
            console.log( "-", onlineImages.length, "images left..." ) ;
        var $img = onlineImages.pop() ;
        var url = $img.data( "url" ) ;
        function onLoaded( evt ) {
            check_image( evt ) ;
            downloadNextOnlineImage() ;
        }
        $img.on( "load", onLoaded ).on( "error", onLoaded ).attr( "src", url ) ;
    }
    if ( onlineImages.length > 0 ) {
        console.log( "Downloading online images:", onlineImages.length ) ;
        downloadNextOnlineImage() ;
    }
}

</script>

</html>
