<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://css.1ink.us"/>
<link rel="preconnect" href="https://js.1ink.us"/>
<link rel="preconnect" href="https://img.1ink.us">
<link rel="preconnect" href="https://wasm.noahcohn.com"/>
<title>S*H*1</title>
<script src="https://js.1ink.us/slideOut.1ijs"></script>
<script src="https://js.1ink.us/rSlider.1ijs"></script>
<link rel="stylesheet" charset="UTF-8" href="https://css.1ink.us/sh1.css"/>
</head>
<script async="true" src="https://wasm.noahcohn.com/test/sh2.1ijs"></script>
<script src="https://js.1ink.us/GPU/dist/gpu-browser.1ijs"></script>
<body>
<nav id="menu">
<section class="menu-section" id="menu-sections">
<br>
<div style="text-align:center;">
TIMESLIDER</div>
<br><br>
<ul class="menu-section-list">
<div id="mnu">
<div id="slideframe">
<input type="text" id="timeslider"/>
</div></div></ul></section></nav>
<main id="panel">
<iframe src="./bezz.1ink" style="border-width:0px;position:absolute;top:0px;left:0px;right:0px;bottom:0px;overflow:hidden;z-index:999996;display:block;overflow-y:hidden;overflow-x:hidden;pointer-events:none;" id="circle" onload="opn();" title="Circular mask"></iframe>
<input type="button" id="btn1" style="background-color:black;position:absolute;display:block;left:5%;top:50%;z-index:999997;border:5px solid #e7e7e7;border-radius:50%;"></input>
<input type="button" id="btn3" style="background-color:purple;position:absolute;display:block;left:3%;top:13%;z-index:999997;border:5px solid red;border-radius:50%;" onclick="document.getElementById('di').click();"></input>
<input type="button" id="btn" style="background-color:blue;position:absolute;display:block;left:3%;top:23%;z-index:999997;border:5px solid red;border-radius:50%;" onclick="document.getElementById('di').click();"></input>
<input type="button" id="btn2" style="background-color:white;position:absolute;display:block;left:3%;top:3%;z-index:999997;border:5px solid red;border-radius:50%;" onclick="document.getElementById('di').click();"></input>
<input type="button" id="btn9" style="background-color:tan;position:absolute;display:block;left:5%;top:3%;z-index:999997;border:5px solid red;border-radius:50%;"></input>
<input type="button" id="btn10" style="background-color:purple;position:absolute;display:block;left:8%;top:3%;z-index:999997;border:5px solid red;border-radius:50%;"></input>
<input type="button" id="btn4" style="background-color:grey;position:absolute;display:block;left:3%;top:33%;z-index:999997;border:5px solid red;border-radius:50%;" onclick="document.getElementById('di').click();"></input>
<input type="button" id="btn11" style="background-color:green;position:absolute;display:block;left:7%;top:33%;z-index:999997;border:5px solid red;border-radius:50%;" onclick="document.getElementById('di').click();"></input>
<input type="button" id="btn5" style="background-color:pink;position:absolute;display:block;left:3%;top:43%;z-index:999997;border:5px solid red;border-radius:50%;" onclick="document.getElementById('di').click();"></input>
<input type="button" id="btn6" style="background-color:yellow;position:absolute;display:block;left:3%;top:53%;z-index:999997;border:5px solid red;border-radius:50%;"></input>
<input type="button" id="btn7" style="background-color:black;position:absolute;display:block;left:3%;top:63%;z-index:999997;border:5px solid red;border-radius:50%;"></input>
<input type="button" id="btn77" style="background-color:tan;position:absolute;display:block;left:7%;top:63%;z-index:999997;border:5px solid red;border-radius:50%;"></input>
<input type="button" id="btn8" style="background-color:cyan;position:absolute;display:block;left:3%;top:73%;z-index:999997;border:5px solid green;border-radius:50%;"></input>
<div class="emscripten" id="status">Wasming...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress"></progress>
</div>
<input type="checkbox" id="di" hidden/>
<input type="checkbox" id="dis" hidden/>
<input type="checkbox" id="dil" hidden/>
<div hidden="true" id="path">./all/melt</div>
<div hidden="true" id="path2"></div>
<div hidden="true" id="path3"></div>
<div hidden="true" id="path4"></div>
<div id="iwid" hidden>0</div>
<div id="ihig" hidden>0</div>
<div id="pmhig" hidden>0</div>
<div id="wid" hidden>0</div>
<div id="hig" hidden>0</div>
<div id="ihid" hidden>0</div>
<div id="tim" hidden>4250</div>
<div id="shut" hidden>1</div>
<div id="isrc" hidden>./intro.mp4</div>
<div id="idur" hidden>5</div>
<div id="itim" hidden>3</div>
<div id="wrap">
<div id="contain1">
<canvas class="emscripten" id="scanvas" style="opacity:1;display:block;position:absolute;z-index:999994;background-color:rgba(1,1,1,1);top:0;height:100vh;width:100vh;image-rendering:auto;"></canvas>
</div>
<div id="contain2">
<canvas id="bcanvas" style="opacity:1;display:block;z-index:999995;position:absolute;height:100vh;width:100vh;margin-left:auto;margin-right:auto;background-color:rgba(1,1,1,0);top:0;image-rendering:auto;"></canvas>
</div></div>
</main>
<div id="vidWrap" style="width:2000px;height:1200px;">
<video hidden muted id="mv" preload="auto"></video>
<video hidden muted id="ldv" preload="auto"></video>
</div>
<script src="https://js.1ink.us/hlr.1ijs"></script>
<audio id="track" preload="auto" hidden></audio>
<script>

