{% extends 'not_login/not_login_base.html' %}
{% load staticfiles %}
{% block content %}
	<article>
		<div class="introTab">
			<ul>
    			<li class="season">
    				<ul>
    					<li>
                            <a href="{% url 'not_login:ebook_catalog' 'winter' style %}">
                                {% if season == 'winter' %}
                                    <img src="{% static 'base/image/winter_c.png' %}">
                                {% else %}
                                    <img src="{% static 'base/image/winter_b.png' %}">
                                {% endif %}
                                <p>동복</p>
                            </a>
                        </li>
    					<li>
                            <a href="{% url 'not_login:ebook_catalog' 'summer' style %}">
                                {% if season == 'summer' %}
                                    <img src="{% static 'base/image/summer_c.png' %}">
                                {% else %}
                                    <img src="{% static 'base/image/summer_b.png' %}">
                                {% endif %}
                                <p>하복</p>
                            </a>
                        </li>
    				</ul>
    			</li>
    			<li class="type borderN">
    				<ul>
    					<li>
                            <a href="{% url 'not_login:ebook_catalog' season 'formal'%}">
                                {% if style == 'formal' %}
                                    <img src="{% static 'base/image/school_c.png' %}">
                                {% else %}
                                    <img src="{% static 'base/image/school_b.png' %}">
                                {% endif %}
                                <p>정복</p>
                            </a>
                        </li>
    					<li>
                            <a href="{% url 'not_login:ebook_catalog' season 'training' %}">
                                {% if style == 'training' %}
                                    <img src="{% static 'base/image/gym_c.png' %}">
                                {% else %}
                                    <img src="{% static 'base/image/gym_b.png' %}">
                                {% endif %}
                            <p>체육복</p>
                            </a>
                        </li>
    				</ul>
    			</li>
    		</ul>
		</div>
		<div class="flipbook-viewport" style="display: none">
			<div class="container">
				<div class="flipbook">
                    {% if season == 'winter' and style == 'formal' %}
					<div style="background-image: url({% static 'base/image/bro_front.jpg' %})"></div>
                    {% endif %}
                    {% for object in object_list %}
                        <div style="background-image: url({{ object.catalog_image.url }}">
                        </div>
                    {% endfor %}
				</div>
			</div>
        </div>
	</article>
	<footer>
	</footer>

{% endblock content %}
{% block extrascript %}
    <script type="text/javascript" src="{% static 'base/js/modernizr.2.5.3.min.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            yepnope({
                test : Modernizr.csstransforms,
                yep: ["/static/base/js/turn.js"],
                // nope: ['js/turn.html4.min.js'],
                both: ["/static/base/css/basic.css"],
                complete: loadApp
            });

        });

        loadApp =  function() {

            // Create the flipbook

            $('.flipbook').turn({
                    // Width

                    width:1075,

                    // Height

                    height:700,

                    // Elevation

                    elevation: 50,

                    // Enable gradients

                    gradients: true,

                    // Auto center this flipbook

                    autoCenter: true

            });
            $(".flipbook-viewport").show();
        };

    </script>
{% endblock extrascript %}