album.js

// Example Album 1
var albumPicasso = {
  name: 'The Colors',
  artist: 'Pablo Picasso',
  label: 'Cubism',
  year: '1881',
  albumArtUrl: '/images/album-placeholder.png',

  songs: [
      { name: 'Blue', length: '4:26' },
      { name: 'Green', length: '3:14' },
      { name: 'Red', length: '5:01' },
      { name: 'Pink', length: '3:21'},
      { name: 'Magenta', length: '2:15'}
    ]
};

// Example Album 2
var albumMarconi = {
  name: 'The Telephone',
  artist: 'Guglielmo Marconi',
  label: 'EM',
  year: '1909',
  albumArtUrl: '/images/album-placeholder2.png',

  songs: [
      { name: 'Hello, Operator?', length: '1:01' },
      { name: 'Ring, ring, ring', length: '5:01' },
      { name: 'Fits in your pocket', length: '3:21'},
      { name: 'Can you hear me now?', length: '3:14' },
      { name: 'Wrong phone number', length: '2:15'}
    ]
};

var createSongRow = function(songNumber, songName, songLength) {

  var $newSongRow = $('<tr>');
  $newSongRow.append('<td class="col-md-1 number-column" id="' + songNumber + '">' + songNumber + '</td>');
  $newSongRow.append('<td class="col-md-9">' + songName + '</td>');
  $newSongRow.append('<td class="col-md-2">' + songLength + '</td>');

  return $newSongRow;
};

var changeAlbumView = function(album) {
  
  // update album title
  var $albumTitle = $('.album-title');
  $albumTitle.text(album.name);
  // update album artist
  var $albumArtist = $('.album-artist');
  $albumArtist.text(album.artist);
  // update the meta information
  var $albumMeta = $('.album-meta-info');
  $albumMeta.text(album.year + " on " + album.label);
  // update image by changing the src url
  var $albumImage = $('.album-image img');
  $albumImage.attr('src', album.albumArtUrl);

  // update the Song List
  var $songList = $('.album-song-listing');
  $songList.empty();
  var songs = album.songs;
  for (var i = 0; i < songs.length; i++) {
    var songData = songs[i];
    var $newRow = createSongRow(i + 1, songData.name, songData.length);
    $songList.append($newRow);
  }

};

// function for getting/setting song number column contents

var numberColumn = '.number-column';

var getNumberContent = function(element) {
  return $(element).children(numberColumn).text();
}

var setNumberContent = function(element, newContent) {
  return $(element).children(numberColumn).text(newContent);
}

// This 'if' condition is used to prevent the jQuery modifications
// from happening on non-Album view pages.
//  - This line checks if the current url has "/album" in its path using a regex.
if (document.URL.match(/\/album/)) {
  // Wait until the HTML is fully processed.
  $(document).ready(function() {
    // Code to switch views goes here.
    var albums = [albumPicasso, albumMarconi];
    changeAlbumView(albumPicasso);

    var albumIndex = 0;
    var $albumImage = $('.album-image img');

    var $songRow = $('tr');
    // var to hold current playing song number
    var lastClickedSongNumber;

    $songRow.hover(
      function() {
        // set var for holding song number
        prevSongNumber = getNumberContent(this);

        // change number to "Play"
        setNumberContent(this, "Play");

        // create a click event handler for making changing Play to Pause
        $(numberColumn).click(function() {
          // add an 'playing' class so we can easily identify the playing song later
          if $('.playing') exists and our current element is not the element that has the class .playing
            // hold the number of the element we just clicked
            clickedSongNumber = $(this).attr('id');
            // get number of song that is already playing
            var previousSongId = $('.playing').attr('id');
            // set the text of the previous song == the id number on it (i.e. revert it back to the track number)
            $('.playing').text(previousSongId);
            // after we set the number back, remove the playing class so we can add it to our new playing song
            $('.playing').removeClass('.playing');
            // add the playing class to the song we just clicked
            $('#' + clickedSongNumber).addClass('playing');
            // now that it's playing, set the text to pause
            $('.playing').text("Pause");
            
            /********** NOTE: I just realized that you need to also add a condition that checks to see if the song is 
             already playing so that it switches the text from Pause to Play (i.e. stops the song). Let me know if
             you have trouble devising that **********/
        });
      }, function() {
        if element hasClass playing then dont change the text
        
        else
          setNumberContent(this, $(this).attr('id'));
      }
    );

    $albumImage.click(function(event) {

      albumIndex = (albumIndex + 1) % albums.length;
      console.log(albumIndex);
      changeAlbumView(albums[albumIndex]);
    });
  });
}