/* audio version of cleanyoutube.js    */

function generate_player()
{
loadVideo('dummy');
document.getElementById('replay').style.display = 'none';
document.getElementById('replay').style.visibility = 'hidden';
document.getElementById('the_loading_gif').style.display = 'none';

var space_around_player=document.createElement('div');
space_around_player.innerHTML = "<div style='position: fixed; left: 0; top: 0; right:17px; height: 65px; border-bottom: 40px solid white;  z-index: 1'>&nbsp;</div>  "
document.body.appendChild(space_around_player);

}

window.addEventListener('load', function (){generate_player()}, false);


var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream;
var ios_message = "You can't jump to another part of the video unless you pause it first." 

function loadVideo(yt_id, start, end, playlist)
{
/* The audio player must not hide the top of the body */
document.body.style.marginTop = '80px';

if(playlist){playlist = yt_id + ',' + playlist};
if(playlist){playlist = playlist.split(/\s/).join('')};



for (var i = 1; i < 7000; i++){window.clearInterval(i)};

/* if you have videos of more than 5 hours, increase this number  */
if("the_end" in window){the_end=18000};


if(document.getElementById('the_loading_gif')){document.body.removeChild(document.getElementById('the_loading_gif'))}; 

if(document.getElementById('video_main'))
{
for (i = document.getElementById('video_main').parentNode.childNodes.length; i-- > 0;) {document.getElementById('video_main').parentNode.removeChild(document.getElementById('video_main').parentNode.childNodes[i]);}
}

var loading_gif=document.createElement('div');
loading_gif.id='the_loading_gif';
loading_gif.innerHTML='<div style="position: fixed; left:50%; top: 50%; transform: translate(-50%, -50%); z-index: 11000; height: 50px"><img src="loading1.gif" style="height: 100%; border-radius: 100%"></div>';
document.body.appendChild(loading_gif)

var create_video=document.createElement("div");
create_video.innerHTML='<div id="video_main" style="position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: transparent; z-index: -10000; "><iframe allow="autoplay"  id="ifr" src="https:\/\/www.youtube-nocookie.com\/embed\/' + yt_id + '?html5=1&enablejsapi=1&autoplay=1&controls=0&start='+start+'&end='+end+'&rel=0&wmode=opaque&modestbranding=1&autohide=2&vq=large&playlist='+playlist +'  " style="position: absolute; width: 10px; height: 10px; " frameborder="no"    onload="player=new YT.Player(document.getElementById(\'ifr\'));   if(iOS) {this.parentNode.style.webkitOverflowScrolling = \'touch\'; this.parentNode.style.overflowY = \'hidden\'}; "><\/iframe><\/div><div style=\'line-height: normal; \' id=\'check_seekbar_etc\'><div id=\'check_time\' style=\'position: fixed; top: 5px;background: black; color: white; font-family: arial; font-size: 16px; z-index: 10001; left:-4px\'>&nbsp;<\/div><div id=\'still_to_go\' style=\'position: fixed; left:0px; right:5px; top: 30px;background: gray; height: 3px; z-index: 10002; opacity: 1\' onmousemove=\'if(!isMobile){var time_hover=player.getDuration()*(event.pageX\/window.innerWidth); 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+"px"; if(event.pageX>window.innerWidth-70){document.getElementById("check_time").style.left=window.innerWidth-70+"px"}}\' onmouseleave=\'document.getElementById("check_time").innerHTML=""\' onclick=\'if(!iOS){player.seekTo(player.getDuration() * (event.pageX \/ window.innerWidth))}; if(iOS && player.getPlayerState() === 2){player.seekTo(player.getDuration() * (event.pageX \/ window.innerWidth))}; if(iOS && player.getPlayerState() === 1){alert(ios_message)}\'>&nbsp;<\/div><div id=\'timer\' style=\'position: fixed; left:0px; background: silver; z-index: 10002; height: 2px; top: 30px\' onmousemove=\'if(!isMobile){var time_hover=player.getDuration()*(event.pageX\/window.innerWidth); 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+"px"; if(event.pageX>window.innerWidth-70){document.getElementById("check_time").style.left=window.innerWidth-70+"px"}}\' onmouseleave=\'document.getElementById("check_time").innerHTML=""\' onclick=\'if(!iOS){player.seekTo(player.getDuration() * (event.pageX \/ window.innerWidth))}; if(iOS && player.getPlayerState() === 2){player.seekTo(player.getDuration() * (event.pageX \/ window.innerWidth))}; if(iOS && player.getPlayerState() === 1){alert(ios_message)}\'><div id=\'the_bullet\' draggable=\'true\' style=\'position: relative; margin-top:-6px; left: 2px; color: white; background: black; border-radius: 10px; width: 12px; height: 12px\' ondragstart=\'alert(bullet_message)\'>&nbsp;<\/div><\/div><div style="position: fixed; display: inline-block; left: 15px; top: 1px; z-index: 1; font-family: arial; font-size: 15px"><span id=\'elapsed\' style=\'padding: 0px; font-weight: normal;top: 44px;  \' ><\/span><span id=\'duration\' style=\'padding: 5px; padding-top: 0px; padding-bottom: 0px; font-weight: normal; top: 44px;  \' ><\/span><\/div><div style="position: fixed; left: 6px; black: white;z-index:10002; font-family: arial; font-size: 17px; top: 34px; padding: 5px"><span style="cursor: pointer; padding: 5px; font-weight: normal; " onclick="player.pauseVideo()">pause&nbsp;&nbsp;&nbsp;<\/span>&nbsp<span style="cursor: pointer; padding: 5px; font-weight: normal; " onclick = "loadVideo(\'dummy\'); document.getElementById(\'replay\').style.display = \'none\'; document.getElementById(\'replay\').style.visibility = \'hidden\'; document.getElementById(\'the_loading_gif\').style.display = \'none\';   ">stop&nbsp;&nbsp;&nbsp;<\/span>&nbsp;&nbsp;<span style="cursor: pointer; padding: 5px; font-weight: normal;  " onclick="document.getElementById(\'info2\').style.display=\'block\'   ">info&nbsp;&nbsp;&nbsp;<\/span>&nbsp;<div id="next_prev" style="display: inline-block"><span style=\'cursor: pointer; display: inline-block; font-weight: normal; font-size: 20px; position: relative; top: 0px; padding-left: 15px; padding-right: 15px;  \' onclick=\'player.previousVideo()\'>&lt;<\/span>&nbsp;<span style=\'cursor: pointer; margin-left:0px; display: inline-block; font-weight: normal; font-size: 20px; position: relative; top: 0px; padding-left: 15px; padding-right: 15px;  \' onclick=\'player.nextVideo()\'>&gt;<\/span><\/div><\/div><\/div><div id="replay" style="color: white; position: fixed; z-index: 10006; visibility: hidden; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: arial; font-size: 60px; cursor: pointer; color: gray" onclick="player.playVideo(); document.getElementById(\'ifr\').style.display=\'block\'; ">&#9654;<\/div><div id="info" style="z-index: 10005; position: fixed; width: 500px; max-width: calc(100% - 80px);  text-align: center; color: black; background: white; padding: 0px; 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><div id=\'seekbar\' style=\'position: fixed;z-index:10005;left:0px; top:0px; width: calc(100% - 8px); height:50px; padding: 7px; background: #dedede; opacity: 1; z-index: 0;  \' onmousemove=\'if(!isMobile){var time_hover=player.getDuration()*(event.pageX\/window.innerWidth); 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+"px"; if(event.pageX>window.innerWidth-70){document.getElementById("check_time").style.left=window.innerWidth-70+"px"}}\' onmouseleave=\'document.getElementById("check_time").innerHTML=""\' onclick=\'if(!iOS){player.seekTo(player.getDuration() * (event.pageX \/ window.innerWidth))}; if(iOS && player.getPlayerState() === 2){player.seekTo(player.getDuration() * (event.pageX \/ window.innerWidth))}; if(iOS && player.getPlayerState() === 1){alert(ios_message)}\'>&nbsp;<\/div><div id="active_video" style="position: fixed; background: #6F7173;  color: white;  left: 50%; bottom: 5px; transform: translateX(-50%); z-index: 10005; visibility: hidden; font-family: arial; font-size: 18px; line-height: 25px; padding: 10px; padding-left: 5px; padding-right: 5px; border: 1px solid black; box-shadow: 5px 5px 5px silver; cursor: pointer; text-align: center; width: 232px " onclick="this.style.visibility=\'hidden\'; document.getElementById(\'video_main\').style.zIndex=10000; document.getElementById(\'video_main\').style.opacity=1; document.getElementById(\'check_seekbar_etc\').style.display=\'block\'; document.getElementById(\'info\').style.opacity=1; document.getElementById(\'seekbar\').style.zIndex=10005;  document.getElementById(\'timer\').style.zIndex=10002;  document.getElementById(\'still_to_go\').style.zIndex=10002; document.getElementById(\'replay\').style.opacity=1; document.getElementById(\'replay\').style.zIndex=10002;  ">Bring video to foreground<\/div>'
document.body.appendChild(create_video);

if(playlist==undefined){document.getElementById('next_prev').style.visibility='hidden'};
info('There\'s no musc playing  or there\'s no information for this music.');

document.body.onload=setTimeout(" document.body.removeChild(document.getElementById('the_loading_gif'))",4000);




setInterval("displ_current_time()",500);
setInterval("displ_duration()",500);
setInterval("has_paused_or_ended()",500);

the_timer()

if (start){the_start=start}
if (!start){the_start=0}
if (end){the_end=end}
the_playlist=playlist

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);
}

}


