<!--PLAYER - Блок расположения плеера. Плееры: default, lite, energy или custom (свой плеер) (можно несколько) -->
<div id="my_player" class="my_player" data-player="energy" data-skin="blue" data-width=200 data-autoplay=1 data-volume=70 data-streamurl="https://myradio24.org/45349"></div>
<!--END PLAYER-->

<!--VISUALIZER - Блок расположения визуализации. Цвета: rgb, red, blue или green  (можно несколько) -->
<canvas class="my_visualizer" width=320 height=128 data-size=64 data-revert=0 data-color="rgb"></canvas>
<!--END VISUALIZER-->

<!--INFOS - Информация о радио -->
<div data-myinfo="logo" style="width:300px; height:80px; background-size:cover;"></div>
<div data-myinfo="img" style="width:300px; height:300px; background-size:cover;"></div>
<br>
<b data-myinfo="song"></b><br>
Следует: <span data-myinfo="nextsong"></span><br>
<br>
<b>🎧</b> <b data-myinfo="listeners"></b> <span data-myinfo="isonline"></span> - <span data-myinfo="kbps"></span> kbps
<a href="//myradio24.com/listen.php?port=45349" target="_blank"><img src="//myradio24.com/img/wmp.gif" border="0" title="WMP" /></a>
<a href="#" onclick="window.open('//myradio24.com/player.php?port=45349','player','width=300,height=30'); return false;"><img src="//myradio24.com/img/open.gif" title="открыть в новом окне"/></a>
<br>
Вещает: <b data-myinfo="djname"></b><br>
<div data-myinfo="htmlavatar"></div>
<a href="#" target="_blank" data-myinfo="url"></a><br>
<br><br>
<!--END INFOS-->

<!--RANKS -->
<b>Статистика DJ's</b><br><br>
<div data-myinfo="htmlrank"></div>
<br><br>

<!--END RANKS-->

<!--SONGS -->
<b>Последние песни</b><br><br>
<div class="my_lastsongs" data-revert=1 style="display:inline-block;">
	<div class="my_lastsonghtml" style="display:none;">
<div style="text-align:left; margin:3px;">
	<img src="//myradio24.com/%songcover%" style="width:45px; height:45px; border-radius:4px; vertical-align:middle;"> &nbsp; 
	%songtime% &nbsp;
	<a href="https://www.youtube.com/results?search_query=%songencode%" target="_blank" title="Найти на YouTube">%song%</a> 
</div>
	</div>
</div>
<br><br>
<!--END SONGS-->

<!--CHAT - Блок расположения чата. (тестируется) -->
<div id="my_chat"></div>
<!--END CHAT-->

<!--TABLE - Блок расположения стола заказов. -->
<b>Стол заказов</b> (в очереди <b class=my_table_turn>0</b>)<br><br>
<style>#my_table_on, #my_table_auto {display:none;}</style>
<div id=my_table_off>Сейчас заказы не принимаются.</div>
<div id=my_table_auto>
	<a href="https://myradio24.com/?to=table&port=45349" target=_blank><input type=button value="Заказать музыку к исполнению"></a>
</div>
<div id=my_table_on>
	<form id=my_table_form action="" method=post accept-charset="UTF-8">	
<input type=text id=my_table_from maxlength=30 value="" placeholder="От кого*">
<input type=text id=my_table_for maxlength=30 value="" placeholder="Для кого">
<br>
<input type=text id=my_table_artist maxlength=50 value="" placeholder="Исполнитель*">
<input type=text id=my_table_song maxlength=50 value="" placeholder="Название трека*">
<br>
<textarea id=my_table_comment cols=50 rows=3 maxlength=500 placeholder="Ваш комментарий"></textarea><br>
* - поля обязательные для заполнения<br>
<input type=submit value="Заказать музыку к исполнению">
	</form>
</div><br>
<!--END TABLE-->

<!--JS - Функция для детальной настройки обновляемой информации. -->
<script>
var my_init_updateinfo=function(info) {
	//ОТОБРАЗИМ стол заказов, если включен (иначе скроем)
	if($("#my_table_on").length) {
$("#my_table_turn, .my_table_turn").html(info.turntable);
$("#my_table_off").css('display', (info.enabletable==0?"block":"none") );	
$("#my_table_on").css('display', (info.enabletable==1?"block":"none") );	
$("#my_table_auto").css('display', (info.enabletable==2?"block":"none") );
	}
	//ОБНОВИМ информационные блоки
	info.isonline="<font color=red>оффлайн</font>"; 
	if(info.online==1) info.isonline="<font color=green>онлайн</font>"; 
	info.nextsong=info.nextsongs[0];
	info.htmllisteners=info.listeners?"слушателей: "+info.listeners:"";
	info.htmlimg="<img src=//myradio24.com/"+info.img+" width=300 border=0>";
	info.htmllogo=""; if(info.logo) info.htmllogo="<img src='//myradio24.com/"+info.logo+"'>";
	info.htmlavatar=""; if(window.my_avatars && Array.isArray(my_avatars)) { if(my_avatars[info.djname]) info.htmlavatar=my_avatars[info.djname]; else if(my_avatars['']) info.htmlavatar=my_avatars['']; }
	//рейтинг ведущих
	var rank=info.rank; var htmlrank="";
	if(rank && rank.length>0) {rank.sort(function(a,b) {return b[1]-a[1];}); var htmlrank="<table class='my_radio_width'><tr><td>Ведущий</td><td>Рейтинг</td><td>Вещаний</td><td>Онлайн</td></tr>"; for(var i=0;i<rank.length;i++) {htmlrank+="<tr><td>DJ "+rank[i][0]+"</td><td align=center>"+rank[i][1]+"</td><td align=center>"+rank[i][3]+"</td><td align=right>"+rank[i][2]+" часов</td></tr>";} htmlrank+="</table>";}
	else htmlrank="Ничего не найдено.";
	info.htmlrank=htmlrank;
	//последние песни
	var songs=info.songs; var htmlsongs=""; 
	//console.dir(songs);
	if(songs && songs.length>0) {for(var i=0;i<songs.length;i++) {htmlsongs="<tr><td>"+songs[i][0]+" - "+songs[i][1]+"</td></tr>"+htmlsongs;} htmlsongs="<table class='my_radio_width'>"+htmlsongs+"</table>";}
	else htmlsongs="Ничего не найдено.";
	info.htmlsongs=htmlsongs;
	//вставка переменных в data-myinfo
	$('[data-myinfo]').each(function() {
var key=$(this).data('myinfo');
if(key && info[key]) {
	if(key=='img') $(this).css('background-image','url('+info[key]+')');
	else $(this).html(info[key]); 
}
	});
	//произведем замену переменных и выведем содержимое информера
	var objs=document.querySelectorAll(".my_info"); if(!objs.length) return; 
	if(!window.my_infohtml) my_infohtml={}; 
	for(var k=0;k<objs.length; k++) {
if(!my_infohtml[k]) {my_infohtml[k]=objs[k].innerHTML; objs[k].style.visibility="visible";}
var html=my_infohtml[k];
for(var i in info) {html=html.replace(new RegExp("%"+i+"%","g"),info[i]);}
objs[k].innerHTML=html;
	}
}
</script>
<!--END JS-->

<!--Этот скрипт должен располагаться в самом низу после всех блоков и не должен повторяться на странице. -->
<script src="//myradio24.com/player/player.js?v3.17" data-port="45349" data-interval=15 data-vmid=0></script>