<?xml version="1.0" encoding="UTF-8"?>
<Module>
   <ModulePrefs title="Custom gadget" 
      author="Google"
      author_email="visualization.api@gmail.com"
      description="Custom gadget"
      thumbnail="http://visapi-gadgets.googlecode.com/svn/trunk/image/thumbnail.png" 
      screenshot="http://visapi-gadgets.googlecode.com/svn/trunk/image/screenshot.png">
    <Require feature="idi" />
    <!--<Require feature="locked-domain" />  -->
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
  
  <style>
    #pop{display:none;position:absolute;top:18%;left:12%;margin-left:-150px;margin-top:-100px;padding:10px;width:90px;height:22px;border:1px solid #d0d0d0}
  </style>
  
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['table']});
    google.setOnLoadCallback(init);

    var query;
    var gadgetHelper;
    var data;
    var table;
    var formatter;

    function init() {
      //var container = document.getElementById('chart');
      sendQuery();
    }

    function sendQuery() {
      query = new google.visualization.Query('http://spreadsheets.google.com/pub?key=ttAIQlCACg2EYUJs7dC_vfw&single=true&gid=1&output=html');
      query.send(handleQueryResponse);  
    }
    
    function handleQueryResponse(response) {
      // Default error message handling
      gadgetHelper = new google.visualization.GadgetHelper();
      if (!gadgetHelper.validateResponse(response))
        return;
      
      data = response.getDataTable();
      
      table = new google.visualization.Table(document.getElementById('visualization'));
      
      //formatter = new google.visualization.TablePatternFormat('<select onchange="JavaScript:teste(this.value);"><option value="Ave">Avestruz</option><option value="Mamifero">Porco</option><option value="Reptil">Jacaré</option></select>');
      //formatter.format(data, [0, 1]); // Apply formatter and set the formatted value of the first column.
      
      table.draw(data, {showRowNumber: false, allowHtml: true});
      
      google.visualization.events.addListener(table, 'select', function() {
	//var row = table.getSelection()[0].row;
	//alert('valor da linha '+row+' coluna 2 ' + data.getValue(row, 1));
	//data.setCell(row, 1, 'coluna '+data.getValue(row, 1));
	//table.draw(data, {showRowNumber: false, allowHtml: true});
	t();
      });
      
    }   
    
    function t(){
      //alert('vai abrir popup');
      document.getElementById('pop').style.display='block';
    }
    
    function teste(value){
      //alert('valor da combo: '+value);
      var row = table.getSelection()[0].row;
      //alert('valor da celula 0,2: '+data.getValue(row,0));
      data.setCell(row, 0, ''+value);
      //alert('valor da celula 1,2: '+data.getValue(row,0))
      table.draw(data, {showRowNumber: false, allowHtml: true});
      //alert('vai fechar');
      document.getElementById('pop').style.display='none';
    }
    
  </script>
  <div id="visualization">
    <img src="http://visapi-gadgets.googlecode.com/svn/trunk/image/spinner.gif" />
  </div>
  
  <div id="pop">
    
    <select onchange="JavaScript:teste(this.value);">
      <option value="Avestruz">Avestruz</option>
      <option value="Porco">Porco</option>
      <option value="Jacaré">Jacaré</option>
    </select>
    <font style="color:red;font-size:8px;" onclick="document.getElementById('pop').style.display='none';">[close]</font>
  </div>
  
  ]]>
 </Content>
</Module>