1 files changed, 28 insertions, 9 deletions

diff --git a/html/index.html b/html/index.html
index ac85aa1..b6daf8c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -12,13 +12,28 @@
 
 .selected{
   color: #FF8080;
+  cursor: pointer;
 }
 
 .normal{
   color: #000000;
+  cursor: pointer;
 }
+
+#songlist{
+  height:400px;
+  overflow:auto;
+}
+
 </style>
 <script type="text/javascript">
+  var symbol_play = "&#x23F5;";
+  var symbol_stop = "&#x23F9;";
+
+  var play_state = "stopped";
+
+  var songs = ["a", "b", "c"];
+
   function get_filelist(){
     var xhr = new XMLHttpRequest();
 
@@ -33,10 +48,12 @@
         var selected_file = xml.getElementsByTagName("selected")[0].childNodes[0].nodeValue;
         var list = xml.getElementsByTagName("list")[0].getElementsByTagName("filename");
         var n = list.length;
+	songs = [];
         var value = "";
         for (var i = 0; i < n; ++i) {
           var filename = list[i].childNodes[0].nodeValue;
-          value += "<span class=\"" + (filename == selected_file ? "selected" : "normal") + "\">" + filename + "</span><br/>"
+          value += "<span class=\"" + (filename == selected_file ? "selected" : "normal") + "\" onclick=\"songlist_clicked(" + i + ")\">" + filename + "</span><br/>";
+	  songs[i] = filename;
         }
 
         document.getElementById("songlist").innerHTML = value;
@@ -52,10 +69,12 @@
   {
     var action = "start";
     var element = document.getElementById("playbutton");
-    if (element.innerHTML == "Play") {
-      element.innerHTML = "Stop";
+    if (play_state == "stopped") {
+      element.innerHTML = symbol_stop;
+      play_state = "playing";
     } else {
-      element.innerHTML = "Play";
+      element.innerHTML = symbol_play;
+      play_state = "stopped";
       action = "stop";
     }
 
@@ -80,7 +99,7 @@
     xhr.send("");
   }
 
-  function songlist_clicked()
+  function songlist_clicked(index)
   {
     var xhr = new XMLHttpRequest();
 
@@ -102,12 +121,12 @@
 
     xhr.open("POST", "midiplay.fcgi" + "?command=setfile", true);
     xhr.setRequestHeader("Content-type", "text/xml");
-    xhr.send("<data><value>magic.midi</value></data>");
+    xhr.send("<data><value>" + songs[index] + "</value></data>");
   }
 
   function startup() {
     document.getElementById("playbutton").onclick = playbutton_clicked;
-    document.getElementById("songlist").onclick = songlist_clicked;
+    document.getElementById("playbutton").innerHTML = symbol_play;
 
     get_filelist();
   }
@@ -124,9 +143,9 @@ MIDIPLAY
 </div>
 <br/>
 <br/>
-<button id="playbutton" class="button">Play</button>
+<button id="playbutton" class="button"></button>
 
-<br>
+<br/>
 <div>
   Status: <span id="status">ok</span>
 </div>