{% extends 'base.html' %}
{% load core_tags %}

{% block title %}Listen{% endblock %}

{% block custom_css %}
<link type="text/css" href="{{ STATIC_URL }}jplayer_skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
{% endblock %}

{% block custom_js %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer/jplayer.playlist.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_1",
                cssSelectorAncestor: "#jp_container_1"},
            [
                {
                    artist:"El Supernaut",
                    title:"Wonderman from Initiö",
                    mp3:"{{ STATIC_URL }}music/1.mp3"
                },
                {
                    artist:"Los Twang! Marvels",
                    title:"Sea of Glory",
                    mp3:"{{ STATIC_URL }}music/2.mp3"
                },
                {
                    artist:"El Ray",
                    title:"Cherry Cheeks",
                    mp3:"{{ STATIC_URL }}music/3.mp3"
                },
                {
                    artist:"The Coffin Daggers",
                    title:"Borgo Pass",
                    mp3:"{{ STATIC_URL }}music/4.mp3"
                },
                {
                    artist:"Aqualads",
                    title:"Washout",
                    mp3:"{{ STATIC_URL }}music/5.mp3"
                },
                {
                    artist:"The TomorrowMen",
                    title:"Momentium",
                    mp3:"{{ STATIC_URL }}music/6.mp3"
                },
                {
                    artist:"The Phantom Four",
                    title:"El Palmero",
                    mp3:"{{ STATIC_URL }}music/7.mp3"
                },
                {
                    artist:"Atomic Mosquitos",
                    title:"Mosquito Royale",
                    mp3:"{{ STATIC_URL }}music/8.mp3"
                },
                {
                    artist:"Los Kahunas",
                    title:"7 Mares",
                    mp3:"{{ STATIC_URL }}music/9.mp3"
                },
                {
                    artist:"The Bambi Molesters",
                    title:"As the Dark Wave Swells",
                    mp3:"{{ STATIC_URL }}music/10.mp3"
                },
                {
                    artist:"The Barbwires",
                    title:"La Caja del Muerto",
                    mp3:"{{ STATIC_URL }}music/11.mp3"
                },
                {
                    artist:"Frankie & the Pool Boys",
                    title:"Ewa on the Beach",
                    mp3:"{{ STATIC_URL }}music/12.mp3"
                },
                {
                    artist:"The Thunderchiefs",
                    title:"Estratosfera",
                    mp3:"{{ STATIC_URL }}music/13.mp3"
                },
                {
                    artist:"The Secret Samurai",
                    title:"The Khazar",
                    mp3:"{{ STATIC_URL }}music/14.mp3"
                },
                {
                    artist:"The Madeira",
                    title:"Witch Doctor",
                    mp3:"{{ STATIC_URL }}music/15.mp3"
                },
                {
                    artist:"The Eliminators",
                    title:"Walking Tall",
                    mp3:"{{ STATIC_URL }}music/16.mp3"
                },
                {
                    artist:"Surfer Joe",
                    title:"North Swell",
                    mp3:"{{ STATIC_URL }}music/17.mp3"
                },
                {
                    artist:"The Deadbeats",
                    title:"Karabasan",
                    mp3:"{{ STATIC_URL }}music/18.mp3"
                },
                {
                    artist:"Daikaiju",
                    title:"Laser Runner",
                    mp3:"{{ STATIC_URL }}music/19.mp3"
                },
                {
                    artist:"The Anacondas",
                    title:"Floating Home",
                    mp3:"{{ STATIC_URL }}music/20.mp3"
                }
            ],
            {
                playlistOptions: {
                    enableRemoveControls: true,
                    autoPlay: false
                },
                swfPath: "{{ STATIC_URL }}js/jplayer",
                solution:"html, flash",
                oggSupport: false,
                supplied: "mp3"
            });
        });
    </script>
{% endblock %}

{% block content %}
{% navbar 'music' %}
<h1>Listen</h1>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-playlist">
        <div class="jp-gui jp-interface">
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>
                <div class="jp-duration"></div>
            </div>
            <ul class="jp-toggles">
                <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
            </ul>
        </div>
        <div class="jp-playlist">
            <ul>
                <li></li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>
{% endblock %}