{% extends 'base.html' %}
{% load cache cms_tags %}
{% block extrahead %}
<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script src="http://static.flowplayer.org/js/flowplayer-3.1.4.min.js"></script>
<style>
a:active {  outline:none; }
:focus   { -moz-outline-style:none; }
/* container has a background image */
a.player {
        margin-top:10px;
        display:block;
        width:550px;
        height:350px;
        padding:0 0 0 100px;
        text-align:center;
        color:#fff;
        text-decoration:none;
        cursor:pointer;
}
/* splash image */
a.player img {
        margin-top:115px;
        border:0;
}
</style>
<script src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<script src="http://static.flowplayer.org/js/flowplayer.playlist-3.0.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/playlist.css"/>
<script>
$(function() {
        // setup scrolling for the playlist elements
        $("div.playlist").scrollable({
                items:'div.clips',
                vertical:true,
                next:'a.down',
                prev:'a.up'
        });

        $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf", {

                clip: {baseUrl: 'http://new.benvankleek.com'},
plugins: {
   controls: {
autoHide: 'always',
      timeColor: '#01DAFF',
      buttonColor: '#5F747C',
      sliderColor: '#000000',
      volumeSliderColor: '#000000',
      bufferColor: '#445566',
      durationColor: '#ffffff',
      tooltipColor: '#5F747C',
      bufferGradient: 'none',
      progressColor: '#112233',
      sliderGradient: 'none',
      timeBgColor: '#555555',
      buttonOverColor: '#728B94',
      backgroundColor: '#222222',
      tooltipTextColor: '#ffffff',
      volumeSliderGradient: 'none',
      backgroundGradient: 'none',
      borderRadius: '10',
      progressGradient: 'none',
      opacity: 0.5
   }
}

        // use playlist plugin to enable playlist items work as movie clips
        }).playlist("div.clips");
});
</script>
{% endblock %}
{% block content %}
<div class="reel">
<div style="float:left;width:190px;margin-top:50px">

        <a class="go up"></a>

        <div class="playlist">

                <div class="clips low">
                        {% placeholder videos %}
                </div>

        </div>

        <a class="go down"></a>

</div>


<a id="player" class="player " style="float:left;margin-top:50px">
        <img src="http://flowplayer.org/img/player/btn/play.png" />
</a>
<br clear="all" />
</div>
{% endblock %}