--- a/gpp/templates/podcast/detail.html	Sat Mar 26 21:30:36 2011 +0000
+++ b/gpp/templates/podcast/detail.html	Sun Mar 27 01:51:18 2011 +0000
@@ -1,6 +1,27 @@
 {% extends 'podcast/base.html' %}
 {% load url from future %}
 {% block title %}Podcast: {{ podcast.title }}{% endblock %}
+{% block custom_css %}
+<link type="text/css" href="{{ STATIC_URL }}js/jplayer/skins/blue.monday/jplayer.blue.monday.css" rel="stylesheet" />
+{% endblock %}
+{% block custom_js %}
+<script type="text/javascript" src="{{ STATIC_URL }}js/jplayer/jquery.jplayer.min.js"></script>
+
+<script type="text/javascript">
+//<![CDATA[
+    var jplayer_media = {{ jplayer_media|safe }};
+    $(document).ready(function(){
+      $("#jquery_jplayer_1").jPlayer({
+        ready: function () {
+          $(this).jPlayer("setMedia", jplayer_media);
+        },
+        swfPath: "{{ STATIC_URL }}js/jplayer",
+        supplied: "{{ jplayer_supplied }}"
+      });
+    });
+//]]>
+</script>
+{% endblock %}
 {% block podcast-content %}
 <div class="breadcrumbs">
    <a href="{% url 'podcast.views.index' %}">Podcast Index</a> &gt;&gt; {{ podcast.title }}
@@ -8,6 +29,40 @@
 <h3>{{ podcast.pubdate|date:"F d, Y" }} &bull; {{ podcast.title }}</h3>
 <h4>{{ podcast.subtitle }}</h4>
 {{ podcast.summary|linebreaks }}
+
+<p>Listen:</p>
+<div id="jquery_jplayer_1" class="jp-jplayer"></div>
+  <div class="jp-audio">
+    <div class="jp-type-single">
+      <div id="jp_interface_1" class="jp-interface">
+        <ul class="jp-controls">
+          <li><a href="#" class="jp-play" tabindex="1">play</a></li>
+          <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
+          <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
+          <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
+          <li><a href="#" class="jp-unmute" tabindex="1">unmute</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-current-time"></div>
+        <div class="jp-duration"></div>
+      </div>
+      <div id="jp_playlist_1" class="jp-playlist">
+        <ul>
+           <li>{{ podcast.title }} - {{ podcast.subtitle }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+<br />
+<p> Or download:</p>
 <ul>
    <li>
    <a href="{{ podcast.enclosure_url }}">Download Now ({{ ext }})</a> &bull;