From d486f440673c06ff5b58400352cc85690eaca71f Mon Sep 17 00:00:00 2001
From: James Wheare <james@wheare.org>
Date: Mon, 20 Jul 2009 16:19:27 +0100
Subject: [PATCH] Fix fucking demos

---
 demos/haudio.html | 54 ++++++++++++++++++++++-------------------
 demos/search.html | 62 ++++++++++++++++++-----------------------------
 2 files changed, 53 insertions(+), 63 deletions(-)

diff --git a/demos/haudio.html b/demos/haudio.html
index a65c39b..ed228f1 100755
--- a/demos/haudio.html
+++ b/demos/haudio.html
@@ -11,7 +11,7 @@ <h2>hAudio Demo</h2>
     that represent artist/track names.
 </p>
 <form action="">
-<input type="submit" value="Microformats Go!" id="gomicroformats" onclick="go_microformats()" disabled="disabled" />
+<input type="submit" value="Microformats Go!" id="gomicroformats" onclick="return go_microformats()" disabled="disabled" />
 </form>
 <ul id="tracks">
     <li>
@@ -90,6 +90,7 @@ <h2>hAudio Demo</h2>
 <script type="text/javascript">
 // create a custom playdar callback that will handle results for this query:
 var results_handler = function (response, finalanswer) {
+    var status = $(response.qid);
     if (response.results.length) {
         // generate tooltip with details:
         var tt = "Sources: ";
@@ -98,13 +99,13 @@ <h2>hAudio Demo</h2>
             tt += r.source + "/" + r.bitrate + "kbps/" + Playdar.Util.mmss(r.duration) + " ";
         }
         // update status element:
-        $(response.qid).className = 'playdar_found';
+        status.className = 'playdar_found';
         
         var sound = Playdar.player.register_stream(response.results[0]);
-        $(response.qid).innerHTML = "<a href=\"#\" title=\""+tt+"\" class=\"playbutton\">" + response.results.length + "<span style=\"display: none;\">" + response.results[0].sid + "<\/span><\/a>";
+        status.update("<a href=\"#\" title=\""+tt+"\" class=\"playbutton\">" + response.results.length + "<span style=\"display: none;\">" + response.results[0].sid + "<\/span><\/a>");
     } else if (finalanswer) {
-        $(response.qid).className = 'playdar_notfound';
-        $(response.qid).innerHTML = ':(';
+        status.className = 'playdar_notfound';
+        status.update(':(');
     }
 };
 
@@ -125,9 +126,9 @@ <h2>hAudio Demo</h2>
     },
     onAuth: function () {
         $('gomicroformats').disabled = false;
-    },
-    onResults: results_handler
+    }
 });
+Playdar.client.register_results_handler(results_handler);
 soundManager.url = '\/static\/soundmanager2_flash9.swf';
 soundManager.flashVersion = 9;
 soundManager.onload = function () {
@@ -135,30 +136,33 @@ <h2>hAudio Demo</h2>
     Playdar.client.init();
 };
 
+$('tracks').observe('click', function (e) {
+    var el = e.element();
+    if (el.match('a.playbutton')) {
+        e.stop();
+        var sid = el.down('span').innerHTML;
+        Playdar.player.play_stream(sid);
+    }
+});
+
+var mkstatuselem = function (id) {
+    var status = new Element('span', {
+        "id": id,
+        "class": 'playdar_searching'
+    }).update("&nbsp; &nbsp;");
+    return status;
+};
+
+
 function go_microformats() {
-    $('tracks').observe('click', function (e) {
-        var el = e.element();
-        if (el.match('a.playbutton')) {
-            e.stop();
-            var sid = el.down('span').innerHTML;
-            Playdar.player.play_stream(sid);
-        }
-    });
-    
-    var mkstatuselem = function (id) {
-        var d = document.createElement('span');
-        d.id = id;
-        d.className = 'playdar_searching';
-        d.innerHTML="&nbsp; &nbsp;";
-        return d;
-    };
-    
     Playdar.client.autodetect(function (track) {
         var uuid = Playdar.Util.generate_uuid();
         // add a "searching..." status :
-        track.element.appendChild(mkstatuselem(uuid)); 
+        var status = mkstatuselem(uuid);
+        track.element.insert(status);
         return uuid;
     });
+    return false;
 }
 </script>
 </body>
