gypark/index.html

## index.html
<html>
<head>
	<title>MP3 Deduper</title>
	<style type="text/css">
	.btnRemove {
		color: white;
		font-size: 9pt;
		background-color: #f66;
		border: solid 1px red;
		margin-left: 5px;
	}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script>
	$(document).ready(function() {
		$.getJSON('/list', function(data) {
			var h1 = $('#content');
			for(var s in data) {
				//console.log(s);
				var ul = $("<ul>");
				ul.text(s);
				var ol = $("<ol>");
				for(var i=0; i<data[s].length; ++i) {
					var li = $('<li>').text(data[s][i]);
					var button = $('<span class="btnRemove">').text('Remove')
								.click(data[s][i], function(e) {
									//if(confirm(e.data)) {
										$(e.target).remove();
										$.post('/remove', { file: e.data }, function(data, textStatus, jqXHR) {
											if(data.result != "ok") {
												alert("Error : " + data.message);
											}
										});
									//}
								});
					li.append(button);
					ol.append(li);
				}
				ul.append(ol);
				h1.append(ul);
			}
		});
	});
	</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
	<html>
	<head>
	<title>MP3 Deduper</title>
	<style type="text/css">
	.btnRemove {
	color: white;
	font-size: 9pt;
	background-color: #f66;
	border: solid 1px red;
	margin-left: 5px;
	}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script>
	$(document).ready(function() {
	$.getJSON('/list', function(data) {
	var h1 = $('#content');
	for(var s in data) {
	//console.log(s);
	var ul = $("<ul>");
	ul.text(s);
	var ol = $("<ol>");
	for(var i=0; i<data[s].length; ++i) {
	var li = $('<li>').text(data[s][i]);
	var button = $('<span class="btnRemove">').text('Remove')
	.click(data[s][i], function(e) {
	//if(confirm(e.data)) {
	$(e.target).remove();
	$.post('/remove', { file: e.data }, function(data, textStatus, jqXHR) {
	if(data.result != "ok") {
	alert("Error : " + data.message);
	}
	});
	//}
	});
	li.append(button);
	ol.append(li);
	}
	ul.append(ol);
	h1.append(ul);
	}
	});
	});
	</script>
	</head>
	<body>
	<div id="content">
	</div>
	</body>
	</html>