5 files changed, 74 insertions, 9 deletions

diff --git a/static/base.css b/static/base.css
index fb01a40..438e4c1 100644
--- a/static/base.css
+++ b/static/base.css
@@ -136,14 +136,31 @@ section.song div.info {
 }
 section.song div.user {
 	float: right;
-	margin-right: 8px;
+	margin-right: 20px;
 }
 section.song div.remove {
 	position: absolute;
 	top: 0;
 	right: 5px;
-	font-weight: bold;
-	cursor: pointer;
+}
+section.song div.remove img {
+	opacity: 0.6;
+}
+section.song div.remove img:hover {
+	opacity: 1.0;
+}
+section.song div.reorder {
+	position: absolute;
+	bottom: 0;
+	right: 5px;
+}
+section.song div.reorder img {
+	display: block;
+	margin-bottom: 5px;
+	opacity: 0.6;
+}
+section.song div.reorder img:hover {
+	opacity: 1.0;
 }
 section.song div.thumb {
 	float: left;
@@ -156,7 +173,7 @@ section.song div.thumb img {
 }
 section.song canvas, section.song > img {
 	position: relative;
-	left: 10px;
+	left: 5px;
 }
 section.song > img[src$='pause.png'] {
 	display: none;
diff --git a/static/down-arrow.png b/static/down-arrow.png
new file mode 100644
index 0000000..00c106d
--- /dev/null
+++ b/static/down-arrow.png
diff --git a/static/remove.png b/static/remove.png
new file mode 100644
index 0000000..a033c4e
--- /dev/null
+++ b/static/remove.png
diff --git a/static/script.js b/static/script.js
index 3be5775..8687b0e 100644
--- a/static/script.js
+++ b/static/script.js
@@ -14,6 +14,10 @@ $(document).ready(function () {
 			case 1:
 				drawRemove(update.yid);
 				break;
+			case 2:
+			case 3:
+				drawMove(update.yid, update.action);
+				break;
 			}
 		}
 	}
@@ -167,12 +171,11 @@ function search(query) {
 }
 
 function add(id, title) {
-	var user = $('#user').val();
 	params = {
 		pid: pid,
 		yid: id,
 		title: title,
-		user: user
+		user: $('#user').val()
 	}
 	$.getJSON('/add/', params);
 }
@@ -187,7 +190,19 @@ function drawAdd(s) {
 				<a href="http://www.youtube.com/watch?v=' + s.yid + '">' + s.title + '</a>\
 			</div>\
 			<div class="user">' + s.user + '</div>\
-			<div class="remove" onclick="remove(\'' + s.yid + '\')">×</div>\
+			<div class="remove">\
+				<a href="javascript:remove(\'' + s.yid + '\')">\
+					<img src="/static/remove.png" alt="remove">\
+				</a>\
+			</div>\
+			<div class="reorder">\
+				<a href="javascript:move(\'' + s.yid + '\', 2)">\
+					<img src="/static/up-arrow.png" alt="up">\
+				</a>\
+				<a href="javascript:move(\'' + s.yid + '\', 3)">\
+					<img src="/static/down-arrow.png" alt="down">\
+				</a>\
+			</div>\
 			<canvas id="c_' + s.yid + '" width="700" height="20"></canvas>\
 			<br>\
 			<img src="/static/player_play.png" alt="Play" onclick="play(\'' + s.yid + '\')" id="play_' + s.yid + '">\
@@ -201,7 +216,6 @@ function drawAdd(s) {
 }
 
 function remove(id) {
-	var user = $('#user').val();
 	params = {
 		pid: pid,
 		yid: id,
@@ -211,8 +225,42 @@ function remove(id) {
 
 function drawRemove(id) {
 	var element = $('#' + id);
+	stop(id);
 	element.slideUp(100, function () {
-		stop(id);
 		element.remove();
 	});
 }
+
+function move(id, dir) {
+	params = {
+		pid: pid,
+		yid: id,
+		direction: dir // see updates.go:moveUpAction
+	}
+	$.getJSON('/move/', params);
+}
+
+function drawMove(id, dir) {
+	var element1 = document.getElementById(id);
+	if (dir == 2) { //up
+		var element2 = element1.previousElementSibling;
+		if (!element2) return;
+		element1 = $('#' + id);
+		element2 = $('#' + element2.id);
+		element1.fadeOut(200, function () {
+			element1.detach();
+			element2.before(element1);
+			element1.fadeIn(200);
+		});
+	} else if (dir == 3) { //down
+		var element2 = element1.nextElementSibling;
+		if (!element2) return;
+		element1 = $('#' + id);
+		element2 = $('#' + element2.id);
+		element1.fadeOut(200, function () {
+			element1.detach();
+			element2.after(element1);
+			element1.fadeIn(200);
+		});
+	}
+}
diff --git a/static/up-arrow.png b/static/up-arrow.png
new file mode 100644
index 0000000..29ca702
--- /dev/null
+++ b/static/up-arrow.png