function openTestConvertPopup(converterId) {
    var html = '<div id="tc_conversion_options">options</div><div><div id="tc_conversion_result"><h2>Result</h2>wait...</div></div>'
    document.getElementById('tc_content').innerHTML = html;

    var w = Math.min(1200, Math.max(200, document.documentElement.clientWidth - 100));
    var h = Math.max(250, document.documentElement.clientHeight - 80);
    tb_show('Testing conversion', '#TB_inline?inlineId=tc_popup&width=' + w + '&height=' + h);

    webpexpress_createTCOptions(converterId);
}

function webpexpress_createTCOptions(converterId) {

    var html = '';
    html += '<h2>Options</h2>'
    html += '<form>';
    html += '<div style="display:inline-block; margin-right: 20px;"><label>Converter:</label><select id="converter" name="converter">';
    for (var i=0; i<window.converters.length; i++) {
        var c = window.converters[i];
        var cid = c['converter'];
        html += '<option value="' + cid + '"' + (cid == converterId ? ' selected' : '') + '>' + cid + '</option>';
    }
    html += '</select></div>'
    html += '<div style="display:inline-block;"><label>Test image:</label><select id="test_image" name="image">';
    //html += '<option value="dice.png">dice.png</option>';
    html += '<option value="alphatest.png">alphatest.png</option>';
    html += '<option value="test-pattern-tv.jpg">test-pattern-tv.jpg</option>';
    html += '<option value="dice.png">dice.png</option>';
    //html += '<option value="alphatest.png">alphatest.png</option>';
    html += '<option value="palette-based-colors.png">palette-based-colors.png</option>';
    //html += '<option value="test.png">test.png</option>';
    html += '<option value="architecture-q85-w600.jpg">architecture-q85-w600.jpg</option>';
    html += '</select></div>';
//    html += '<h3>Conversion options</h3>'
    html += '<div id="tc_png" class="toggler effect-visibility"><h3>Conversion options (PNG)</h3><div id="tc_png_options"></div></div>';
    html += '<div id="tc_jpeg" class="toggler effect-visibility"><h3>Conversion options (JPEG)</h3><div id="tc_jpeg_options"></div></div>';
//    html += '<div id="tc_jpeg_options" class="toggler effect-visibility"></div>';
    html += '<div><label>Metadata:</label><div id="tc_metadata" style="display: inline-block"></div></div>';
    html += '<button onclick="runTestConversion()" class="button button-primary" type="button" style="margin-top:25px">Convert</button>';
    html += '</form>';
    document.getElementById('tc_conversion_options').innerHTML = html;

    // Append PNG
    document.getElementById('tc_png_options').appendChild(
        document.getElementById('png_td').cloneNode(true)
    );

    // Append Jpeg
    document.getElementById('tc_jpeg_options').appendChild(
        document.getElementById('jpeg_td').cloneNode(true)
    );

    // Append Metadata
    document.getElementById('tc_metadata').appendChild(
        document.getElementById('metadata').cloneNode(true)
    );

    // change ids. All id's will get appended "tc_" - unless they already have
    document.querySelectorAll('#tc_conversion_options [id]').forEach(function(el) {
        el.value = document.getElementById(el.id).value;
        if (el.id.indexOf('tc_') != 0) {
            el.id = 'tc_' + el.id;
        }
    });

    // listen to all select box changes
    document.querySelectorAll('#tc_conversion_options select').forEach(function(el) {
        el.addEventListener('change', function() {
            webpexpress_updateVisibilities();
        });
    });

    webpexpress_updateVisibilities();

    runTestConversion();
}

