712 book list - v2

required books for 712 - Beelen

HTML

<script src="http://ctslearning.org/js/jquery.tmpl.min.js"></script>
<link rel="stylesheet" href="http://ctslearning.org/css/books.css">
<script src="http://ctslearning.org/js/external.js"></script>
<div class="main">
<div id="booksreq">
<i>Loading...</i>
</div>
<div id="booksmore">
<i>Loading...</i>
</div>
</div>

CSS

#booksmore {display:none}

JavaScript

$("document").ready(function() {

    // ** books info for 304
    // set shelf access info
    var myuser = "115939388709512616120"; 
    var myshelf = "1001"; 
    var myshelf2 = "1002"; 
    
    var annots = {
    "x1wyAAAACAAJ": "my books",
    };

    // ** template js
    // set api variables and queries
    var myapikey = 'AIzaSyC1xCJVKtFEKbCv4Sq9e4dl0KO1zfvE6UU'; // for ctslearning   
    var gbapiroot = 'https://www.googleapis.com/books/v1/users/' + myuser + '/bookshelves/';
    var gbapitail = '/volumes?key=' + myapikey;
    var myquery = gbapiroot + myshelf + gbapitail;
    var myquery2 = gbapiroot + myshelf2 + gbapitail;
    var gbshelfroot = "http://books.google.com/books?uid=";
    var myshelfurl = gbshelfroot + myuser + "&as_coll=" + myshelf; // removed + "&view_type=grid"
    var myshelf2url = gbshelfroot + myuser + "&as_coll=" + myshelf2;

    // set markup variables
    var gbbookroot = "http://books.google.com/books?";
    var gbbooktail = "&source=gbs_ViewAPI";
    var gbimgroot = "<img class=gbs_thumb_img border=0 src=http://bks1.books.google.com/books?";
    var gbimgtail = "&printsec=frontcover&amp;img=1&amp;zoom=5";
    var gbimgsrc = "<img src=http://books.google.com/intl/en/googlebooks/images/gbs_preview_button1.gif>";
    var theid = "${id}";

    // create the markup - via api.jquery.com/jquery.tmpl
    var markup = "{{each items}}" + "<div class=book id=" + theid + ">"
    + "<p><b>title</b> is ${volumeInfo.title}"
    + "<p><b>author</b> is ${volumeInfo.authors}"
    + "<p><b>isbn10</b> is ${volumeInfo.industryIdentifiers.type}"             
    + "</div>{{/each}}";
        console.log("markup complete");
    
    // compile the markup as a named template
    $.template("booklist", markup);

    // get the data, return as JSON
    $.getJSON(myquery, function(data) {
        // log the data
        console.log(data);

        // replace 'Loading' with a div
        $("#booksreq").html('<div id="results1"><h3><a class=viewnew href=' 
...