{% extends "page_template.html" %}
{% block pagetitle%}<A href="/exercises?exid={{exercise.name}}">{{extitle}}</A> : Videos{% endblock pagetitle %}
{% block pagescript %}
<style>
    #youtube_blocked {
        visibility: hidden;
        position: absolute;
        left: -9999px;
        color: red;
        font-weight: bold;
        clear: both;
        padding-top: 1em;
    }
</style>
<script type="text/javascript">

function changeVideo(key, fFlvVideo)
{
    if (fFlvVideo)
        $("#flvVideo_div").html(dictAlternateEmbeds[key]);
    else
        $("#idOVideo_div").html(dictYouTubeEmbeds[key]);

    $("#video_key").val(key);
{% if user %}
    VideoStats.player = null;
    VideoStats.prepareAlternativePlayer();
    VideoStats.startLoggingProgress();
{% endif %}
}

{% if user %}
    $(function(){VideoStats.startLoggingProgress();});
{% endif %}

$(function(){
    $('<img width=0 height=0>').error(function() {
       $("#youtube_ok").hide();
       $("#youtube_blocked").css("visibility", "visible").css("left", "0px").css("position", "relative");
       VideoStats.prepareAlternativePlayer(); // If YouTube is hidden, use the flv player for statistics
    }).attr('src', 'http://www.youtube.com/favicon.ico?' + Math.random()).appendTo('body');
});
</script>
{% endblock pagescript %}
{% block pagecontent %}

<script>
    var dictYouTubeEmbeds = {};
    var dictAlternateEmbeds = {};
</script>

<div id="youtube_blocked">
    {% if first_video %}
      {% for exercise_video in exercise_videos %}
      <P>
        <script>
            dictYouTubeEmbeds['{{exercise_video.video.key}}'] = '{% filter escapejs %}{% youtube_player_embed exercise_video.video.youtube_id %}{% endfilter %}';
            dictAlternateEmbeds['{{exercise_video.video.key}}'] = '{% filter escapejs %}{% flv_player_embed video_path 800 480 exercise_video.video %}{% endfilter %}';
        </script>
    	<A href="javascript:changeVideo('{{exercise_video.video.key}}', true)"> [{{exercise_video.video.title}}] </a> &nbsp;&nbsp;
      {% endfor %}
    <P>
            <div id="flvVideo_div">
                {% flv_player_embed video_path 800 480 first_video %}
            </div>
    {% else %}
    <p>There are no videos for this exercise yet.</p>
    {% endif %}
</div>
<div id="youtube_ok">
    {% if first_video %}
      {% for exercise_video in exercise_videos %}
    	<P>
    	<A href="javascript:changeVideo('{{exercise_video.video.key}}', false)"> [{{exercise_video.video.title}}] </a> &nbsp;&nbsp;
      {% endfor %}
    <P>
    <div id="idOVideo_div">
        {% youtube_player_embed first_video.youtube_id %}
    </div>
    {% else %}
    <p>There are no videos for this exercise yet.</p>
    {% endif %}
</div>

<input type="hidden" id="video_key" value="{{ first_video.key }}" />
<A href="/exercises?exid={{exercise.name}}">Back to {{extitle}}</A>

{% endblock pagecontent %}