1 files changed, 76 insertions, 0 deletions
diff --git a/search-random.html b/search-random.html
new file mode 100644
index 0000000..1d0959d
--- /dev/null
+++ b/search-random.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+<head>
+<title>Photoblaster Search Widget</title>
+<style type="text/css">
+  #images img { max-width: 200px; height: 90px; margin: 5px; }
+</style>
+<body>
+
+<div id="ui">
+  <input type="text" id="q">
+  <button id="name">N</button>
+  <button id="search">S</button>
+  <button id="random">R</button>
+  <div id="images"></div>
+</div>
+
+<div id="result">
+  <input type="text" id="url">
+  <div id="image"></div>
+</div>
+
+</body>
+<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript">
+
+$("#random").click(random)
+$(document).on("click", "#images img", choose)
+
+random();
+
+function choose(){
+  $("#image").empty().append( $(this).clone() )
+  $("#result #url").val(this.src);
+}
+
+function load(ims){
+  $("#images").empty();
+  for (var i = 0; i < ims.length; i++) {
+    image(ims[i]);
+  }
+}
+function image(im){
+  var img = new Image ();
+  img.onload = function(){
+    $("#images").append(img);
+  }
+  img.src = im.url;
+  if (img.complete) img.onload();
+}
+
+function random(){
+  opt = {};
+  opt.data = { random: 1 };
+  opt.success = load;
+  fetch(opt);
+}
+
+function fetch(opt){
+  var params = {random:1};
+  $.ajax({
+    'url': "http://asdf.us/cgi-bin/im/list",
+    'data': params,
+    'dataType': "jsonp",
+    'success': opt.success || function(data){
+      console.log(data);
+    },
+    'error': opt.error || function(err){
+      console.log(err);
+    }
+  });
+}
+
+</script>
+</html>
+