re-id section, canvas. change listen to local-only

main.go

@@ -19,7 +19,7 @@ type Playlist struct {
 }
 
 var templates map[string]*template.Template
-const debug = true
+const debug = false
 var db *mysql.Client
 
 // given an id ('abcd1234'), return the pid (1)
@@ -176,7 +176,7 @@ func main() {
 	http.HandleFunc("/p/", playlist)
 	http.HandleFunc("/add/", add)
 	http.HandleFunc("/remove/", remove)
-	err = http.ListenAndServe(":8000", nil)
+	err = http.ListenAndServe("localhost:8000", nil)
 	if err != nil {
 		fmt.Println(err)
 		os.Exit(1)

static/script.js

@@ -14,7 +14,7 @@ $(document).ready(function () {
 });
 
 function drawBar(id) {
-	var canvas = document.getElementById(id);
+	var canvas = document.getElementById('c_' + id);
 	canvas.height = canvas.height; //clear
 	var context = canvas.getContext("2d");
 
@@ -151,7 +151,7 @@ function add(id, title) {
 			if (data != 1)
 				return;
 			$('article').append('\
-				<section class="song">\
+				<section class="song" id="' + id + '">\
 					<div class="info">\
 						<a href="http://www.youtube.com/watch?v=' + id + '">' + title + '</a>\
 					</div>\
@@ -161,7 +161,7 @@ function add(id, title) {
 					<div class="thumb">\
 						<img src="http://i.ytimg.com/vi/' + id + '/1.jpg" alt="' + id + '">\
 					</div>\
-					<canvas id="' + id + '" width="700" height="20"></canvas>\
+					<canvas id="c_' + 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 + '">\

templates/p.html

@@ -23,7 +23,7 @@
 	</header>
 	<article>
 		{{range .Songs}}
-			<section class="song">
+			<section class="song" id="{{.Yid}}">
 				<div class="info">
 					<a href="http://www.youtube.com/watch?v={{.Yid}}">{{.Title}}</a>
 				</div>
@@ -35,7 +35,7 @@
 				<div class="thumb">
 					<img src="http://i.ytimg.com/vi/{{.Yid}}/1.jpg" alt="{{.Yid}}">
 				</div>
-				<canvas id="{{.Yid}}" width="700" height="20"></canvas>
+				<canvas id="c_{{.Yid}}" width="700" height="20"></canvas>
 				<br>
 				<img src="/static/player_play.png" alt="Play" onclick="play('{{.Yid}}')" id="play_{{.Yid}}">
 				<img src="/static/player_pause.png" alt="Pause" onclick="pause('{{.Yid}}')" id="pause_{{.Yid}}">