{% extends "demo_layout.html" %}
{% from "_order_v2.html" import
        science_info, stain_details, sample_details with context %}

{% block morehead %}
    {% assets filters="jsmin", output="gen/slide_viewer-packed.js",
            "assign_stain_form.js", "stain_widgets.js", "tag_container.js", "tag_slide_form.js" %}
        <script src="{{ ASSET_URL }}"></script>
    {% endassets %}
    {% assets filters="cssmin", output="gen/slide_viewer-packed.css",
            "css/stain_widgets.css", "css/tag_container.css" %}
        <link rel="stylesheet" href="{{ ASSET_URL }}">
    {% endassets %}
{% endblock %}

{% block content %}
<h2>{{ slide.slide_name }}</h2>

<div id="viewer-page-container">
<div id="viewer-metadata">
    {% include "slide_js_init.html" %}
    <p>
        {% include "tag_slide_form.html" %}
    </p>
    <h3>Sample Info</h3>
    {% if slide.stain %}
    {{ sample_details(slide) }}
    {% else %}
        No associated sample or stain.
    {% endif %}

    <h3>Science Info</h3>
    {{ science_info(slide.order) }}
</div>
<div id="slideviewer-container">
    <div id="slideviewer">
    </div>
</div>
<div id="viewer-metadata-toggle-button-container">
    <button class="viewer-metadata-toggle btn btn-default" type="button">Science Info</button>
</div>
{% endblock %}

{% block tail %}
{{ super() }}
<script src="{{ url_for('static', filename='openseadragon/openseadragon.hw.min.js') }}"></script>
<script src="{{ url_for('static', filename='openseadragon/openseadragon-imaginghelper.min.js') }}"></script>
<script src="{{ url_for('static', filename='openseadragon/openseadragon-scalebar.js') }}"></script>
<script type="text/javascript">    
    function create_fixed_zoom_btn(viewer, helper, zb) {
        var url_base = "{{ url_for('static', filename='openseadragon/images/') }}";
        var btn = new OpenSeadragon.Button({
            srcRest: url_base + zb + "x_rest.png",
            srcGroup: url_base + zb + "x_grouphover.png",
            srcHover: url_base + zb + "x_hover.png",
            srcDown: url_base + zb + "x_pressed.png",
            tooltip: "Zoom to "+zb+"x",
            onClick: function() {
                var zoomVal = parseFloat(zb);
                var newzoom = zoomVal / 40.0;
                
                // Not sure why dividing by 4 is necessary to get visual to show correct scale.
                // Perhaps OpenSeadragon is scaling by 4 or something
                // 1, 2, 4, 10, 20, 40
                // 0 => 1
                //       
                //console.log("zoomVal="+newzoom);
                helper.setZoomFactor(newzoom);
                
                //viewer.viewport.zoomTo(zoomVal, null, true);
                //viewer.viewport.applyConstraints();
                
                return false;
            }
        });

        return btn;
    }
    
    $(document).ready(function(){
        seadragon = OpenSeadragon({
            id: "slideviewer",
            prefixUrl: "{{ url_for('static', filename='openseadragon/images/') }}",
            tileSources: [ "{{ url_for('fetch_dzi', slide_id=slide.id, code=code) }}" ],
            showNavigator: true
        });

        var imagingHelper = new OpenSeadragonImaging.ImagingHelper({viewer: seadragon});
        //imagingHelper.setMinZoom(1);
        //imagingHelper.setMaxZoom(40);
        
        /*
        imagingHelper.addHandler('image-view-changed', function (event) {
            
        });
        */
        
        seadragon.addHandler("open", function(event) {
            //console.log("Called open callback: viewport="+seadragon.viewport);
            seadragon.viewport.setRotation(seadragon.viewport.getRotation() + 180);

            seadragon.navigator.addHandler("open", function(event) {
                seadragon.navigator.viewport.setRotation(seadragon.navigator.viewport.getRotation() + 180);
            });
        });
        
        var zoom_btns = ["1", "2", "4", "10", "20", "40"];
        var btn_list = [];
        
        for(var i=0; i < zoom_btns.length; i++) {
            var zb = zoom_btns[i];
            var btn = create_fixed_zoom_btn(seadragon, imagingHelper, zb);
            btn_list.push(btn);
        }
        
        var btnGroup = new OpenSeadragon.ButtonGroup({buttons: btn_list});
        seadragon.addControl(btnGroup.element, {
            attachToViewer: true,
            anchor: OpenSeadragon.ControlAnchor.TOP_LEFT
        });
        
        $("#test-zoom").on('keypress', function(e){
            if (e.which == 13) {
                var zoomvalStr = $("#test-zoom").val();
                var zoomvalFloat = parseFloat(zoomvalStr);
                if (zoomvalFloat) {
                    imagingHelper.setZoomFactor(zoomvalFloat);
                }
            }
        });
        

        // Show scalebar
        seadragon.scalebar({
            pixelsPerMeter: 4000000,
            barThickness: 2,
            backgroundColor : "rgba(255, 255, 255, 0.7)"
        });
        // Maximize viewer size
        $('#slideviewer').height($(window).height() - 130);
        $(window).resize(function() {
            if (seadragon.isFullPage())
                $('#slideviewer').height($(window).height() - 2);
            else
                $('#slideviewer').height($(window).height() - 130);
        });
    });
</script>
{% endblock %}