{% extends "demo.html" %}

{% load thumbnail %}

{% block headtitle %}Kinetic Lift Demo - {{ block.super }}{% endblock %}


{% block content %}
    <div class="row">
        <div class="span12">
            <div class="page-header">
                <h1>{{ animation.title}}</h1>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="span12">
        
            <div class="animation-area">

                {% for step in steps %}                    
                    <div class="key frame {% cycle 'odd' 'even' as frametoggle %}" id="key{{ step.order }}" style="width: {{ width }}%; 
                    {% if frametoggle == 'odd' %}
                        left: {{ step.get_left }}%;
                    {% else %}
                        left: {{ step.get_step_left }}%;
                    {% endif %}
                    ">
                        <img src="{{ step.image.url }}" style="max-width: 100%; max-height: 550px;" alt="" />
                    </div>
                {% endfor %}
            </div>
            
            <div class="captions">
                {% for step in steps %}
                    <div class="caption" id="caption{{ step.order }}" {% if forloop.first %}style="display: block;" {% endif %}>
                        {{ step.caption|linebreaks }}
                    </div>
                {% endfor %}
            </div>
            
            <div class="controls">
                <table>
                    <tr>
                        <td width="20%"><a href="#" title="Start" class="start"><i class="icon-fast-backward"></i></a></td>
                        <td width="20%"><a href="#" title="Previous" class="prev"><i class="icon-backward"></i></a></td>
                        <td width="20%">
                            <a href="#" title="Play" class="play"><i class="icon-play"></i></a>
                            <a href="#" title="Pause" class="pause"><i class="icon-pause"></i></a>
                        </td>
                        <td width="20%"><a href="#" title="Next" class="next"><i class="icon-forward"></i></a></td>
                        <td width="20%"><a href="#" title="End" class="end"><i class="icon-fast-forward"></i></a></td>
                    </tr>
                </table>   
            </div>
            
        </div>
    </div>
{% endblock %}