Artist import moved to a controller, added shiny buttons

public/javascripts/ajax.js

@@ -1,11 +1,12 @@
+function loadArtistData(name) {
+	$.get('/artist/'+ name +'/', function(data){
+		Pages.renderArtist(data);
+	})
+}
+
 $(function(){
-	$('a.data').live('click', function(){
-		var button = this;
-		$.get(this.href, function(data){
-			if ($(button).hasClass('artist')) {
-				Pages.renderArtist(data);
-			}
-		})
+	$('a.data.artist').live('click', function(){
+		loadArtistData($(this).html());
 		return false;
 	});
 	$('a.data').trigger('click');

public/javascripts/pages.js

@@ -20,7 +20,9 @@ var Pages = {
 				<h2 class="name">'+ album.name +' ('+ album.year +')</h2>\
 				<div class="pic">\
 					<img src="'+ album.pic +'" alt="'+ album.name +' by '+ data.artist.name +'" width="250" />\
-					<div class="add-album">Add to playlist</div>\
+					<div class="add-album-button-container">\
+						<div class="add-album button gray">Add to Now Playing</div>\
+					</div>\
 				</div>\
 				<div class="tracklist">\
 					<ul>\
@@ -32,9 +34,12 @@ var Pages = {
 			$.each(album.tracks.album, function(i, track){
 				var track_info = $('\
 				<li>\
-					<span class="index">'+ (i+1) +'</span>\
-					<div class="trackname">'+ track.name +'</div>\
-					<div class="length">'+ track.duration +'</div>\
+					<div class="add-track button gray">+</div>\
+					<div class="track-container">\
+						<span class="index">'+ (i+1) +'</span>\
+						<div class="trackname">'+ track.name +'</div>\
+						<div class="length">'+ track.duration +'</div>\
+					</div>\
 				</li>\
 				');
 				

public/javascripts/player.js

@@ -1,6 +1,6 @@
 var Player = {
 	
-	bar_width: 290,
+	bar_width: 330,
 	
 	getTrackUrl: function(data) {
 		
@@ -42,18 +42,32 @@ var Player = {
 }
 
 $('.add-album').live('click', function() {
-	var artist = $(this).parent().parent().parent().parent().find('.artist-info .name').html();
-	$(this).parent().parent().find('.tracklist li').each(function(i, item){
+	var artist = $('.artist-info .name').html();
+	$(this).parent().parent().parent().find('.tracklist li').each(function(i, item){
 		var track_name = $(item).find('.trackname').html();
 		var length = $(item).find('.length').html();
 		Player.addTrack(artist, track_name, length);
 	});
 })
+$('.add-track').live('click', function(){
+	var artist = $('.artist-info .name').html();
+	var track_name = $(this).parent().find('.trackname').html();
+	var length = $(this).parent().find('.length').html();
+	Player.addTrack(artist, track_name, length);
+});
+
+$('.tracklist li').live('mouseover mouseout', function(e){
+	if (e.type == 'mouseover') {
+		$(this).find('.add-track').show();
+	} else {
+		$(this).find('.add-track').hide();
+	}
+});
 
 $('.playlist-tracks li').live('dblclick', function(){
 	Player.setTrack(this);
-})
+});
 
 $(function(){
 	Audio.init();
-})
+});

public/stylesheets/albums.css

@@ -2,7 +2,7 @@
 .artist-info {
 	width: 100%;
 	float: left;
-	margin: 25px 0;
+	margin: 0 0 25px 0;
 }
 .albums {
 	width: 100%;
@@ -36,28 +36,39 @@
 		.album .pic > * {
 			margin-left: 25px;
 		}
+		.add-album-button-container {
+			position: relative;
+			margin: 10px -25px 0 0;
+			text-align: center;
+		}
 		.album .pic .add-album {
-			margin-top: 15px;
-			width: auto;
-			color: #04D;
-			cursor: pointer;
+
 		}
 	.album .name {
 		display: block;
 		margin: 0 0 10px 300px;
 	}
 	.album .tracklist {
-		margin: 0 25px 30px 300px;
+		margin: 0 25px 30px 275px;
 	}
 	.album .tracklist ul {
 		
 	}
 		.album .tracklist ul li {
 			display: block;
-			height: 20px;
-			padding: 5px 0 0 0;
-			border-top: #EEE 1px solid;
+			padding-left: 25px;
 		}
+			.add-track {
+				display: none;
+				float: left;
+				padding: 1px 5px;
+				margin: 3px 0 0 -22px;
+			}
+			.album .tracklist ul li .track-container {
+				height: 20px;
+				padding: 5px 0 0 0;
+				border-top: #EEE 1px solid;
+			}
 			.album .tracklist ul li:hover {
 				background-color: #FAFAFA;
 			}

public/stylesheets/layout.css

@@ -26,7 +26,7 @@ body {
 
 #player {
 	width: 100%;
-	height: 200px;
+	height: 120px;
 }
 #playlist {
 	width: 100%;

public/stylesheets/misc.css

@@ -28,6 +28,19 @@
 			font-weight: bold;
 			margin-right: 12px;
 		}
+.button {
+	display: inline;
+	width: auto;
+	padding: 5px 10px;
+	border-radius: 3px;
+	border: 1px solid;
+	cursor: pointer;
+}
+	.button.gray {
+		background-color: #EEE;
+		color: #444;
+		border-color: #DDD;
+	}
 
 /* Colorizing *
 #player-container	{ background-color: #CFC; }

public/stylesheets/player.css

@@ -8,24 +8,25 @@
 		line-height: 30px;
 	}
 	#player .progress {
-		width: 290px;
-		height: 10px;
+		width: 330px;
+		height: 5px;
 		background-color: #333;
-		margin: 20px 30px;
+		margin: 0 10px;
+		cursor: pointer;
 	}
 		#player .progress .loaded {
 			width: 0;
-			height: 10px;
+			height: 5px;
 			background-color: #405050;
 		}
 			#player .progress .played {
 				width: 0;
-				height: 10px;
+				height: 5px;
 				background-color: #09A;
 			}
 	#player .controls {
 		width: 290px;
-		margin: 40px 95px;
+		margin: 20px 95px;
 	}
 		#player .controls > div {
 			width: 40px;
@@ -35,13 +36,13 @@
 			cursor: pointer;
 		}
 		#player .controls .prev {
-			background-image: url('../icns/prev.png');
+			background-image: url('/images/icns/prev.png');
 		}
 		#player .controls .play {
-			background-image: url('../icns/play.png');
+			background-image: url('/images/icns/play.png');
 		}
 		#player .controls .next {
-			background-image: url('../icns/next.png');
+			background-image: url('/images/icns/next.png');
 		}
 		
 .playlist-tracks li {