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">
<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 on ${Date.now()}</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"






//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!`;
}












//Sleeptimer-------------------------------------------
select("button.sleep").onclick=()=>{
let mins= select("input.sleep").value;
let html= select("html");
if(mins){
let tab= window.open(location.href+"#copy");
let time= mins*60*1000;
let left= time;
writeIt(time,html,left);

setTimeout(()=>{
tab.close();
},time);
}
else alert("INVALID TIME");
};



function writeIt(x,y,z){
if(x>1000){
y.innerHTML= `>>Tab opened in a new tab!<br>
>>It will close in ${formatTime(x)}`;
x= x-1000;
setTimeout(()=>{
writeIt(x,y,z);
document.title= "Sleep Timer - KD Radio";
},1000);
}
else{
y.innerHTML= `>>Tab opened in a new tab!<br>
>>Closed after ${formatTime(z)}`;
document.title= "Sleep Timer - KD Radio";
}
}



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

}







/*_______________________________________________________________________
													SVG ICONS
_______________________________________________________________________*/
let icons={
"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>`,
};


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