nytbookfolio.js

/*nytbookfolio.js
by Megan O'Keefe
project: BOOKFOLIO
began 3/27/13, completed 4/8/13

Summary: nytscript handles the scripting for the main page of Bookfolio. This file
accomplishes three main tasks on loading the index.html page:
	1) Grabs a local json file from the NYT Bestseller API and extracts title, author 
	and ISBN data from the results[] array (20 items) and places them in separate 
	title, author and isbn arrays.
	2) Uses the isbn numbers extracted from (1) to grab cover images from Powell's books
	(URL concatenation), and then places those images in a table
	3) Upon creation of each cover image, binds each on an "on click" event to open
	the social media page, while passing along in the URL title and author data from the 
	respective arrays
*/

//global variables
	//table for the images
    var table;		
    //2D array of "ranks" for the top 20 books— used 
    var data = [[1,2,3,4,5], [6,7,8,9,10], [11,12,13,14,15], [16,17,18,19,20]];
    //1D arrays for book information, where the index+1 will correspond to the 
    //rank in "data" (i.e. all information at index 0 corresponds to the same 
	var isbns = [];
	var titles = [];
	var authors = [];
	
	/*"$(function()" corresponds to an "anonymous function" which will serve as the overarching
	frame for the three functions below. An anonymous function executes
	if you were to remove this line, getNYT() would try and execute as the DOM is loading,
	leading to problems in the execution.*/
    $(function() {
    
	getNYT(); 
	/*the getNYT function fills the titles, authors, and isbns arrays with data from 
	top 20 bestsellers. Although "results," "isbns," etc. directly corresponds with the NYT API, 
	this method could be used to move data from any json to any data structure using its 
	basic getJSON and 'for each item' structure. */
	function getNYT(){
		//use jQuery getJSON call to take the local JSON from the NYT API, has
		//embedded callback function (in brackets)
		$.getJSON("nytimes.json", function(response) {
			//define "books" to be each object in the results[] array 
        	var books = response.results;
	     	//for all 20 books in the results array....
        	 $.each(books, function(i, item){
        	 		//....fill the arrays with respective title, author and isbn       
                    isbns[i] = item.book_details[0].primary_isbn13;
                    titles[i] = item.book_details[0].title;
                    authors[i] = item.book_details[0].author;
                    }); 
        //embedded call to populateTable function(below) to ensure the arrays are filled
        //before trying to access their data
         populateTable(); 
         });
       };

    /*populateTable() is a function that creates a table and fills it with cover images
    based on isbn numbers stored as strings in an array. Though this function works with
    a global isbns array and incorporates an on-click function specific to Bookfolio,
    this function could be used as a way to get any images to be displayed
    in a table, such as movie posters or an image gallery, as long as you change the 
    image dimensions.*/
    
    function populateTable(){
    		//using JQuery, create our table container
			table = $('table');
			//for each array within the 2D data array  (will iterate 4 times for 4 rows)
			for (var i in data){
				//create a row in html using jquery
		    	var row = $('<tr></tr>'); 
		    	//for each item within the subarray (will iterate 5 times for each row item)
		    	for (var j in data[i]){
		    		//defines index as the desired 1D array based on "rank"-1 
			    	var index = data[i][j]-1; 
			    	//creates the image w/ corresponding ISBN concatenated to a simple
			    	//Powell's books URL.
			    	var img = $('<img>',
			    	{src: 'http://covers.powells.com/' + isbns[index] + '.jpg', 
				  	width : "150", height : "220", 
				  	alt: "cover "+index, 
				  	title: titles[index], 
				  	//specify an ID for each title (0-19), to be used as an identifying tag
				  	//in the open_age function below
				  	id: index}) 
				  //bind each image, on click, to execute the open_page function	
				  .bind('click', open_page);
				  var td = $('<td></td>'); //create a table element
                  img.appendTo(td); //put the image created above in the table element
                  td.appendTo(row); //put the element in the table row
                  }
            row.appendTo(table); //put the completed table row in the table
	        }
	       };
	   });    
	 
	 /*The open_page function is executed when the user clicks on one of the book cover
	 images. Its purpose is to build a URL based on concatenating the generic twittergoodreads
	 page with data specific to the book (title and author, from the global arrays). The
	 function then opens the URL. Although we are using an already created social media
	 page and global book data for our URL, this function is useful as a template for
	 passing along any kind of data from page to page.*/
	 function open_page() {
			var url = 'twittergoodreads.html#' + 
						encodeURIComponent(JSON.stringify({title: titles[this.id], 
				  										author: authors[this.id],
				  										isbn: isbns[this.id]})); 
			window.open(url,"_self");
	 };