Marks currently playin track in tracklist

app/coffeescripts/pages.coffee

@@ -6,7 +6,7 @@ class Pages
 			<div class="pic">
 				<img src="' +data.artist.pic+ '" alt="' +data.artist.name+ '" width="250" />
 			</div>
-			<h1 class="name">' +data.artist.name+ '</h1>
+			<h1 class="name" data-id="'+data.artist.id+'">' +data.artist.name+ '</h1>
 			<div class="info">
 				' +data.artist.desc+ '
 			</div>
@@ -17,7 +17,7 @@ class Pages
 			if album.year?
 				album_info = $ '
 				<div class="album">
-					<h2 class="name">' +album.name+ ' (' +album.year+ ')</h2>
+					<h2 class="name" data-id="'+album.id+'">' +album.name+ ' (' +album.year+ ')</h2>
 					<div class="pic">
 						<img src="' +(if album.pic then album.pic else '/images/kitteh.png')+ '" alt="' +album.name+ ' by ' +data.artist.name+ '" width="250" height="250"/>
 						<div class="add-album-button-container">
@@ -30,7 +30,7 @@ class Pages
 			
 				$.each album.tracks.album, (i, track) ->
 					track_info = $ '
-					<li>
+					<li data-id="'+track.id+'">
 						<div class="add-track button gray">+</div>
 						<div class="track-container">
 							<div class="fade"></div>

app/coffeescripts/player.coffee

@@ -46,24 +46,25 @@ class Player
 				self.setTrack next
 		false
 	
-	addTrack: (artist, album, track, length, autoplay) ->
+	addTracks: (tracks, autoplay) ->
 		if not autoplay?
 			autoplay = false
 		initial_count = $('.playlist-tracks li').length
-		$('.playlist-tracks').append '
-		<li id="i' +Math.round(Math.random() * 999999)+ '" data-id="" data-artist="' +artist.trim()+ '"	data-album="' +album.trim()+ '"	data-track="' +track.trim()+ '" data-length="' +length+ '">
-			<div class="item">
-				<div class="fade"></div>
-				<div class="dragbox"></div>
-				<span class="title">
-					<span class="data artist" title="Open ' +artist.htmlsafe()+ '\'s page">' +artist+ '</span>
-					&mdash;
-					<span class="playtrack" title="Play ' +track.htmlsafe()+ ' by ' +artist.htmlsafe()+ '">' +track+ '</span>
-				</span>
-				<span class="duration">' +length+ '</span>
-				<div class="remove">remove</div>
-			</div>
-		</li>'
+		for item in tracks
+			$('.playlist-tracks').append '
+			<li id="i' +Math.round(Math.random() * 999999)+ '" data-id="'+item.id+'" data-artist="'+item.artist.trim()+'" data-album="'+item.album.trim()+'" data-track="'+item.name.trim()+'" data-length="'+item.length+'">
+				<div class="item">
+					<div class="fade"></div>
+					<div class="dragbox"></div>
+					<span class="title">
+						<span class="data artist" title="Open ' +item.artist.htmlsafe()+ '\'s page">' +item.artist+ '</span>
+						&mdash;
+						<span class="playtrack" title="Play ' +item.name.htmlsafe()+ ' by ' +item.artist.htmlsafe()+ '">' +item.name+ '</span>
+					</span>
+					<span class="duration">' +item.length+ '</span>
+					<div class="remove">remove</div>
+				</div>
+			</li>'
 		
 		$('.playlist').html($('.playlist-tracks')).scrollbar
 		$('.playlist-tracks').sortable axis: 'y', handle: '.dragbox'
@@ -72,19 +73,29 @@ class Player
 			_player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1])
 		else if initial_count == 0 and not _player.hasTrack()
 			_player.setTrack($('.playlist-tracks li').first().attr('id').split('i')[1])
+		false
+	
+	getDataFromLi: (obj) ->
+		id = $(obj).attr 'data-id'
+		track_name = $(obj).find('.trackname').html()
+		length = $(obj).find('.length').html()
+		id: id, name: track_name, length: length
 	
 	setTrack: (id) ->
 		$obj = $('#i' +id)
 		query = $obj.attr('data-artist')+ ' &mdash; ' +$obj.attr('data-track')
 		
-		$('.player .now-playing').html query+ '<div class="fade"></div>'
+		$('.player .loaded, .player .played').width 0
+		$('.player .now-playing').html query+'<div class="fade"></div>'
 		$('.playlist-tracks li').removeClass 'now'
 		$obj.addClass 'now'
-		$('.player .loaded, .player .played').width 0
+		$('.tracklist li').removeClass 'now'
+		$('.tracklist li[data-id="'+$obj.attr('data-id')+'"]').addClass 'now'
 		
-		_vkontakte.loadTracksData $obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), (url)->
+		_vkontakte.loadTracksData $obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), (url) ->
 			_player.playSource url
 		this.updateNowListening $obj.attr('data-artist'), $obj.attr('data-album'), $obj.attr('data-track')
+		false
 	
 	hasTrack: ->
 		if $('#jplayer audio').length > 0
@@ -95,9 +106,10 @@ class Player
 		false
 	
 	playSource: (url) ->
+		@scrobbled = false
 		$('#jplayer').jPlayer 'setMedia', mp3: url
 		$('#jplayer').jPlayer 'play'
-		@scrobbled = false
+		false
 	
 	nextTrack: (manual) ->
 		manual = manual?
@@ -146,10 +158,12 @@ class Player
 	updateNowListening: (artist, album, track) ->
 		if _session.getUser().lastfm_username
 			_session.query '/lastfm/listening?r=' +Math.random(), artist: artist, album: album, track: track
+		false
 	
 	scrobble: (artist, album, track) ->
 		if _session.getUser().lastfm_username
 			_session.query '/lastfm/scrobble?r=' +Math.random(), artist: artist, album: album, track: track
+		false
 
 
 # Player Controls
@@ -214,18 +228,20 @@ $('.playlist-tracks li .title .playtrack').live 'click', ->
 $('.add-album').live 'click', ->
 	artist = $('.artist-info .name').html()
 	album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
+	tracks = []
 	for item in $(this).parent().parent().parent().find('.tracklist li')
-		track_name = $(item).find('.trackname').html()
-		length = $(item).find('.length').html()
-		_player.addTrack artist, album, track_name, length
+		track = _player.getDataFromLi item
+		track['artist'] = artist
+		track['album'] = album
+		tracks.push track
+	_player.addTracks tracks
 	false
 
 $('.add-track').live 'click', ->
-	artist = $('.artist-info .name').html()
-	album = $(this).parent().parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
-	track_name = $(this).parent().find('.trackname').html()
-	length = $(this).parent().find('.length').html()
-	_player.addTrack artist, album, track_name, length
+	track = _player.getDataFromLi $(this).parent()
+	track['artist'] = $('.artist-info .name').html()
+	track['album'] = $(this).parent().parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
+	_player.addTracks [track]
 	false
 
 $('.tracklist li').live 'mouseover mouseout', (e) ->
@@ -236,9 +252,8 @@ $('.tracklist li').live 'mouseover mouseout', (e) ->
 	false
 
 $('.tracklist li').live 'click', (e) ->
-	artist = $('.artist-info .name').html()
-	album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
-	track_name = $(this).find('.trackname').html()
-	length = $(this).find('.length').html()
-	_player.addTrack artist, album, track_name, length, true
+	track = _player.getDataFromLi this
+	track['artist'] = $('.artist-info .name').html()
+	track['album'] = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
+	_player.addTracks [track], true
 	false