$(function() {
    const audio = $("#audio")[0];
    const playlist = $("#playlist li");
    const title = $("#current-title");
    const playIcon = $("#play-icon");
    const pauseIcon = $("#pause-icon");
    const volumeSlider = $("#volume-slider");
    let current = 0;

    audio.volume = volumeSlider.val(); // Startlautstärke

    function loadTrack(i) {
        current = i;
        audio.src = $(playlist[i]).data("src");
        playlist.removeClass("active");
        $(playlist[i]).addClass("active");
        title.text($(playlist[i]).text());
        audio.load();
    }

    function updateTime() {
        if (!audio.duration) return;
        const cur = audio.currentTime;
        const dur = audio.duration;
        $("#progress").css("width", (cur / dur * 100) + "%");

        function fmt(t) {
            const m = Math.floor(t/60);
            const s = Math.floor(t%60);
            return (m<10?"0":"")+m+":"+(s<10?"0":"")+s;
        }

        $("#time").text(fmt(cur)+" / "+fmt(dur));
    }

    function togglePlayPause(isPlaying) {
        if (isPlaying) {
            playIcon.hide();
            pauseIcon.show();
        } else {
            playIcon.show();
            pauseIcon.hide();
        }
    }

    audio.addEventListener("timeupdate", updateTime);

    audio.addEventListener("ended", function() {
        if (current < playlist.length-1) current++;
        else current = 0;
        loadTrack(current);
        audio.play();
        togglePlayPause(true);
    });

    playlist.on("click", function() {
        loadTrack($(this).index());
        audio.play();
        togglePlayPause(true);
    });

    $("#play-pause").on("click", function() {
        if (audio.paused) {
            audio.play();
            togglePlayPause(true);
        } else {
            audio.pause();
            togglePlayPause(false);
        }
    });

    $("#progress-container").on("click", function(e) {
        const pct = (e.pageX - $(this).offset().left)/$(this).width();
        audio.currentTime = pct * audio.duration;
    });

    $("#prev").on("click", function() {
        if (current>0) current--;
        loadTrack(current);
        audio.play();
        togglePlayPause(true);
    });

    $("#next").on("click", function() {
        if (current<playlist.length-1) current++;
        else current = 0;
        loadTrack(current);
        audio.play();
        togglePlayPause(true);
    });

    // Lautstärkeregler
    volumeSlider.on("input", function() {
        audio.volume = $(this).val();
    });

    loadTrack(0);
});