{% 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/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jplayer.playlist.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_1",
                cssSelectorAncestor: "#jp_container_1"},
            [
                {
                    title:"Cro Magnon Man",
                    mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
                },
                {
                    title:"Your Face",
                    mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3"
                },
                {
                    title:"Cyber Sonnet",
                    mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3"
                },
                {
                    title:"Tempered Song",
                    mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
                },
                {
                    title:"Hidden",
                    mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3"
                },
                {
                    artist:"Eddie Vedder",
                    title:"Without You",
                    mp3:"{{ STATIC_URL }}music/1.mp3"
                },
                {
                    artist:"Johnny Flynn",
                    title:"Barnacled Warship",
                    mp3:"{{ STATIC_URL }}music/2.mp3"
                }
            ],
            {
                playlistOptions: {
                    enableRemoveControls: true,
                    autoPlay: false
                },
                swfPath: "{{ STATIC_URL }}js",
                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 %}