{% extends "webgateway/base/base_main.html" %}

{% block title %}Render Performance{% endblock %}


{% block link %}
{% endblock %}

{% block script %}
{{ block.super }}


<script>
$(document).ready(function() {

    var $planes = $("img.plane"),
        $planeCount = $("#planeCount"),
        $planesLoaded = $("#planesLoaded"),
        $duration = $("#duration"),
        $secsPerPlane = $("#secsPerPlane"),
        planeCount = $planes.length,
        loadedCount = 0,
        start = 0,
        duration = 0,
        perPlane = 0,
        imgSrcAttr = 'plane';   // attribute of img that has the src we want

    $planeCount.text(planeCount);

    var initLoadCallbacks = function() {
        // When a plane has loaded, update count and time
        $planes.load(function() {
            loadedCount += 1;
            $planesLoaded.text(loadedCount);
            duration = (Date.now() - start) / 1000;
            perPlane = duration / loadedCount;
            $duration.text(duration.toPrecision(3));
            $secsPerPlane.text(perPlane.toPrecision(3));
        });
    }


    $("#loadSequential").click(function() {

        initLoadCallbacks();

        {% if imageIds %}
        // if loading a plate, choose img src (thumbnail OR full plane)
        imgSrcAttr = $("input[name=loadThumbs]:checked").attr('value');
        {% endif %}

        $planes.load(function() {
            var thisId = +$(this).attr('id');
            thisId += 1;
            $nextPlane = $("#" + thisId);
            // load the next Plane
            var src = $nextPlane.attr(imgSrcAttr);
            $nextPlane.attr('src', src);
        });

        start = Date.now();

        // Kick off loading of first image.
        $("#0").attr('src', $("#0").attr(imgSrcAttr));
    });


    $("#loadAll").click(function(){

        initLoadCallbacks();

        {% if imageIds %}
        // if loading a plate, choose img src (thumbnail OR full plane)
        imgSrcAttr = $("input[name=loadThumbs]:checked").attr('value');
        {% endif %}

        start = Date.now();

        // Set the src to start all planes loading
        $planes.each(function(){
            var src = $(this).attr(imgSrcAttr);
            $(this).attr('src', src);
        })
    });

});
</script>

<style type="text/css">
    img.plane {
        max-width: 50px;
        max-height: 50px
    }
</style>
{% endblock %}



{% block body %}

Usage: Click button below to EITHER load all images at once OR load sequentially. Refresh page to reset.

<hr />

<button id="loadAll" value="Load All">Load All</button>
<button id="loadSequential" value="Load Sequential">Load Sequentially</button>

Planes Loaded: <span id="planesLoaded">0</span> / <span id="planeCount">0</span> |
Duration: <span id="duration">0</span> secs |
Per Plane: <span id="secsPerPlane">0</span> secs.

{% if imageIds %}
    | For Images,
    Load Full Planes <input type='radio' name='loadThumbs' value="plane" checked="true"/>
    OR Load Thumbnails <input type='radio' name='loadThumbs' value="thumb" />
{% endif %}
<hr />

<!-- Regular Image - go through Z, C, T planes -->
{% if zctList %}

    {% for zct in zctList %}
        <img id="{{ forloop.counter0 }}" class="plane"
            src="{% static 'webtest/img/background.png' %}"
            plane="{% url 'webgateway_render_image' imageId zct.z zct.t %}?c={{ zct.c }}"/>
    {% endfor %}

{% else %}

    <!-- E.g. Plate of Images - go through image IDs -->
    {% if imageIds %}

        {% for iid in imageIds %}
        <img id="{{ forloop.counter0 }}" class="plane"
            src="{% static 'webtest/img/background.png' %}"
            plane="{% url 'webgateway_render_image' iid %}"
            thumb="{% url 'webgateway_render_thumbnail' iid %}"/>
        {% endfor %}

    {% else %}

        <!-- BIG Image - go through tiles -->
        {% if tileList %}

            {% for tile in tileList %}
            <img id="{{ forloop.counter0 }}" class="plane"
                src="{% static 'webtest/img/background.png' %}"
                plane="{% url 'webgateway_render_image_region' imageId 0 0 %}?tile=0,{{ tile.col }},{{ tile.row }}"/>
            {% endfor %}

        {% endif %}

    {% endif %}

{% endif %}

{% endblock %}