/dev/docs/api/books/example2.html
Type: /type/rawtext
rawtext: value: <html>
  <head>
      <style type="text/css">
        .book { 
            vertical-align: middle; 
            clear: both; 
            border-bottom: 1px solid #CCCCCC; 
            height: 65px;
        }
        .cover { float: left; margin: 5px; width: 100px;}
        .cover img {height: 58px; border: none;}
        .cover a {text-decoration: none;}
      </style>
  
  <title>Sample Using JSON Output</title>
  <script>
  function listEntries(booksInfo) {
    // Clear any old data to prepare to display the Loading... message.
    var div = document.getElementById("data");
    if (div.firstChild) div.removeChild(div.firstChild);
  
    var mainDiv = document.createElement("div");
    for (i in booksInfo) {
     // Create a DIV for each book
       var book = booksInfo[i];
       mainDiv.appendChild(div_book(book));
    }
    div.appendChild(mainDiv);    
  }
  
    function div_book(book) {
        // use the detault image when thumbnail is not available.
        var thumbnail = book.thumbnail_url || "http://covers.openlibrary.org/b/id/0-S.jpg";
        
        // create cover div
        var cover = create("div", {className: "cover"});
        cover.innerHTML = '<a href="' + book.info_url + '"><img src="' + thumbnail + '"/></a>'
        
        // create details
        var details = create("div", {className: "details"});
        details.innerHTML = '' 
            + '<a href="' + book.info_url + '">' + book.details.title + '</a>'
            + ' By '
            + map(book.details.authors, function(a) { return '<a href="' + a.key + '">' + a.name + "</a>";})
            + '<br/>'
            + book.details.publishers.join(", ");
    
        var div = create("div", {className: "book"}, [cover, details]);
        return div;
    }
        
    function create(tag, attrs, children) {
        var e = document.createElement(tag);
        for (var key in attrs) 
            e[key] = attrs[key];
        for (var i in children)
            e.appendChild(children[i]);
        return e;
    }
        
    function map(elems, f) {
        var result = [];
        for (var i in elems)
            result.push(f(elems[i]));
        return result;
    }
  
  /**
   * @param {DOM object} query The form element containing the
   *                     input parameters "isbns"
   */
  function search(query) {
    // Clear any old data to prepare to display the Loading... message.
    var div = document.getElementById("data");
    if (div.firstChild) div.removeChild(div.firstChild);
  
    // Show a "Loading..." indicator.
    var div = document.getElementById('data');
    var p = document.createElement('p');
    p.appendChild(document.createTextNode('Loading...'));
    div.appendChild(p);
  
    // Delete any previous Open Library JSON queries.
    var jsonScript = document.getElementById("jsonScript");
    if (jsonScript) {
      jsonScript.parentNode.removeChild(jsonScript);
      }
        
    // Add a script element with the src as the user's Open Library query. 
    // JSON output is specified by including the alt=json-in-script argument
    // and the callback function is also specified as a URI argument.
    var scriptElement = document.createElement("script");
    scriptElement.setAttribute("id", "jsonScript");
    scriptElement.setAttribute("src",
        "http://openlibrary.org/api/books?bibkeys=" + 
        escape(query.isbns.value) + "&details=true&callback=listEntries");
    scriptElement.setAttribute("type", "text/javascript");
    // make the request to Open Library
    document.documentElement.firstChild.appendChild(scriptElement);
    }
  
  //-->
  </script>
  </head>
  <body>
      <h2>Sample Using JSON Output</h2>
      <p><h3>Introduction</h3></p>
      <form onSubmit="return false">
        <p> 
          Query: <input type="text" name="isbns" value="0064430073, 0140289208, OL7440033M,LCCN:97002147" style="width: 300px;">
          <button id="search_button" onClick="search(this.form)">Search</button></p>
      </form>
      <div id="data" style="margin-left: 5px;"></div>
    </body>
</html>
content_type: text/html