var Pages = {
	
	renderArtist: function(data){
		var artist_info = $('\
		<div class="artist-info">\
			<div class="pic">\
				<img src="'+ data.artist.pic +'" alt="'+ data.artist.name +'" width="250" />\
			</div>\
			<h1 class="name">'+ data.artist.name +'</h1>\
			<div class="info">\
				'+ data.artist.desc +'\
			</div>\
		</div>\
		');
		
		var albums_info = $('<div class="albums"></div>');
		$.each(data.albums, function(i, album){
			if (album.year != null) {
				var album_info = $('\
				<div class="album">\
					<h2 class="name">'+ album.name +' ('+ album.year +')</h2>\
					<div class="pic">\
						<img src="'+ album.pic +'" alt="'+ album.name +' by '+ data.artist.name +'" width="250" height="250"/>\
						<div class="add-album-button-container">\
							<div class="add-album button gray">Add to Now Playing</div>\
						</div>\
					</div>\
					<div class="tracklist">\
						<ul>\
						</ul>\
					</div>\
				</div>\
				');
			
				$.each(album.tracks.album, function(i, track){
					var track_info = $('\
					<li>\
						<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>\
					');
				
					$(album_info).find('.tracklist ul').append(track_info);
				});
			
				$(albums_info).append(album_info);
			}
		})
		
		$('#data-container').html('').append(artist_info).append(albums_info).scrollbar();
	}
}