{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block content %}


        <div class="reveal" id="comic_box">
			<div class="slides">
                {% for page in pages %}
				<section><img data-src="{% url "get_image" nav.cur_path page.index %}" class=" w-100" onclick="Reveal.next()"></section>
                {% endfor %}
			</div>
		</div>

{% endblock %}

{% block script %}
    <script>
        Reveal.initialize({
            controls: false,
            hash: true,
            width: "100%",
            height: "100%",
            margin: 0,
            minScale: 1,
            maxScale: 1,
            disableLayout: true,
            keyboard: false,
            touch: false,
            transition: 'slide',
        });
        Reveal.setState({indexh: {{ status.last_read_page }} });
        Reveal.addEventListener( 'slidechanged', function( event ) {
            // event.previousSlide, event.currentSlide, event.indexh, event.indexv
            document.getElementsByClassName('present')[0].scrollIntoView({behavior: 'smooth'})
            $.ajax({url: "/comic/set_page/{{nav.cur_path}}/" + event.indexh + "/"})
        } );
        $(document).keydown(function(e) {
            switch(e.which) {
                case 37: // left
                    if (Reveal.isFirstSlide()){
                        window.location = "{% url "read_comic" nav.prev_path %}"
                    } else {
                        Reveal.prev();
                    }
                break;

                case 38: // up
                    window.scrollTo({
                      top: window.scrollY-window.innerHeight*.7,
                      left: 0,
                      behavior: 'smooth'
                    });
                break;

                case 39: // right
                    if (Reveal.isLastSlide()){
                        window.location = "{% url "read_comic" nav.next_path %}"
                    } else {
                        Reveal.next()
                    }
                break;

                case 40: // down
                    window.scrollTo({
                      top: window.scrollY+window.innerHeight*.7,
                      left: 0,
                      behavior: 'smooth'
                    });
                break;

                default: return; // exit this handler for other keys
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        });

        var hammertime = new Hammer(document.getElementById('comic_box'), {});
        hammertime.on('swipeleft', function (ev) {
            if (Reveal.isLastSlide()){
                window.location = "{% url "read_comic" nav.next_path %}"
            } else {
                Reveal.next()
            }
        })
        hammertime.on('swiperight', function (ev) {
            if (Reveal.isFirstSlide()){
                window.location = "{% url "read_comic" nav.prev_path %}"
            } else {
                Reveal.prev();
            }
        })
        hammertime.on('tap', function (ev) {
            if (Reveal.isLastSlide()){
                window.location = "{% url "read_comic" nav.next_path %}"
            } else {
                Reveal.next()
            }
        })
    </script>
{% endblock %}