diff --git a/demos/search.html b/demos/search.html
index 494370d..628dcbb 100755
--- a/demos/search.html
+++ b/demos/search.html
@@ -30,16 +30,22 @@ <h2>Search Demo</h2>
         <a href="#" id="clearResults">clear</a>
     </span>
     <h3 style="margin: 10px 0 5px 0;">Search Results <span style="background-color:lightyellow; padding: 3px;" id="numresultsspan">0</span></h3>
-    <table style="width:100%; font-size:85%;" id="resultstbl"><tr style="font-weight: bold;">
-        <td>Score</td> 
-        <td>Pref</td> 
-        <td style="width:25px;"> </td>
-        <td>Artist</td>
-        <td>Album</td>
-        <td>Track</td>
-        <td>Source</td>
-        <td>Link</td>
-    </tr></table>
+    <table style="width:100%; font-size:85%;" id="resultstbl">
+        <thead>
+            <tr style="font-weight: bold;">
+                <td>Score</td> 
+                <td>Pref</td> 
+                <td style="width:25px;"> </td>
+                <td>Artist</td>
+                <td>Album</td>
+                <td>Track</td>
+                <td>Source</td>
+                <td>Link</td>
+            </tr>
+        </thead>
+        <tbody id="resultstbody">
+        </tbody>
+    </table>
     <br/>
 </div>
 
@@ -70,12 +76,14 @@ <h3 style="margin: 10px 0 5px 0;">Search Results <span style="background-color:l
     },
     
     build_result_row: function (result) {
-        var tr = document.createElement('tr');
+        var tr = new Element('tr');
         tr.id = result.sid;
         
         var td;
         // Score
-        td = new Element('td').update(result.score.toFixed(3));
+        td = new Element('td', {
+            "class": "score"
+        }).update(result.score.toFixed(3));
         tr.insert(td);
         // Preference
         td = new Element('td').update(result.preference);
@@ -119,25 +127,7 @@ <h3 style="margin: 10px 0 5px 0;">Search Results <span style="background-color:l
         if ($(result.sid)) {
             return;
         }
-        var rows = $$('#resultstbl tr');
-        // First result
-        if (rows.length == 1) {
-            $('resultstbl').down('tbody').insert(DEMO.build_result_row(result));
-            return;
-        }
-        // walk rows and insert in score-order
-        for (k = 1; k < rows.length; k++) {
-            var row = rows[k];
-            var rowscore = parseFloat(row.down('td').innerHTML);
-            if (rowscore < result.score) {
-                row.insert({before: DEMO.build_result_row(result)});
-                break;
-            }
-        }
-        // put at the end, lowest so far:
-        if (k == rows.length) {
-            $('resultstbl').down('tbody').insert(DEMO.build_result_row(result));
-        }
+        $('resultstbody').insert(DEMO.build_result_row(result));
     },
     
     // Insert results into the table in order of score:
@@ -147,22 +137,18 @@ <h3 style="margin: 10px 0 5px 0;">Search Results <span style="background-color:l
             qsolved = response.query.solved ? "solved" : "unsolved";
             qsolved = " (" + qsolved + ")";
             $('resolveProgress').hide();
+            $('numresultsspan').update("Found: " + response.results.length + qsolved);
+            response.results.each(DEMO.process_result);
         } else {
             $('resolveProgress').show();
         }
-        $('numresultsspan').update("Found: " + response.results.length + qsolved);
-        response.results.each(DEMO.process_result);
     },
     
     clear_results: function () {
         Playdar.player.stop_current();
         $('numresultsspan').innerHTML = '0';
         // clear table of all but first(header) row
-        var trs = $$('#resultstbl tr');
-        var len = trs.length;
-        for (var i = len-1; i > 0; i--) {
-            $$('#resultstbl tr')[i].remove();
-        }
+        var trs = $('resultstbody').update();
     },
     
     resolve: function (art, alb, trk) {