@model List<SpotifyAPI.Web.FullTrack>
<div class="spotifySongSelector">
    @foreach(var track in Model)
    {
        <div class="songSelectorButton" onclick="clickHandler(this)">
            <div class="songName">@track.Name</div>
            <div class="artist">@track.Artists[0].Name</div>
            <div class="album">@track.Album.Name</div>
            <div class="id" hidden>@track.Id</div>
            <div class="albumCover">
                <img src="@track.Album.Images[0].Url" width="50px" height="50px"/>
            </div>
        </div>
    }
</div>

<script>
    function clickHandler(t) {
        // remove previous selection
        $('.songSelectorButton').removeClass("selected");
        t.classList.add("selected");
        var idElement = t.getElementsByClassName("id")[0]
        console.log(idElement);
        SetSpotifyId(idElement.textContent);
    }

    function initializeSelection() {
        var currentSpotifyId = GetSpotifyId();
        $('.songSelectorButton').each(function(i, e) {
            if(e.getElementsByClassName("id")[0].textContent == currentSpotifyId)
            {
                e.classList.add("selected");
            }
        });
    }

    initializeSelection();
</script>