<?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" />
    //Necessário para usar o userprefs
    <Require feature="setprefs" />
  </ModulePrefs>

  <UserPref name="mylist"
    display_name="Add Teste"
    datatype="list"
    default_value="Hoje|Amanha|ontem"/>

  <Content type="html">
  <![CDATA[

  // css que configura a div com a combo oculta que aparece quando clica em uma linha da table.
  <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>

  //importa libs do google-api
  <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() {
      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) {
      getComboValues();
      testeUserPrefs();
      // Default error message handling
      gadgetHelper = new google.visualization.GadgetHelper();
      if (!gadgetHelper.validateResponse(response))
        return;
      // pega os dados da table.
      data = response.getDataTable();
      // cria uma table
      table = new google.visualization.Table(document.getElementById('visualization'));

      // Aplica formato e seta o valor formatado na primeira coluna.
      //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]);
      
      //adiciona os dados a table criada
      table.draw(data, {showRowNumber: false, allowHtml: true});
  
      //adiciona a table a um evento de select
      google.visualization.events.addListener(table, 'select', function() {
	t();
      });

    }

    // pega os valores da single-table e adiciona a uma combo criada com javascript. 
    function getComboValues(){
      var query2 = new google.visualization.Query('http://spreadsheets.google.com/pub?key=ttAIQlCACg2EYUJs7dC_vfw&single=true&gid=6&output=html');
      query2.send(preencheCombo);
    }

    function preencheCombo(response){
      gadgetHelper = new google.visualization.GadgetHelper();
      if (!gadgetHelper.validateResponse(response))
        return;

      var data2 = response.getDataTable();

      var cv = new google.visualization.Table(document.getElementById('combo_values'));

      //testeUserPrefs2(data2, data2.getNumberOfRows());

      cv.draw(data2, {showRowNumber: false, allowHtml: true});

      var html = "";

      html += "<b>Teste preenchendo combo com os dados da tabela importada:</b><br /><select>";
	for (var i = 0; i < data2.getNumberOfRows(); i++) {
	  var term = (data2.getValue(i, 0));
	  html += "<option>"+term + "</option><br />";
	}
      html += "</select>";

      document.getElementById("content_div2").innerHTML = html;

    }

    //vai abrir popup
    function t(){
      document.getElementById('pop').style.display='block';
    }

    // adiciona novo valor a célula específica na table
    function teste(value){
      var row = table.getSelection()[0].row;
      data.setCell(row, 0, ''+value);
      table.draw(data, {showRowNumber: false, allowHtml: true});
      document.getElementById('pop').style.display='none';
    }

    // cria uma combo com valores fixos vindos da definição da tag userprefs no início do código
    function testeUserPrefs(){
      
      var prefs = new gadgets.Prefs();

      //SETA outros valores a array.
      prefs.setArray("mylist", ["Nokia","CNET","FDP"]);

      var terms = prefs.getArray("mylist");
      var html = "";

      // Itera os dados e cria a combo com innerHTML
      if (terms.length == 0)
      {
	html += "Edit the userprefs to add terms.";
      }
      else {
	html += "<b>Teste preenchendo combo com userprefs:</b><br /><select>";
	for (var i = 0; i < terms.length; i++) {
	  var term = (terms[i]);
	  html += "<option>"+term + "</option><br />";
	}
	html += "</select>";
      }
      document.getElementById("content_div").innerHTML = html;
    }

  </script>

  <div id=content_div></div>
  <br/>

  <b>Tabela importada:</b>
  <div id="combo_values">
    <img src="http://visapi-gadgets.googlecode.com/svn/trunk/image/spinner.gif" />
  </div>
  <br/>

  <div id=content_div2></div>
  <br/>

  <b>Tabela com funções dinâmicas:</b>
  <div id="visualization">
    <img src="http://visapi-gadgets.googlecode.com/svn/trunk/image/spinner.gif" />
  </div>
  <br/>

  //div que permanece oculta.
  <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>