{% extends 'base.html' %}
{% load core_tags %}
{% block title %}Bands{% endblock %}

{% block custom_css %}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="{{ STATIC_URL }}js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css">
<style>
   .hero-unit h1 { font-size: 50px; }
</style>
{% endblock %}
{% block custom_js %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bxslider/jquery.bxSlider.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#slider1').bxSlider({
         mode: 'fade',
         speed: 500,
         auto: true,
         autoControls: true,
         autoHover: true,
         randomStart: true,
         pager: true,
         pagerType: 'full',
         wrapperClass: 'bands-slider-wrap'
      });

      $("a.band-image").fancybox({
         'transitionIn' :  'elastic',
         'transitionOut'   :  'elastic',
         'speedIn'      :  600,
         'speedOut'     :  200,
         'overlayShow'  :  false
      });
   });
</script>
{% endblock %}

{% block content %}
{% navbar 'bands' %}

<div class="hero-unit">
   <div id="slider1">
      {% for band in object_list %}
         <div>
            <div class="row">
               <div class="span4">
                  {% if band.asset_prefix %}
                     <a class="band-image" href="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_large.jpg">
                        <img src="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_small.jpg" alt="{{ band.name }}" title="View {{ band.name }} full size" />
                     </a>
                  {% else %}
                     <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
                  {% endif %}
               </div>
               <div class="span9">
                  <h1>{{ band.name }}</h1>
                  <br/>
                  <span>{{ band.notes }}</span>
                  {% if band.url %}
                     <p style="margin-top:1em"><a class="btn default bns" href="{{ band.url }}">Visit Website</a></p>
                  {% endif %}
               </div>
            </div>
         </div>
      {% endfor %}
   </div>
</div>

{% endblock %}