let overlay= select("section.block6");
overlay.innerHTML= `
<div class="modal minimized">

<div class="customlist flexcenter" data-nosnippet title="select stations to hide">
<select class="customlist" multiple></select>
<button class="customlist">HIDE</button>
</div>

<p class="customlist">Updated after your mom</p>

<div class="sleep flexcenter" data-nosnippet title="close tab after x minutes">
<input class="sleep" type="number">
<button class="sleep">SLEEP</button>
</div>

<p class="skip flexcenter" data-ignore="no">
<input type="checkbox">
ignore hidden stations during skipping:
</p>

<p class="updated">Updated after your mom</p>
<p class="close flexcenter">x</span>
</div>`;






//Choose how skipping stations work
select(".skip input").checked= ignoreHS;
select(".skip input").oninput= function(){
if(this.checked){
ignoreHS= true;
this.parentNode.dataset.ignore= "yes";
}
else{
ignoreHS= false;
this.parentNode.dataset.ignore= "no";
}
};



let modal= select("div.modal");

//Open modal
select("p.settings").onclick=()=>{
newDropdownOptions();
restoreSelectedStations();
overlay.classList.remove("transparent");
modal.classList.remove("minimized");
};


//Close modal
select("p.close").onclick=()=>{
modal.classList.add("minimized");
overlay.classList.add("transparent");
};


//Open about page
select(".about").onclick=()=>{
window.open("about","_blank");
}



let dropdown= select("select.customlist");
let message= select("p.customlist");


//Create fresh dropdown
function newDropdownOptions(){
dropdown.innerHTML= message.innerHTML= dropdown.value= "";
Object.keys(list[index]).forEach(i=>{
let option= create("option");
option.innerHTML= list[index][i];
dropdown.append(option);
});
}

//Initial setup on page load
newDropdownOptions();


let localblocklist= {};

select("button.customlist").onclick= function(){
message.innerHTML= `
${selectedStations().length} stations hidden!`;
localblocklist[genre[index]]= selectedStations();
localStorage["localblocklist"]= JSON.stringify(localblocklist);
hideStations();
}; //hide.innerHTML= "ALL"


//collapsed.click() lol to maintain state❤️



//Check selected stations
function selectedStations(){
return [...dropdown.selectedOptions].map(i=> i.index);
}


function restoreSelectedStations(){
let amount= 0;
let options= selectAll("option");
selectAll("p.station").forEach((i,x)=>{
if(i.dataset.hidden=="true"){
options[x].selected= true;
amount++;
}
});
message.innerHTML= `${amount} stations hidden!`;
}


//hideStations();

/*
let blocklist= localStorage[lsblock()];
blocklist= blocklist ? JSON.parse(blocklist) : ibl[liststring[lang]];

let options= selectAll("option");
blocklist.forEach(i=>{
options[i].selected= true;
spans[i].classList.add("hidden");
});

hide.innerHTML= "ALL";
}


*/









let sleeptimer= create("p");
sleeptimer.className= "sleeptimer";
document.body.append(sleeptimer);


//Sleeptimer-------------------------------------------
select("button.sleep").onclick= function(){
let mins= this.previousElementSibling.value;
if(mins>0){
let time= mins*60*1000;
let left= time;
sleeptimer.classList.add("flexcenter");
writeIt(time,left);

/*
setTimeout(()=>{
document.write("closed")
},time);
*/
}
else alert("INVALID TIME");
};



function writeIt(x,y){
if(x>1000){
x= x-1000;
sleeptimer.innerHTML= `Radio will stop playing after ${formatTime(x)}`;
setTimeout(()=>{ writeIt(x,y); },1000);
}
else{
audio.pause();
sleeptimer.innerHTML= `Radio stopped after ${formatTime(y)}`;
document.title= "KD Radio - Stopped";
}
}



//Last updated-----------------------RATE LIMIT >___<

//lastUpdated();


function lastUpdated(){
	
let file= location.href.includes("bollywood") ? "bollywood" : "suriname";	
let url= `https://api.github.com/repos/nostalgickd/nostalgickd.github.io/commits?path=${file}.js`;

fetch(url, {
authorization: "token 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"
}).then(r=> r.json())
.then(d=> {
let date= new Date(d[0].commit.author.date);

let _date= date.toLocaleDateString("en-US",{
//weekday: 'long',
year: 'numeric', 
month: 'short', 
day: 'numeric'
});

let _time= date.toLocaleTimeString("en-US",{
hour: '2-digit', 
minute: '2-digit'
});

//alert(` ${_date} @ ${_time}`);
select("p.updated").innerHTML= `Stations updated on ${_date} @ ${_time}`;

})
.catch(x=> select("p.updated").innerHTML= x.message);

}



