1const iframe = document.getElementById("content-iframe");
  2const music = document.getElementById("music");
  3const source = document.getElementById("music-source");
  4const music_base = document.getElementById("music-player-base");
  5const music_song = document.getElementById("music-player-song");
  6const music_song_text = document.getElementById("song-text");
  7const clickAudio1 = new Audio(url="res/sfx/os/click2.ogg");
  8const clickAudio2 = new Audio(url="res/sfx/os/click1.ogg");
  9const loadSpeed = 2;
 10
 11const tracks = {
 12    "awesome": {
 13        file_name: "AwesomeRapBeat.opus",
 14        track_name: "Awesome Rap Beat",
 15        track_author: "Jay Tholen",
 16        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 17    },
 18    "dream": {
 19        file_name: "WeFellIntoaDream.opus",
 20        track_name: "We Fell Into a Dream",
 21        track_author: "Jay Tholen",
 22        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 23    },
 24    "earmint": {
 25        file_name: "Earmint.opus",
 26        track_name: "Earmint",
 27        track_author: "Jay Tholen",
 28        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 29    },
 30    "forest": {
 31        file_name: "ForestFeast.opus",
 32        track_name: "Forest Feast",
 33        track_author: "Jay Tholen",
 34        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 35    },
 36    "gtrock": {
 37        file_name: "GoodtimeRock.opus",
 38        track_name: "Goodtime Rock",
 39        track_author: "Jay Tholen",
 40        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 41    },
 42    "katie": {
 43        file_name: "KatiesKuddlyKatKorner.opus",
 44        track_name: "Katie's Kuddly Kat Korner",
 45        track_author: "Jay Tholen",
 46        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 47    },
 48}
 49
 50const page_tracks = {
 51    "about": "awesome",
 52    "anime": "dream",
 53    "dragonquest": "forest",
 54    "earthbound": "gtrock",
 55    "gf": "katie",
 56    "indies": "earmint",
 57    "zelda": "forest",
 58}
 59
 60let first = false;
 61let play = false;
 62let controlsEnabled = false;
 63let currentPage = "about";
 64let currentTrack = "";
 65let showTimeout, hideTimeout;
 66
 67function firstPlay(){
 68    if(first) return;
 69    document.getElementById("music-player").style.bottom = "0";
 70    music.volume = 0.1;
 71    controlsEnabled = true;
 72    playPause(false, page_tracks[currentPage]);
 73    first = true;
 74}
 75
 76function loadIFrame(callback){
 77    iframe.contentWindow.start_loading(speed=loadSpeed, not_allowed, callback);
 78}
 79
 80function firstClickPlay(element) {
 81    const overlay = document.getElementById("overlay");
 82    if(overlay) {
 83        overlay.remove();
 84        hide_all();
 85        start_loading(speed=loadSpeed, not_allowed, () => { loadIFrame(firstPlay) });
 86        //slow_load(speed=loadSpeed, not_allowed, () => { loadIFrame(firstPlay) });
 87    }
 88
 89    click1 = clickAudio1 || parent.clickAudio1;
 90    click2 = clickAudio2 || parent.clickAudio2;
 91
 92    playAudio(click1)
 93    element.onmousedown = () => playAudio(click1);
 94    element.onmouseup = () => playAudio(click2);
 95}
 96
 97function frameLoadedCallback(page) {
 98    controlsEnabled = true;
 99    playPause(!play, page_tracks[page]);
100}
101
102function goToPage(page) {
103    if (!controlsEnabled || currentPage == page) return
104
105    music.pause()
106    controlsEnabled = false;
107    iframe.src = "pages/" + page + ".html";
108    currentPage = page;
109}
110
111function formatTrack(track) {
112    return `${track.track_author} - ${track.track_name} (${track.track_from})`;
113}
114
115function showTitle(){
116    if (!currentTrack) return;
117    hideTitle();
118    clearTimeout(showTimeout);
119    clearTimeout(hideTimeout);
120    
121    showTimeout = setTimeout(() => { 
122        music_song_text.textContent = formatTrack(tracks[currentTrack]);
123        music_song.style.top = "0";
124    }, 400);
125
126    hideTimeout = setTimeout(() => hideTitle(), 3_400);
127}
128
129function hideTitle(){
130    music_song.style.top = "100%";
131}
132
133function playPause(toggle=play, track=currentTrack) {
134
135    if (!controlsEnabled)
136        return;
137    if (toggle){
138        music_base.classList.remove("player-play");
139        music.pause();
140        play = false
141        hideTitle();
142    }
143    else {
144        music_base.classList.add("player-play");
145        if (track != currentTrack) {
146            currentTrack = track;
147            source.src = "res/mus/" + tracks[currentTrack].file_name;
148            music.load();
149        }
150        music.play().catch(() => {});
151        showTitle();
152        play = true
153    }
154}