let numm=0;
let $sngs=new Array();
let $vids=new Array();
let $shds=new Array();

function sngs(xml){
var parser=new DOMParser();
var htmlDoc=parser.parseFromString(xml.responseText,'text/html');
var preList=htmlDoc.getElementsByTagName("pre")[0].getElementsByTagName("a");
$sngs[0]=preList.length;
for (i=1;i<preList.length;i++){
var txxt=preList[i].href;
var Self=location.href;
Self=Self.replace(/1ink.1ink/,"");
txxt=txxt.replace(Self,"");
$sngs[i+1]=Self+"songs/"+txxt;
}
}

function vids(xml){
var parser=new DOMParser();
var htmlDoc=parser.parseFromString(xml.responseText,'text/html');
var preList=htmlDoc.getElementsByTagName("pre")[0].getElementsByTagName("a");
$vids[0]=preList.length;
for (i=1;i<preList.length;i++){
var txxt=preList[i].href;
var Self=location.href;
Self=Self.replace(/1ink.1ink/,"");
txxt=txxt.replace(Self,"");
$vids[i]=Self+"video/"+txxt;
}

}

function shds(xml){
var parser=new DOMParser();
var htmlDoc=parser.parseFromString(xml.responseText,'text/html');
var preList=htmlDoc.getElementsByTagName("pre")[0].getElementsByTagName("a");
$shds[0]=preList.length;
for (i=1;i<preList.length;i++){
var txxt=preList[i].href;
var Self=location.href;
Self=Self.replace(/1ink.1ink/,"");
txxt=txxt.replace(Self,"");
$shds[i+1]=Self+"all/"+txxt;
}
var randShade=Math.random();
randShade=Math.round($shds[0]*randShade);
document.getElementById("path").innerHTML=$shds[randShade];
}

function scanSongs(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
sngs(this);
}
};
xhttp.open("GET","songs/",true);
xhttp.send();
}
function scanVideos(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
vids(this);
}
};
xhttp.open("GET","video/",true);
xhttp.send();
}
function scanShaders(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
shds(this);
}
};
xhttp.open("GET","all/",true);
xhttp.send();
}

