{% load sekizai_tags %}
{% addtoblock "css" %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}cmsplugin_filer_audio/style.css" />{% endaddtoblock %}
{% addtoblock "js" %}<script src="{{STATIC_URL}}cmsplugin_filer_audio/flowplayer/flowplayer-3.2.10.min.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
    $(document).ready(function(){
        flowplayer("cmsplugin_filer_audio-player{{instance.pk}}",
                   "{{STATIC_URL}}cmsplugin_filer_audio/flowplayer/flowplayer-3.2.11.swf", {
            // fullscreen button not needed here
            plugins: {
                controls: {
                    fullscreen: false,
                    height: 30,
                    autoHide: false
                }
            },

            clip: {
                autoPlay: {{instance.autostart|yesno:"true,false"}},
            }

        });
    });
</script>
{% endaddtoblock %}

<div class="audio-player">
    <p>{{instance.title}}</p>
    <a href="{{instance.audiofile.url}}"
       id="cmsplugin_filer_audio-player{{instance.pk}}">
    </a>
</div>