{% 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">
{% 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">
	$(function() {
      $("#accordion").accordion({active: false});
	});
</script>
<style>
   .hero-unit { height: 200px; }
</style>
{% endblock %}

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

<div class="hero-unit">
   <h1>Band Name Here</h1>
   <span>
   Click on a band logo below...  TODO: Until a band is selected just cycle through the bands over time.
   </span>
   <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p>
</div>

<div class="row">
   {% for band in object_list %}
      <div class="span-one-third">
         <div id="{{ band.name }}" class="band-logo">
            <img src="http://placehold.it/300x100&text={{ band.name|escapejs }}">
            <span class="band-name" hidden="hidden">{{ band.name }}</span>
            <span class="band-notes" hidden="hidden">{{ band.notes|linebreaksbr }}</span>
            <span class="band-url" hidden="hidden">{{ band.url }}</span>
         </div>
      </div>
   {% endfor %}
</div>

<script>
   $("div.band-logo").click(function() {
      $("div.hero-unit").find("h1").text($(this).find("span.band-name").text());
      $("div.hero-unit").find("span").text($(this).find("span.band-notes").text());
      $("div.hero-unit").find("a").attr("href", $(this).find("span.band-url").text());
   })
</script>

{% endblock %}