{% if debug %}<!-- django_turnit/snippets/turnit.html -->{% endif %}
{% load staticfiles turnit_tags %}
<script type="text/javascript" src="{% static 'js/turn.js/turn.js' %}"></script>
<script type="text/javascript" src="{% static 'js/turn.js/zoom.js' %}"></script>
<div id="zoom-viewport">
    <div id="id-flipbook-{{ guid }}">
        {% for page in page_list %}
            <div><img
                    src="{{ page.page_file.url }}"
                    {% if width %}width="{{ width|default:800|divide:2 }}"{% endif %}
                    {% if height %}height="{{ height|default:533 }}"{% endif %}
                    {% if height and width %}style="width: {{ width|divide:2 }}px; height: {{ height }}px;"{% endif %}/>
            </div>
        {% endfor %}
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var height = '{{ height|escapejs }}';
        var width = '{{ width|escapejs }}';
        width = parseInt(width) || 800;
        height = parseInt(height) || 533;
        var $flipbook = $("#id-flipbook-{{ guid }}");
        $flipbook.turn({
            autoCenter: true,
            acceleration: true,
            width: width,
            height: height
        });
        $("#zoom-viewport").zoom({
            flipbook: $flipbook,
            max: 3
        });
    });
</script>