var g_volume = 80;
var g_link = rad_stations[0][0];
var is_play = false;
var g_text_color = '#ffffff';
var g_playimg = g_pause_white;
var g_pauseimg = g_pause_white;
var g_soundimg = g_sound_white;
var g_rad_width = 'responsive';
var g_rad_width_px = 330;

var g_play_white = "../files/radio/rr2.png";
var g_play_black = "../files/radio/rr2.png";

var g_pause_white = "../files/radio/rr3.png";
var g_pause_black = "../files/radio/rr3.png";

var g_sound_white = "../files/radio/rr4.png";
var g_sound_black = "../files/radio/rr4.png";

var g_radiologo = "https://rp16.ru/";
var g_radiologowhite = "https://rp16.ru/";

var g_playimg = g_pause_white;
var g_pauseimg = g_pause_white;
var g_soundimg = g_sound_white;

var rad_plogo = g_radiologo;

if (rad_logo=='black'){
	rad_plogo = g_radiologowhite;
	g_playimg = g_play_white;
	g_pauseimg = g_pause_white;
	g_soundimg = g_sound_white;
	g_text_color = '#ffffff';
}else{
	rad_plogo = g_radiologo;
	g_playimg = g_play_black;
	g_pauseimg = g_pause_black;
	g_soundimg = g_sound_black;
	g_text_color = '#2c2c2c';
}

	
var block_play = '<div id="rad_block_play"><img src="'+g_playimg+'" id="rad_play_btn" onclick="rad_playstop(); return false;" align="absmiddle"></div>';
	
if (rad_stations[0][2]!=undefined){
	var img = rad_stations[0][2];
}else{
	var img = 'noradio';
}


var select = '<div style="color: '+g_text_color+';" onclick="return rad_show_stations();" id="rad_select" align="left"><div id="rad_stationname">' + '<img src="https://radiobells.com/stations/' + img +'_70.jpg" align="absmiddle" id="rad_select_main_image"><span id="rad_select_main_text">' + rad_stations[0][1] + '</span></div><div id="rad_dropdown">▼</div></div>';
	select += '<div id="rad_list" style="display: none;" align="left">';

	for (var i=0; i<rad_stations.length; i++){
		if (rad_stations[i][2]!=undefined){
			var img = rad_stations[i][2];
		}else{
			var img = 'noradio';
		}
		select += '<div data-url="' + rad_stations[i][0] + '" data-img="' + img + '" align="left" onclick="return rad_selectthis(this);" onmouseover="this.style.backgroundColor = \'#434242\'" onmouseout="this.style.backgroundColor = \'#2c2c2c\'" class="rad_selection">';

		if (rad_stations[i][2]!=undefined){
	        select += '<img src="https://radiobells.com/stations/' +rad_stations[i][2] +'_70.jpg" class="rad_select_small_image" align="absmiddle">';
	    }else{
	    	select += '<img src="https://radiobells.com/stations/noradio_70.jpg" class="rad_select_small_image" align="absmiddle">';
	    }
	    select += rad_stations[i][1] + '</div>'
	}
	select += '</div>';

var block_select = '<div id="rad_block_select">'+select+'</div>';

var block_volume = '<div id="rad_block_volume"><img src="'+g_soundimg+'" id="rad_sound_btn" onclick="rad_show_volume(); return false;" align="absmiddle">'+
	'<div id="rad_volume" style="display: none;" align="left">' +
		'<div id="rad_volume_range" onmousemove="volumemove(event);"><div style="height: '+g_volume+'px; " id="rad_volume_bar"></div></div>'+
	'</div>'+
	'</div>';

var block_logo = '<div id="rad_block_logo" align="center"><a href="https://rp16.ru/" target="_blank" title="Крутой сайт!"><img src="'+rad_plogo+'" border="0" id="rad_logo" alt="Крутой сайт!"></a></div>';

if (rad_width == 'responsive'){
	var style_rad_width = '100%';
}else{
	var style_rad_width = g_rad_width_px+'px';
}


document.getElementById('radiobells_container').innerHTML = '<div style="background-color: '+rad_backcolor+'; width: '+style_rad_width+';" id="rad_player"><div style="height: 28px;">' + block_play + block_select + block_volume +'</div></div>';