/*
function restoreSelectedStations(){
[...selectAll("p.station")].filter((i,x)=>{
if(i.dataset.hidden=="true") return x;
});
}
*/




/*_______________________________________________________________________
													SVG ICONS
_______________________________________________________________________*/
let icons={
	
"loading" : `<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="120" height="30" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#fff">
    <circle cx="15" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
                 begin="0s" dur="0.8s"
                 values="15;9;15" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
                 begin="0s" dur="0.8s"
                 values="1;.5;1" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>
    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
        <animate attributeName="r" from="9" to="9"
                 begin="0s" dur="0.8s"
                 values="9;15;9" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="0.5" to="0.5"
                 begin="0s" dur="0.8s"
                 values=".5;1;.5" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>
    <circle cx="105" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
                 begin="0s" dur="0.8s"
                 values="15;9;15" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
                 begin="0s" dur="0.8s"
                 values="1;.5;1" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>
</svg>`,


"playing" : `<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#FFF">
    <g transform="matrix(1 0 0 -1 0 80)">
        <rect width="10" height="20" rx="3">
            <animate attributeName="height"
                 begin="0s" dur="4.3s"
                 values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
        <rect x="15" width="10" height="80" rx="3">
            <animate attributeName="height"
                 begin="0s" dur="2s"
                 values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
        <rect x="30" width="10" height="50" rx="3">
            <animate attributeName="height"
                 begin="0s" dur="1.4s"
                 values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
        <rect x="45" width="10" height="30" rx="3">
            <animate attributeName="height"
                 begin="0s" dur="2s"
                 values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear"
                 repeatCount="indefinite" />
        </rect>
    </g>
</svg>`,
	
	
"suriname" : `<svg viewBox="0 0 640 480"><path fill="#377e3f" d="M.1 0h640v480H.1z"/><path fill="#fff" d="M.1 96h640v288H.1z"/><path fill="#b40a2d" d="M.1 144h640v192H.1z"/><path fill="#ecc81d" d="M320 153.2l56.4 173.6-147.7-107.3h182.6L263.6 326.8z"/>SR</svg>`,


"india" : `<svg viewBox="0 0 640 480"><path fill="#f93" d="M0 0h640v160H0z"/><path fill="#fff" d="M0 160h640v160H0z"/><path fill="#128807" d="M0 320h640v160H0z"/><g transform="matrix(3.2 0 0 3.2 320 240)"><circle r="20" fill="#008"/><circle r="17.5" fill="#fff"/><circle r="3.5" fill="#008"/><g id="d"><g id="c"><g id="b"><g id="a" fill="#008"><circle r=".9" transform="rotate(7.5 -8.8 133.5)"/><path d="M0 17.5L.6 7 0 2l-.6 5L0 17.5z"/></g><use width="100%" height="100%" transform="rotate(15)" xlink:href="#a"/></g><use width="100%" height="100%" transform="rotate(30)" xlink:href="#b"/></g><use width="100%" height="100%" transform="rotate(60)" xlink:href="#c"/></g><use width="100%" height="100%" transform="rotate(120)" xlink:href="#d"/><use width="100%" height="100%" transform="rotate(-120)" xlink:href="#d"/></g>IN</svg>`,
	
	
"left" : `<svg viewBox="0 0 24 24">
<g> <path d="M2 11l7-9v5c11.953 0 13.332 9.678 13 15c-.502-2.685-.735-7-13-7v5l-7-9z"/></g></svg>`,

"right" : `<svg viewBox="0 0 24 24">
<g><path d="M22 11l-7-9v5C3.047 7 1.668 16.678 2 22c.502-2.685.735-7 13-7v5l7-9z"/></g></svg>`,

"cross" : `<svg viewBox="0 0 24 24">
<path d="M15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z"/></svg>`,

"close"	: `<svg viewBox="0 0 64 64">
<path d="M62 10.6L53.4 2L32 23.4L10.6 2L2 10.6L23.4 32L2 53.4l8.6 8.6L32 40.6L53.4 62l8.6-8.6L40.6 32z"/></svg>`,
};


if(isBw) isBw.innerHTML= icons.suriname;
if(isSr) isSr.innerHTML= icons.india;


prevGenre.innerHTML= icons.left;
nextGenre.innerHTML= icons.right;
select("p.close").innerHTML= icons.close;


//if(hidden) select(".show.hide").click();




//select(":root").style.setProperty("--playing","!!!");



select("p.finishing").innerHTML= `${icons.loading}`;

setTimeout(()=>{
select("p.finishing").remove();
},1000);



/*
♥️HAS => Hide (sth not working)

*/