var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

var elapsed_time;
function the_timer()
{
elapsed_time=setInterval("document.getElementById('timer').style.paddingLeft=100*player.getCurrentTime()/player.getDuration()+'%'",500)

}

function info(the_info)
{
var show_info=document.getElementById('info');
show_info.innerHTML='<div id="info2" style="-webkit-user-select: text!important; border: 1px solid silver; padding: 15px; display: none; max-height: 50vh; overflow: auto; -webkit-overflow-scrolling: touch;" ><div style="float: right; font-family: arial; font-size: 30px; cursor: pointer" onclick=this.parentNode.style.display="none">X</div><br>'+the_info+'</div>';
}




function has_paused_or_ended()
{
//setTimeout("video_length=player.getDuration()",10000);

if(player.getDuration()){video_length=player.getDuration()}




if(player.getPlayerState()===0)
{
//document.getElementById('ifr').style.display='none'
document.getElementById('replay').style.visibility='visible';

}

if(player.getPlayerState()!==0)
{
//document.getElementById('ifr').style.display='block'
document.getElementById('replay').style.visibility='hidden'

}

if(player.getPlayerState()==2)
{
//document.getElementById('ifr').style.display='block';
document.getElementById('replay').style.visibility='visible';
if(document.getElementById('video_main').style.zIndex == -1){document.getElementById('replay').style.visibility='hidden';  }


}



if(player.getPlayerState()==-1 || player.getPlayerState()==5)
{


if(/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream){document.getElementById('replay').style.visibility='visible'};
//player.mute(); 
//document.getElementById('ifr_container').style.opacity=0.001;
player.playVideo()

}

if(player.getPlayerState()!==-1 && player.getPlayerState()!==5)

{
document.getElementById('replay').style.visibility='hidden';
//document.getElementById('ifr_container').style.opacity=1;
//player.unMute()
//document.body.removeChild(document.getElementById('the_play_message'))

}

if(player.getPlayerState()==0 || player.getPlayerState()==2)
{
document.getElementById('replay').style.visibility='visible';
//setTimeout("document.getElementById('replay').style.visibility='visible'",1000)
}

if(player.getPlayerState()===3 )
{
document.getElementById('replay').style.visibility='hidden';
}





}

function displ_current_time() {
var date1 = new Date(null);
date1.setSeconds(player.getCurrentTime());

if(!("the_end" in window)){
the_end=video_length; 

}




if(the_playlist==undefined)
{
if(player.getCurrentTime()>the_end-1){player.seekTo(the_start); player.pauseVideo(); }

if(player.getCurrentTime()<the_start){player.seekTo(the_start); }
}


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

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

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

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

document.getElementById('elapsed').innerHTML=time1+'&nbsp;/'

}

function displ_duration() {
var date2 = new Date(null);
date2.setSeconds(player.getDuration());

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

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

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

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

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

}