Rewritin onair player with JSON

panikweb_templates/templates/player/detail.html

@@ -5,8 +5,7 @@
 				<span class="control icon-volume-up resymbol huge"></span>
 				<span class="label">&nbsp;en direct</span>
 			</button>
-			<div id="WhatsOnAir">{% include "whatsonair.html" %}
-			</div>
+			<div id="WhatsOnAir"></div>
 			<audio id="DirectStreamPanik" class="hidden" tabindex="0" src="http://streaming.domainepublic.net:8000/radiopanik.ogg" controls="controls">
 			</audio>  
 			<ul class="inline metas small">
@@ -24,9 +23,16 @@
 					var timer = null, 
 					interval = 5000;
 					$('#WhatsOnAir').on('load',function(){
-						$(this).fadeOut().load('what').fadeIn();
-						/*$(this).load('test'});*/
-					});
+						var self = $(this);
+						self.fadeOut();
+						$.getJSON('onair.json', function(data) {
+							if(data.episode || data.emission){
+								self.html('<strong>'+data.emission.title+'<strong>'+'&nbsp;<span>'+data.emission.title+'<span>');
+							}
+							else{self.html('<strong>Probably Non-Stop<strong>');}
+							self.fadeIn();
+						});
+					}).trigger('load');
 					$('#RefreshWhatsOnAir').on('activate',function(e){
 						$(this).addClass('spinning');
 						$('#WhatsOnAir').trigger('load');
@@ -43,8 +49,6 @@
 					});
 					$("[data-audio-id]").click(function(e) {
 						e.preventDefault();
-						// This next line will get the audio element
-						// that is adjacent to the link that was clicked.
 						var song = $('#'+$(this).attr('data-audio-id')).get(0);
 						if (song.paused){
 							song.play();$('#RefreshWhatsOnAir').trigger('activate');