add on the page

1 files changed, 25 insertions, 2 deletions

diff --git a/static/script.js b/static/script.js
index 4766387..a958a44 100644
--- a/static/script.js
+++ b/static/script.js
@@ -139,15 +139,38 @@ function search(query) {
 }
 
 function add(id, title) {
+	var user = $('#user').val();
 	params = {
 		'pid': pid,
 		'yid': id,
 		'title': title,
-		'user': $('#user').val()
+		'user': user
 	}
 	$.getJSON('/add/', params,
 		function(data) {
-			alert(data);
+			if (data != 1)
+				return;
+			$('article').append('\
+				<section class="song">\
+					<div class="info">\
+						<a href="http://www.youtube.com/watch?v=' + id + '">' + title + '</a>\
+					</div>\
+					<div class="user">' + user + '</div>\
+					<div class="remove">×</div>\
+					<br class="clear">\
+					<div class="thumb">\
+						<img src="http://i.ytimg.com/vi/' + id + '/1.jpg" alt="' + id + '">\
+					</div>\
+					<canvas id="' + id + '" width="700" height="20"></canvas>\
+					<br>\
+					<img src="/static/player_play.png" alt="Play" onclick="play(\'' + id + '\')" id="play_' + id + '">\
+					<img src="/static/player_pause.png" alt="Pause" onclick="pause(\'' + id + '\')" id="pause_' + id + '">\
+					<img src="/static/player_stop.png" alt="Stop" onclick="stop(\'' + id + '\')">\
+					<br class="clear">\
+				</section>\
+				');
+			ids.push(id);
+			drawBar(id);
 		}
 	);
 }