1const menu_div = document.getElementById("background-orange");
  2const iframe = document.getElementById("content-iframe");
  3const music = document.getElementById("music");
  4const source = document.getElementById("music-source");
  5const music_base = document.getElementById("music-player-base");
  6const music_song = document.getElementById("music-player-song");
  7const music_song_text = document.getElementById("song-text");
  8
  9const tracks = {
 10    "awesome": {
 11        file_name: "AwesomeRapBeat.opus",
 12        track_name: "Awesome Rap Beat",
 13        track_author: "Jay Tholen",
 14        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 15    },
 16    "dream": {
 17        file_name: "WeFellIntoaDream.opus",
 18        track_name: "We Fell Into a Dream",
 19        track_author: "Jay Tholen",
 20        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 21    },
 22    "earmint": {
 23        file_name: "Earmint.opus",
 24        track_name: "Earmint",
 25        track_author: "Jay Tholen",
 26        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 27    },
 28    "forest": {
 29        file_name: "ForestFeast.opus",
 30        track_name: "Forest Feast",
 31        track_author: "Jay Tholen",
 32        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 33    },
 34    "gtrock": {
 35        file_name: "GoodtimeRock.opus",
 36        track_name: "Goodtime Rock",
 37        track_author: "Jay Tholen",
 38        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 39    },
 40    "katie": {
 41        file_name: "KatiesKuddlyKatKorner.opus",
 42        track_name: "Katie's Kuddly Kat Korner",
 43        track_author: "Jay Tholen",
 44        track_from: "Hypnospace Outlaw Original Soundtrack, Vol. 2"
 45    },
 46}
 47
 48const page_tracks = {
 49    "about": "awesome",
 50    "anime": "dream",
 51    "dragonquest": "forest",
 52    "earthbound": "gtrock",
 53    "gf": "katie",
 54    "indies": "earmint",
 55    "zelda": "forest",
 56}
 57
 58let play = false;
 59let currentPage = "about";
 60let currentTrack = page_tracks[currentPage];
 61let timeout;
 62
 63function firstMusicPlay() {
 64    playPause(false);
 65    document.removeEventListener('click', firstMusicPlay);
 66}
 67document.addEventListener('click', firstMusicPlay);
 68
 69function goToPage(page) {
 70    if(currentPage == page)
 71        return
 72    iframe.src = "pages/" + page + ".html";
 73
 74    const newTrack = page_tracks[page];
 75
 76    if(newTrack != currentTrack){
 77        currentTrack = newTrack;
 78
 79        source.src = "res/mus/" + tracks[newTrack].file_name;
 80        music.load();
 81        if (play) {
 82            music.play();
 83            showTitle();
 84        }
 85    }
 86        
 87    currentPage = page;
 88}
 89
 90function formatTrack(track) {
 91    return `${track.track_author} - ${track.track_name} (${track.track_from})`;
 92}
 93
 94function showTitle(){
 95    clearTimeout(timeout);
 96    music_song_text.textContent = formatTrack(tracks[currentTrack]);
 97    music_song.style.top = "0";
 98    timeout = setTimeout(() => {
 99        music_song.style.top = "100%";
100    }, 3_000);
101}
102
103function playPause(toggle=play) {
104    if (toggle){
105        music_base.classList.remove("player-play");
106        music.pause();
107        play = false
108    }
109    else {
110        music_base.classList.add("player-play");
111        music.volume = 0.1;
112        music.play();
113        play = true
114        showTitle();
115    }
116}
117
118// page logic
119const title = document.getElementById("aTitle");
120title.addEventListener("click", () => goToPage(title.getAttribute("data-page")));
121[ ...menu_div.childNodes ].forEach(element => {
122    try{
123        const page = element.getAttribute("data-page");
124        if (page){
125            element.addEventListener("click", () => goToPage(page));
126        }
127    } catch {}
128});