<Module>
<ModulePrefs
title="Fusion Tables"
title_url="http://www.google.com/fusiontables"
description="Fusion Tables"
width="520"
height="450">
</ModulePrefs>
<Content type="html">
<style>
.map img {background-color: transparent;}
#map-canvas { width:400px; height:450px; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div class="map">

    <script type="text/javascript">

    var map;

    var layer1;
    var layer2;

    function initialize() {
       map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(-30.07080000, -51.1900000),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       });
       layer1 = new google.maps.FusionTablesLayer({
          query: {
             select: "'geometry'",
             from: '4756019',
          },
          map: map
       });
       layer2 = new google.maps.FusionTablesLayer({
          query: {
          select: "'geometry'",
       from: '4755921',
       },
          map: map
       });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    //FUNCTION TO CHANGE LAYERS
    function changeMap(layerNum) {
       if (layerNum == 1) {
          updateMap(layer1);
       }
       if (layerNum == 2) {
          updateMap(layer2);
       }
    }

    //FUNCTION TO UPDATE LAYERS
    function updateMap(layer) {
       var layerMap = layer.getMap();
       if (layerMap) {
          layer.setMap(null);
       } else {
          layer.setMap(map);
       }
    }

    //FUNCTION TO FILTER DATA BY COLUMNS AND ROWS
    function filterData() {
       var searchString = document.getElementById('search-string').value.replace(/'/g, "\\'");
       var filter = document.getElementById('filter').value.replace(/'/g, "\\'");
       if (filter === "UEU") {
        layer1.setOptions({
            query: {
                select: "'geometry'",
                from: '4756019',
                where: "'UEU' = '" + searchString + "'"
            }
        });
    }
    else if (filter === "SUBUEU") {
        layer1.setOptions({
            query: {
                select: "'geometry'",
                from: '4756019',
                where: "'SUBUEU' = '" + searchString + "'"
            }
        });
    }
    else if (filter === "CODIGO") {
        layer1.setOptions({
            query: {
                select: "'geometry'",
                from: '4756019',
                where: "'CODIGO' = '" + searchString + "'"
            }
        });
    }
    }
    //FUNCTION TO RESET DATA
    function resetData() {
    document.getElementById('search-string').value = "";
       layer1.setOptions({
          query: {
             select: "'geometry'",
             from: '4756019'
          }
       });
    }

    </script>

    <div id="map-canvas"></div>

    <div style="margin-top: 10px;">
       <label>Tipo</label>
       <select id="filter">
          <option value="">--selecionar--</option>
          <option value="UEU">UEU</option>
          <option value="SUBUEU">SUBUEU</option>
          <option value="CODIGO">CODIGO</option>
       </select><br><br>
    <input type="text" id="search-string">
    <input type="button" onclick="filterData();" value="Find!">
    <input type="button" onclick="resetData();" value="Reset Layer"><br><br>
    <label>Layers:</label><br>
    <label>RAREFEITA</label><input type="checkbox" value="1" onclick="changeMap(this.value);" checked="checked"><br>
    <label>INTENSIVA</label><input type="checkbox" value="2" onclick="changeMap(this.value);" checked="checked"><br>
    </div>

    </div>
</Content>
</Module>