scanShaders();
scanVideos();
scanSongs();
let $vs,$so,mil,sfr,slo,tsl,tem,dat,datb,a,ss,hms,$hg,slt,$ll,$h,wi,adr,hi,r$,$w,$r,$nv,$hi,$lt,rnum,$sc,$rn,$ls,lo,mv,$nm,$rm,$rma,$wf,vide,$md,$hmd,he,$pt,randSong,songSrc;
document.getElementById('pmhig').innerHTML=parseInt(window.innerHeight,10);
document.getElementById('ihig').innerHTML=parseInt(window.innerHeight,10);
document.getElementById("scanvas").height=parseInt(window.innerHeight,10);
document.getElementById("scanvas").width=parseInt(window.innerHeight,10);
let loadV=document.getElementById("ldv");
loadV.addEventListener('canplay',function(e){
document.getElementById("hig").innerHTML=this.videoWidth;
document.getElementById("wid").innerHTML=this.videoHeight;
$sc=this.duration;
mil=Math.round($sc*1000);
$pt=Math.random()*mil;
$pt=$pt*1000;
$pt=$pt/1000;
$pt=Math.round($pt);
$pt=$pt/1000;
document.getElementById("idur").innerHTML=mil/1000;
document.getElementById("itim").innerHTML=$pt;
});
function snd(){
randSong=Math.round(($sngs[0]-5)*Math.random());
songSrc=$sngs[randSong+5];
document.getElementById("track").src=songSrc;
var sound=new Howl({src:[songSrc],volume:1,onend:function(){snd();}});
sound.play();
console.log(songSrc);
};
document.getElementById('btn8').addEventListener('click',function(){
snd();
});
tem=document.getElementById("tim");
ban=document.getElementById("btn1");
sfr=document.getElementById("slideframe");
function grab$lt(){
$lt=Math.round($lt);}
$lt=tem.innerHTML;
grab$lt();
slo=new Slideout({"panel":document.getElementById("panel"),"menu":document.getElementById("menu"),"padding":384,"tolerance":70,"easing":"cubic-bezier(.32,2,.55,.27)"});
ban.addEventListener("click",function(){slo.toggle();sfr.innerHTML="";
setTimeout(function(){
grab$lt();slt=$lt/1000;slt=Math.round(slt);
sfr.innerHTML='<input type='+'"te'+'xt" id'+'="time'+'slider"/'+'>';
tsl=new rSlider({target:"#timeslider",values:{min:1,max:15},
step:[.25],labels:false,tooltip:true,scale:false,});
grab$lt();slt=($lt/1000);slt=slt*100;slt=Math.round(slt);
slt=slt/100;tsl.setValues(slt);
document.getElementById("menu").addEventListener("click",function(){
$ll=tsl.getValue();$ll=$ll*100;$ll=Math.round($ll);$ll=$ll/100;$ll=($ll*1000);tem.innerHTML=$ll;
});
setTimeout(function(){
slt=tem.innerHTML;
},8);},16);});
adr="./intro.mp4";
wi=1920;he=1080;
document.getElementById("hig").innerHTML=he;
document.getElementById("wid").innerHTML=wi;
hii=Math.round(window.innerHeight);
document.getElementById("ihid").innerHTML=hii;
r$=(hii/he)*1000;r$=Math.round(r$);r$=r$/1000;
$w=Math.round(wi/r$);
dat=document.getElementById("ihid");
datb=document.getElementById("ihig");
$hg=hii+"px";
document.getElementById('ihig').innerHTML=parseInt(window.innerHeight,10);
document.getElementById("iwid").innerHTML=parseInt($w,10);
document.getElementById("wrap").style.lineheight=$hg;
document.getElementById("mv").src=adr;
document.getElementById("mv").play();
vide=document.querySelectorAll("video");
function loada(){
document.getElementById('pmhig').innerHTML=parseInt(window.innerHeight,10);
hii=Math.round(window.innerHeight);
document.getElementById("ihid").innerHTML=hii;
$lt=Math.round(tem.innerHTML);
$ldt=document.getElementById("tim").innerHTML;
$ls=$lt/1000;
$ls=$ls*1000;
$ls=Math.round($ls);
$ls=$ls/1000;
$rn=Math.random()*($vids[0]-5);
rnum=Math.floor($rn)+5;
document.getElementById("isrc").innerHTML=$vids[rnum];

$h=Math.round(window.innerHeight);
he=document.getElementById("hig").innerHTML;
r$=$h/he;
$w=wi*r$;
hii=Math.round(dat.innerHTML);
$hi=$h-hii;

if($hi>1){$h=Math.round(dat.innerHTML);datb.innerHTML=$h;$r=$h/he;$r=$r*1000;$r=$r;$r=$r/1000;$w=wi*$r;}

$hg=$h+"px";
document.getElementById("iwid").innerHTML=parseInt($w,10);
document.getElementById('ihig').innerHTML=parseInt(window.innerHeight,10);
window.scroll(0,0);
setTimeout(function(){
document.getElementById("ldv").src=document.getElementById("isrc").innerHTML;
document.getElementById("ldv").currentTime=document.getElementById("itim").innerHTML;
document.getElementById("ldv").load();
document.getElementById("ldv").width=document.getElementById("iwid").innerHTML;
document.getElementById("ldv").height=document.getElementById("ihig").innerHTML;
document.getElementById("ldv").currentTime=document.getElementById("itim").innerHTML;
document.getElementById("ldv").play();
mv=vide[0].id;
lo=vide[1].id;
vide[0].id=lo;
vide[1].id=mv;
document.getElementById('ihig').innerHTML=parseInt(window.innerHeight,10);
document.getElementById("iwid").innerHTML=parseInt($w,10);
document.getElementById("di").click();
// document.getElementById("ldv").muted=true;
// document.getElementById("mv").muted=false;
loada();
},$ldt);}
setTimeout(function(){
loada();
},1500);
</script>
<script src="./startUp.1ijs"></script>
</body>