{% if debug %}<!-- django_turnit/snippets/turnit_modal.html -->{% endif %}
{% load i18n static turnit_tags thumbnail %}
{% if debug %}
    <script type="text/javascript" src="{% static 'js/turn.js/turn.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/zoomooz.js/jquery.zoomooz.js' %}"></script>
{% else %}
    <script type="text/javascript" src="{% static 'js/turn.js/turn.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/zoomooz.js/jquery.zoomooz.min.js' %}"></script>
{% endif %}

{% thumbnail first_page.page_file '120x160' as img %}
<button data-toggle="modal" data-target="#id-modal-{{ guid }}">
    <img src="{{ img.url }}" width="{{ img.width }}" height="{{ img.height }}"/>
</button>

<div class="modal fade" id="id-modal-{{ guid }}" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="row">
                    <div class="col-md-10">
                        <h4 class="modal-title">{{ title }}</h4>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Close" %}"><span
                                aria-hidden="true">&times;</span></button>
                    </div>

                </div>
            </div>
            <div class="modal-body">
                <div id="id-zoom-viewport-{{ guid }}" class="magazine-viewport zoomViewport">
                    <div class="magazine-container zoomContainer">
                        <div id="id-flipbook-{{ guid }}" class="magazine">
                            {% for page in page_list %}
                                <div id="{{ forloop.counter }}" class="page zoomTarget" data-closeclick="true"
                                     data-targetsize="2.0"><img
                                        src="{{ page.page_file.url }}"
                                        {% if height and width %}style="width: {{ width|divide:2 }}px; height: {{ height }}px;"{% endif %}/>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
{#                <button type="button" class="btn btn-primary"#}
{#                        id="id-reset-panzoom-{{ guid }}">{% trans "Reset" %}</button>#}
                <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        // Parses args
        var height = '{{ height|escapejs }}';
        var width = '{{ width|escapejs }}';
        width = parseInt(width) || 800;
        height = parseInt(height) || 533;

        var height_vp = height + 128;
        var width_vp = width + 64;

        // Resizes the viewport
        var $modal = $('#id-modal-{{ guid }} > .modal-dialog');
        $modal.css('width', String(width_vp) + 'px');
        $modal.css('height', String(height_vp) + 'px');

        // Displays the flipbook
        var $flipbook = $("#id-flipbook-{{ guid }}");
        $flipbook.turn({
            autoCenter: true,
            acceleration: true,
            width: width,
            height: height
        });

        // panzoom initialization
        $('.zoomTarget').panzoom({
            cursor: 'zoom-in',
            minScale: 0.5,
            maxScale: 3.0,
            disablePan: true,
            contain: true,
            $reset: $("a.id-reset-panzoom-{{ guid }}, button.id-reset-panzoom-{{ guid }}")
        }).on('click', function(event){
            $(this).panzoom('zoom');
{##}
{#            event.stopPropagation();#}
        });


    });
</script>
