var create_audio = document.createElement('div');
create_audio.innerHTML='<div style="position: fixed; left: 0; top: 0px; right: 20px; background: white;  z-index: 9999; height: 150px   "><\/div><div id="audio"  style="position: fixed; left: 50%; width: 350px; margin-left: -175px; max-width: 100%; top: 20px; border-top: 10px solid white; background: white;  overflow: hidden; cursor: pointer; z-index: 9999;  "  onclick="if(document.getElementById(\'container\').innerHTML.length == 0){alert(\'You haven\\\' selected a piece of music yet\')}">\n\n\n\n<div id="container" ><\/div>\n\n<div id="check_time" style="position: absolute; left: 0; top: 25px; z-index: 2; color: white; font-family: arial; font-size: 14px; line-height: 22px"><\/div>\n\n<div id="duration" style="position: absolute; font-size: 14px; font-family: arial; line-height: 22px; background: transparent; color: white; z-index: 1; left: 15px"><\/div>\n\n<!-- background of audio -->\n<div style="background: #525456; width: 100%; height: 50px; border-radius: 20px;   " onclick="seek()" onmousemove="if(!isMobile){check_time()}" onmouseleave="hide_check()" ><\/div>\n\n<div style="position: absolute; background: #dedede; width: 100%; height: 5px; margin-top: -28px" onclick="seek()" onmousemove="if(!isMobile){check_time()}" >\n<div id="timer" style="position: absolute; background: red; width: 5px; height: 100%; "><\/div>\n<\/div>\n\n<div id="current_time" style="position: absolute; font-family: arial; font-size: 14px;  line-height: 22px; left: 80px; top: 0; background: transparent; color: white; "><\/div>\n\n<div style="position: relative; text-align: center; padding-top: 15px; background: white; font-family: arial; font-size: 15px; line-height: 22px;padding-bottom: 20px">\n<span style="display: inline-block; cursor: pointer; background: #525456; color: white; padding: 5px; border-radius: 5px" id="playbutton" onclick=" player.playVideo(); loading(); if(player.getPlayerState() === 1){alert(\'Music is already playing\')};" >Play<\/span>&nbsp;\n<span style="display: inline-block; cursor: pointer; background: #525456; color: white; padding: 5px; border-radius: 5px"  id="pausebutton" onclick=" player.pauseVideo()" >Pause<\/span>&nbsp;\n<span style="display: inline-block; cursor: pointer; background: #525456; color: white; padding: 5px; border-radius: 5px"  id="stopbutton" onclick="player.pauseVideo(); player.seekTo(0)   " >Stop<\/span>&nbsp;\n<span style="display: inline-block; cursor: pointer; background: #525456; color: white; padding: 5px; border-radius: 5px"  id="prev" onclick=" player.previousVideo(); " >Prev<\/span>&nbsp;\n<span style="display: inline-block; cursor: pointer; background: #525456; color: white; padding: 5px; border-radius: 5px"  id="next" onclick=" player.nextVideo();" >Next<\/span>&nbsp;\n<span style="display: inline-block; cursor: pointer; background: #525456; color: white; padding: 5px; border-radius: 5px"  onclick=" document.getElementById(\'info_inner\').style.display = \'block\' " >Info<\/span>\n<\/div>\n\n\n<\/div><div id="state" style = "position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%"><\/div>';
document.documentElement.appendChild(create_audio)

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var iOS=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;

//if(isMobile){document.documentElement.style.WebkitUserSelect = 'none'; document.documentElement.style.WebkitTapHighlightColor ='transparent'; document.body.style.WebkitUserSelect = 'none'; document.body.style.WebkitTapHighlightColor ='transparent'}

function the_timer()
{//red progress bar

document.getElementById('timer').style.paddingLeft=100*player.getCurrentTime()/player.getDuration()+'%';
}



function check_time()
{/*allows indicating time on mousemove, see below: onmousemove="if(!isMobile){check_time()}*/
var time_hover=(player.getDuration()*((event.pageX-document.getElementById('audio').offsetLeft)/document.getElementById('audio').clientWidth)-0); player.getCurrentTime()==time_hover; var the_date = new Date(null);the_date.setSeconds(time_hover);var utc_time=the_date.toUTCString();var time_indic=utc_time.substr(utc_time.indexOf(':')- 2, 8);var time_indic = the_date.getUTCHours() + ':' + the_date.getUTCMinutes() + ':' +  the_date.getUTCSeconds();var time_indic = the_date.toISOString().substr(11, 8); document.getElementById('check_time').innerHTML=time_indic; document.getElementById('check_time').style.left=event.pageX-document.getElementById('audio').offsetLeft+'px'; if(event.pageX-document.getElementById('audio').offsetLeft>document.getElementById('audio').clientWidth-80){document.getElementById('check_time').style.left=document.getElementById('audio').clientWidth-80+'px'}
}



function seek()
{
if(player.getPlayerState() === 1 && iOS){alert('You can\'t jump to another part of the music unless you pause the music first')}
if(player.getPlayerState() === 2 && iOS){player.seekTo(((player.getDuration()-0) * (event.pageX -document.getElementById('audio').offsetLeft) / document.getElementById('audio').clientWidth*1 )-0)};
if(!iOS){player.seekTo(((player.getDuration()-0) * (event.pageX -document.getElementById('audio').offsetLeft) / document.getElementById('audio').clientWidth*1 )-0)};
}


function hide_check()
{
document.getElementById('check_time').innerHTML = ' '
}



