bgneal@6: {% extends 'base.html' %}
bgneal@6: {% load core_tags %}
bgneal@6: {% block title %}Bands{% endblock %}
bgneal@9: 
bgneal@9: {% block custom_css %}
bgneal@9: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css">
bgneal@9: {% endblock %}
bgneal@9: {% block custom_js %}
bgneal@9: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
bgneal@9: <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
bgneal@9: <script type="text/javascript">
bgneal@9: 	$(function() {
bgneal@9:       $("#accordion").accordion({active: false});
bgneal@9: 	});
bgneal@9: </script>
ckridgway@47: <style>
ckridgway@47:    .hero-unit { height: 200px; }
ckridgway@47: </style>
bgneal@9: {% endblock %}
bgneal@9: 
bgneal@6: {% block content %}
bgneal@6: {% navbar 'bands' %}
bgneal@9: 
ckridgway@47: <div class="hero-unit">
ckridgway@47:    <h1>Band Name Here</h1>
ckridgway@47:    <span>
ckridgway@47:    Click on a band logo below...  TODO: Until a band is selected just cycle through the bands over time.
ckridgway@47:    </span>
ckridgway@47:    <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p>
bgneal@9: </div>
bgneal@9: 
ckridgway@47: <div class="row">
ckridgway@47:    {% for band in object_list %}
ckridgway@47:       <div class="span-one-third">
ckridgway@47:          <div id="{{ band.name }}" class="band-logo">
ckridgway@47:             <img src="http://placehold.it/300x100&text={{ band.name|escapejs }}">
ckridgway@47:             <span class="band-name" hidden="hidden">{{ band.name }}</span>
ckridgway@47:             <span class="band-notes" hidden="hidden">{{ band.notes|linebreaksbr }}</span>
ckridgway@47:             <span class="band-url" hidden="hidden">{{ band.url }}</span>
ckridgway@47:          </div>
ckridgway@47:       </div>
ckridgway@47:    {% endfor %}
ckridgway@47: </div>
ckridgway@47: 
ckridgway@47: <script>
ckridgway@47:    $("div.band-logo").click(function() {
ckridgway@47:       $("div.hero-unit").find("h1").text($(this).find("span.band-name").text());
ckridgway@47:       $("div.hero-unit").find("span").text($(this).find("span.band-notes").text());
ckridgway@47:       $("div.hero-unit").find("a").attr("href", $(this).find("span.band-url").text());
ckridgway@47:    })
ckridgway@47: </script>
ckridgway@47: 
bgneal@6: {% endblock %}