function webpexpress_updateVisibilities() {
    // toggleVisibility('png_row', el('image_types').value != '1');
    function el(elmId) {
        return document.getElementById(elmId);
    }

    var testImage = el('tc_test_image').value;
    var isPng = (testImage.toLowerCase().indexOf('.png') != -1);

    toggleVisibility('tc_png', isPng);
    toggleVisibility('tc_jpeg', !isPng);

    toggleVisibility('tc_png_quality_lossy_div', el('tc_png_encoding_select').value != 'lossless');
    toggleVisibility('tc_png_near_lossless_div', el('tc_png_enable_near_lossless').value == 'on');

    console.log('value:' +  el('tc_quality_auto_select').value);
    toggleVisibility('tc_max_quality_div', el('tc_quality_auto_select').value == 'auto_on');
    toggleVisibility('tc_quality_specific_div', el('tc_quality_auto_select').value != 'auto_on');


}

function runTestConversion() {
    var html = '';

    function elTxt(elmName) {
        //var el = document.getElementById('tc_' + elmId);
        var el = document.querySelector('#tc_conversion_options [name=' + elmName + ']');
        if (!el) {
            alert('Error: Could not find element with name: "' + elmName + '"');
        }
        return el.value;
    }
    function elInt(elmName) {
        return parseInt(elTxt(elmName), 10);
    }

    var configOverrides = {
        "jpeg-encoding": elTxt("jpeg-encoding"),
        "jpeg-enable-near-lossless": (elTxt("jpeg-enable-near-lossless") == 'on'),
        "jpeg-near-lossless": elInt('jpeg-near-lossless'),
        "quality-auto": (elTxt("quality-auto") == 'auto_on'),
        "max-quality": elInt('max-quality'),
        "quality-specific": (elTxt("quality-auto") == 'auto_on' ? elInt('quality-fallback') : elInt('quality-specific')),
        "png-encoding": elTxt("png-encoding"),
        "png-enable-near-lossless": true,
        "png-near-lossless": elInt("png-near-lossless"),
        "png-quality": elInt("png-quality"),
        "alpha-quality": elInt("alpha-quality"),
        "metadata": elTxt('metadata'),
        "log-call-arguments": true,
    };

    var data = {
        'action': 'convert_file',
        'nonce': window.webpExpress['ajax-nonces']['convert'],
        'filename': window.webpExpressPaths['filePaths']['webpExpressRoot'] + '/test/' + elTxt('image'),
        "converter": elTxt("converter"),
        'config-overrides': JSON.stringify(configOverrides)
    }

    //html = JSON.stringify(data);
    //html = 'Converting...';
    document.getElementById('tc_conversion_result').innerHTML = html;

    jQuery.ajax({
        method: 'POST',
        url: ajaxurl,
        data: data,
        //dataType: 'json',
        success: (response) => {
            convertResponseCallback(response);
        },
        error: () => {
            convertResponseCallback({requestError: true});
        },
    });
}

function processLogMoveOptions(thelog) {
    var pos1 = thelog.indexOf('Options:<br>---');
    if (pos1 >= 0) {
        var pos2 = thelog.indexOf('<br>', pos1 + 12) + 4;
        //pos2+=8;
        /*if (thelog.indexOf('<br>', pos2) < 2) {
            pos2 = thelog.indexOf('<br>', pos2) + 4;
        }*/
        var pos3 = thelog.indexOf('----<br>', pos2) + 8;

        // Remove empty line after "Conversion log:"
        var pos4 = thelog.indexOf('<br>', pos3);
        if (pos4-pos3 < 2) {
            pos3 = pos4 + 4;
        }
        //pos3+=4;

        return thelog.substr(0, pos1) +
            thelog.substr(pos3) +
            //'-------------------------------------------<br>' +
            '<h3>Options:</h3>' +
            thelog.substr(pos2, pos3-pos2);
    }
    return thelog;


/*
    return thelog.substr(0, pos1) +
        'Click to view options' +
        '<div style="display:none">' + thelog.substr(pos1, pos2-pos1) + '</div>' +
        thelog.substr(pos2);
        */
}