var g_rad_player_width = document.getElementById("rad_player").clientWidth;



if (g_rad_player_width<=300){
    document.getElementById('rad_select_main_text').style.display = 'none';
    document.getElementById('rad_stationname').style.width = '65px';
    document.getElementById('rad_select').style.width = '80px';
    document.getElementById('rad_block_play').style.marginRight = '0px';
    document.getElementById('rad_list').style.marginLeft = '-52px';
    document.getElementById('rad_block_volume').style.marginRight = '0px';
    document.getElementById('rad_block_volume').style.marginLeft = '0px';
}else{
    document.getElementById('rad_select_main_text').style.display = 'inline-block';
    document.getElementById('rad_stationname').style.width = '155px';
    document.getElementById('rad_select').style.width = '179px';
    document.getElementById('rad_block_play').style.marginRight = '10px';
    document.getElementById('rad_list').style.marginLeft = '9px';
    document.getElementById('rad_block_volume').style.marginRight = '10px';
    document.getElementById('rad_block_volume').style.marginLeft = '4px';
}

var g_audio = document.createElement('audio');
	
document.onreadystatechange = function () {
	if (document.readyState == "complete") {
		if (rad_autoplay){
			rad_loadmusic();
		}
	}
}

function rad_selectthis(t){
	document.getElementById('rad_list').style.display='none';
	g_link = t.getAttribute('data-url');
	document.getElementById('rad_select_main_text').innerHTML = t.innerText;
    document.getElementById('rad_select_main_image').setAttribute('src','https://radiobells.com/stations/'+t.getAttribute('data-img')+'_70.jpg');
	rad_loadmusic();
	return false;
}

function rad_show_stations(){
  	var win_height = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;

  	if (win_height - document.getElementById('rad_player').getBoundingClientRect().bottom > 220){
  		document.getElementById('rad_list').style.marginTop='48px';
  	}else{
  		document.getElementById('rad_list').style.marginTop='-'+(rad_stations.length*35)+'px';
  	}


	if (document.getElementById('rad_list').style.display=='none'){
		document.getElementById('rad_list').style.display='block';
	}else{
		document.getElementById('rad_list').style.display='none';
	}
	return false;
}

function rad_show_volume(){
	console.log(1);
	var win_height = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;

  	if (win_height - document.getElementById('rad_player').getBoundingClientRect().bottom > 220){
  		g_volume_position = "bottom";
  		document.getElementById('rad_volume').style.marginTop='12px';
  		document.getElementById('rad_volume_range').style.verticalAlign='top';
  	}else{
  		g_volume_position = "top";
  		document.getElementById('rad_volume').style.marginTop='-164px';
  		document.getElementById('rad_volume_range').style.verticalAlign='bottom';
  	}


	if (document.getElementById('rad_volume').style.display=='none'){
		document.getElementById('rad_volume').style.display='block';
	}else{
		document.getElementById('rad_volume').style.display='none';
	}
	return false;
}

function rad_loadmusic(){
	g_audio.src = g_link;
	g_audio.volume = g_volume/100;
	g_audio.play();
	is_play = true;
	document.getElementById('rad_play_btn').src = g_pauseimg;
}

function rad_playstop(){
	if (is_play){
		g_audio.pause();
		document.getElementById('rad_play_btn').src = g_playimg;
		is_play = false;
	}else{
		g_audio.src = g_link;
		g_audio.volume = g_volume/100;
		g_audio.play();
		document.getElementById('rad_play_btn').src = g_pauseimg;
		is_play = true;
	}
}

var g_volume_position = "top";

function volumemove(event){
	if (g_volume_position == "bottom"){
		var top = document.getElementById("rad_volume_range").getBoundingClientRect().top;
		if(window.event)
			event = window.event;
		var mousey = event.clientY - top;
		var newvol = Math.floor(mousey);
	}else{
		var bottom = document.getElementById("rad_volume_range").getBoundingClientRect().bottom;
		if(window.event)
			event = window.event;
		var mousey = bottom - event.clientY;
		var newvol = Math.floor(mousey);
	}
	document.getElementById("rad_volume_bar").style.height = newvol+'px';
	g_volume = newvol;
	g_audio.volume = g_volume/100;
}