function current()
{//needed for indicating the current time
var date_current = new Date(null);
date_current.setSeconds(player.getCurrentTime());

// retrieve time ignoring the browser timezone - returns hh:mm:ss
var utc_current = date_current.toUTCString();
// negative start index in substr does not work in IE 8 and earlier
var time_current = utc_current.substr(utc_current.indexOf(':') - 2, 8)

// retrieve each value individually - returns h:m:s
var time_current = date_current.getUTCHours() + ':' + date_current.getUTCMinutes() + ':' +  date_current.getUTCSeconds();

// does not work in IE8 and below - returns hh:mm:ss
var time_current = date_current.toISOString().substr(11, 8);

// not recommended - only if seconds number includes timezone difference
//var time = date.toTimeString().substr(0, 8);
document.getElementById('current_time').innerHTML=time_current
}



function displ_duration() {
// needed for indicating the duration
var date_duration = new Date(null);
date_duration.setSeconds(player.getDuration());

// retrieve time ignoring the browser timezone - returns hh:mm:ss
var utc_duration = date_duration.toUTCString();
// negative start index in substr does not work in IE 8 and earlier
var time_duration = utc_duration.substr(utc_duration.indexOf(':') - 2, 8)

// retrieve each value individually - returns h:m:s
var time_duration = date_duration.getUTCHours() + ':' + date_duration.getUTCMinutes() + ':' +  date_duration.getUTCSeconds();

// does not work in IE8 and below - returns hh:mm:ss
var time_duration = date_duration.toISOString().substr(11, 8);

// not recommended - only if seconds number includes timezone difference
//var time = date.toTimeString().substr(0, 8);

document.getElementById('duration').innerHTML=time_duration

}
var time_in_lists = setInterval('displ_duration() ', 500)



function loading()
{
var loading=setInterval(" if(player.getPlayerState()===3){document.getElementById('state').innerHTML= '<img src = \"loading1.gif\" style=\"width: 50px; border-radius: 100%\">'; } else {document.getElementById('state').innerHTML = ''; clearInterval(loading)};   ", 500)
}



function highlight_playbutton()
{
var highlight=setInterval(" if(player.getPlayerState()===5 || (player.getPlayerState()!==1 )){document.getElementById('playbutton').style.background='red';  } else {document.getElementById('playbutton').style.background = '#525456'; clearInterval(highlight)};   ", 500)




}
//highlight_playbutton()



function chopped()
{
if(llist==undefined || llist.length < 11)
{
setTimeout('if(player.getCurrentTime() < the_start ){player.seekTo(the_start); }',0);
setTimeout('if(player.getCurrentTime() > the_end ){player.seekTo(the_start); player.pauseVideo()}',0);
document.getElementById('prev').style.opacity = 0.6;
document.getElementById('next').style.opacity = 0.6;
}

if(llist.length >= 11)
{
document.getElementById('prev').style.opacity = 1;
document.getElementById('next').style.opacity = 1;
}

}




/* The interval for chopped_video must not be too small   */
var infobox = document.createElement('div');
infobox.innerHTML = "<div id='info' style='user-select: text'></div>";
document.documentElement.appendChild(infobox);

function loadVideo(id, starts_at, ends_at, list)
{
if(list){list = id + ',' + list} ;
if(list){list = list.split(/\s/).join('')};
if(document.getElementById('info_inner')){document.getElementById('info_inner').innerHTML = '<div style="float: right; font-family: arial; font-size: 30px; cursor: pointer" onclick=this.parentNode.style.display="none">X</div><br>'+'No information'+'</div>'};

llist=list;
delete the_start; delete the_end; 
the_start=starts_at; 
the_end=ends_at; 
hide_check();  
document.getElementById('container').innerHTML = "<iframe allow='autoplay' frameborder = 'no'  id='ifr' src='https://www.youtube-nocookie.com/embed/" +id + "?html5=1&enablejsapi=1&autoplay=1&start=" + starts_at +"&end=" + ends_at + "&playlist=" + list + " ' style='position: absolute; height: 1px; width: 1px' onload='player=new YT.Player(document.getElementById(\"ifr\"));  setTimeout(\"displ_duration()\",500); setInterval(\"the_timer()\", 500); setInterval(\"current()\", 500); var chopped_video = setInterval(\"chopped() \", 1000);'></iframe>"; 
highlight_playbutton();   



}



function info(video_info)
{
document.getElementById('info').innerHTML = '<div id="info_inner" style="display: none; border: 1px solid silver; padding: 15px; max-height: 50vh; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 10005; position: fixed; width: 500px; max-width: calc(100% - 80px);  text-align: center; color: black; background: white; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: auto; font-family: arial; font-size: 16px; line-height: 25px; box-shadow: 5px 5px 5px #888888;" ><div style="float: right; font-family: arial; font-size: 30px; cursor: pointer" onclick=this.parentNode.style.display="none">X</div><br>'+video_info+'</div>';
}




document.getElementById('info').onclick=function(e){
this.style.textShadow=null;
s = window.getSelection();
var range = s.getRangeAt(0);
var node = s.anchorNode;
while(range.toString().indexOf(' ') != 0) {                 
range.setStart(node,(range.startOffset -1));
}
range.setStart(node, range.startOffset +1);
do{range.setEnd(node,range.endOffset + 1);
}
while(range.toString().indexOf(' ') == -1 && range.toString().trim() != '');
var str = range.toString().trim(); //hh:mm:ss

if(!isNaN(parseFloat(str))==true)var p = str.split(':'), s = 0, m = 1;
while (p.length > 0) {
s += m * parseInt(p.pop(), 10);
m *= 60;
}

player.seekTo(s);

}