function convertResponseCallback(response){

    if (typeof response.requestError == 'boolean') {
        document.getElementById('tc_conversion_result').innerHTML = '<h1 style="color:red">An error occured!</h1>';
        //console.log('response', response);
        return;
    }
    if ((response['success'] === false) && response['data']) {
        document.getElementById('tc_conversion_result').innerHTML = '<h1 style="color:red">An error occured</h1>' + response['data'];
        return;
    }

    if ((typeof response == 'string') && (response[0] != '{')) {
        document.getElementById('tc_conversion_result').innerHTML =
            '<h1 style="color:red">Response was not JSON</h1><p>The following was returned:</p>' + response;
        return;
    }

    var result = JSON.parse(response);
    //result['log'] = processLogMoveOptions(result['log']);


    //var html = document.getElementById('tc_conversion_result').innerHTML;
    var html = '';

    if (result['success'] === true) {

        html += '<h2>Result: <span style="color:green;margin-bottom:2px">Success</span></h2>';

        // sizes
        var orgSize = result['filesize-original'];
        var webpSize = result['filesize-webp'];
        html += '<b>Reduction: ' + Math.round((orgSize - webpSize)/orgSize * 100) + '% ';


        if (orgSize < 10000) {
            orgSizeStr = orgSize + ' bytes';
            webpSizeStr = webpSize + ' bytes';

        } else {
            orgSizeStr = Math.round(orgSize / 1024) + ' K';
            webpSizeStr = Math.round(webpSize / 1024) + ' K';
        }
        html += '(from ' + orgSizeStr.replace('K', 'kb') + ' to ' + webpSizeStr.replace('K', 'kb') + ')';
        html += '</b><br><br>'

        if (window.canDisplayWebp) {
            var filename = document.querySelector('#tc_conversion_options [name=image]').value;
            var srcUrl = '/' + window.webpExpressPaths['urls']['webpExpressRoot']  + '/test/' + filename;
            //html += '<img src="/' + srcUrl + '" style="width:100%">';



            // TODO: THIS DOES NOT WORK. NEEDS ATTENTION!
            /*
            var webpUrl = '/' + window.webpExpressPaths['urls']['content'] +
                              '/webp-express/webp-images/doc-root/' +
                              window.webpExpressPaths['filePaths']['pluginRelToDocRoot'] + '/' +
                              'webp-express/' +
                              'test/' +
                              filename + '.webp';
                          */
            //html += '<img src="' + webpUrl + '" style="width:100%">';

            var webpUrl = result['destination-url'];

            html += '<div class="cd-image-container">';
            html += '  <div class="cd-image-label webp">WebP: ' + webpSizeStr + '</div>';
            html += '  <div class="cd-image-label original">' + (filename.toLowerCase().indexOf('png') > 0 ? 'PNG' : 'JPEG') + ': ' + orgSizeStr + '</div>';
            html += '  <img src="' + webpUrl + '" alt="Converted Image" style="max-width:100%">';
            html += '  <div class="cd-resize-img"> <!-- the resizable image on top -->';
            html += '    <img src="' + srcUrl + '" alt="Original Image">';
            html += '  </div>';
            html += '  <span class="cd-handle"></span> <!-- slider handle -->';
            html += '</div> <!-- cd-image-container -->';
            html += '<i>Drag the slider above to compare original vs webp</i><br><br>'
        }

        html += '<h3>Conversion log:</h3>';

        // the "log" result is a simple form of markdown, using just italic, bold and newlines.
        // It ought not to return anything evil, but safety first
        html += '<pre style="white-space:pre-wrap">' + webpexpress_escapeHTML(result['log']) + '</pre>';

        document.getElementById('tc_conversion_result').innerHTML = html;
        initComparisonSlider(jQuery);

    } else {
        html += '<h2>Result: <span style="color:red;margin-bottom:2px">Failure</span></h2>';

        if (result['msg'] != '') {
            html += ' <h3>Message: <span style="color:red; font-weight: bold">' + webpexpress_escapeHTML(result['msg']) + '</span></h3>';
        }
        if (result['log'] != '') {
            html += '<h3>Conversion log:</h3>';
            html += '<pre style="white-space:pre-wrap">' + webpexpress_escapeHTML(result['log']) + '</pre>';
        }

        document.getElementById('tc_conversion_result').innerHTML = html;
    }

    //html = result['log'];

}