/*
    *  The SearchControl manages searchers and draws a UI for them.  However,
    *  searchers can be used by themselves without the SearchControl.  This is
    *  called using a "Raw Searcher".  When doing this, you must handle and draw
    *  the search results manually.
    */
    
    google.load('search', '1');
    
    var imageSearch;
    
    function addPaginationLinks() {
      // The cursor object has all things to do with pagination
      var cursor = imageSearch.cursor;
      var curPage = cursor.currentPageIndex; // check what page the app is on
      var pagesDiv = document.createElement('div');
      for (var i = 0; i < cursor.pages.length; i++) {
        var page = cursor.pages[i];
        if (curPage == i) { // if we are on the curPage, then don't make a link
          var label = document.createTextNode(' ' + page.label + ' ');
          pagesDiv.appendChild(label);
        } else {
          // If we aren't on the current page, then we want a link to this page.
          // So we create a link that calls the gotoPage() method on the searcher.
          var link = document.createElement('a');
          link.href = 'javascript:imageSearch.gotoPage('+i+');';
          link.innerHTML = page.label;
          link.style.marginRight = '3px';
          pagesDiv.appendChild(link);
        }
      }
    
      var contentDiv = document.getElementById('GoogleSearchImage');
      contentDiv.appendChild(pagesDiv);
    }
    
    function searchComplete() {
      // Check that we got results
      if (imageSearch.results && imageSearch.results.length > 0) {
        // Grab our content div, clear it.
        var contentDiv = document.getElementById('GoogleSearchImage');
        contentDiv.innerHTML = '';
    
        // Loop through our results, printing them to the page.
        var results = imageSearch.results;

        for (var i = 0; i < 3; i++) {
          // For each result write it's title and image to the screen
          var result = results[i];
          var imgContainer = document.createElement('div');

			imgContainer.style.padding="6px";
			contentDiv.style.width="530px";

			imgContainer.style.display="inline";
    
          	//var title = document.createElement('div');
          	// We use titleNoFormatting so that no HTML tags are left in the title
          	//title.innerHTML = result.titleNoFormatting;
    
			var newImg = document.createElement('img');
			newImg.setAttribute('alt', 'Persoon van het Jaar - Person of the Year');
			/*
			newImg.onclick= function() {
				var imgLink = result.url;
				alert(imgLink);
		   		window.open(imgLink,'window_name','toolbar=no');
				return false;
			}
			*/

          // There is also a result.url property which has the escaped version
          newImg.src = result.tbUrl;
	
          //imgContainer.appendChild(title);
          imgContainer.appendChild(newImg);
    
          // Put our title + image in the content
          contentDiv.appendChild(imgContainer);

        }
    
        // Now add the paging links so the user can see more results.
        addPaginationLinks(imageSearch);
      }
    }