Tomjunk

## Tomjunk
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
	</script>
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAD_ziHOA-HplCEnGfUt2a0RS5vT4lJK8ASZewWpmekOnhBSF2gxT174gaAbNYZBVhZ3_f5OC13j8CQQ"></script>
    <script type="text/javascript">
	    google.load("jquery", "1.4.2");
    </script>
<script>
    var isFirstTime = true;
    var options = {'showRowNumber': true};
    var data;
    var queryInput;

      // To see the data that this visualization uses, browse to
// http://spreadsheets.google.com/pub?key=rYQm6lTXPH8dHA6XGhJVFsA
var queryparam =('http://spreadsheets.google.com/tq?key=t3R4Mcza2NqwF7VQVKfg4OA&hl&sheet=Athens');
var querysheet =('Athens');
//regex &sheet\=(\w+')$
//Replacement &sheet=test'
//http://www.regular-expressions.info/javascriptexample.html
var query = new google.visualization.Query(queryparam);

    function sendAndDraw() {
      // Send the query with a callback function.
      query.send(handleQueryResponse);
	  intialize();
    }

    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
      data = response.getDataTable();
      var table = new google.visualization.Table(document.getElementById('querytable'));
      table.draw(data, {'showRowNumber': true});
      if (isFirstTime) {
      init();

      }
    }

    function setQuery(queryString) {
      // Query language examples configured with the UI
      query.setQuery(queryString);
      sendAndDraw();
      queryInput.value = queryString;
    }


    google.setOnLoadCallback(sendAndDraw);


    function init() {
      isFirstTime = false;
      (new google.visualization.Table(document.getElementById('table'))).draw(data, options);
      queryInput = document.getElementById('display-query');

    }

    function setQueryFromUser() {
      setQuery(queryInput.value);
    }

    </script>

  </head>
  <body>
<body style="font-family: Arial; border: 0 none;">
<div style="margin-bottom: 10px; padding: 5px; border: 1px solid gray; background-color: buttonface;">
<style type="text/css">
    a.test { font-weight: bold; }
    </style>
<span> Configure the query</span>
<form action="">
<table style="font-size: 12px; ">
  <tr>
    <td>Select</td>
    <td><select id='query-1' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select A,B'>select A,B</option>
      <option value='select A,B,D'>select A,B,D</option>
      <option value='select D,E,A'>select D,E,A</option>
      <option value='select E,G,B,C'>select E,G,B,C</option>
      <option value='select F,A,B,D'>select F,A,B,D</option>
    </select></td>
    <td>Group by:</td>
    <td><select id='query-2' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select B,sum(F) group by B'>select B,sum(F) group
      by B</option>
      <option value='select B,avg(G),sum(E) group by B'>select
      B,avg(G),sum(E) group by A</option>
    </select></td>
    <td>Scalar functions:</td>
    <td> <select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select F-E'>select F-E</option>
      <option value='select F*G'>select F*G</option>
      <option value='select (F-E)*G'>select (F-E)*G</option>
    </select></td>
    <td>Filter:</td>
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='where G &lt; 80'>where G &lt; 80</option>
      <option value='where G &lt; 90'>where G &lt; 90</option>
      <option value="where D &lt;&gt; 'Asia'">where D &lt;&gt; 'Asia'</option>
    </select></td>
  </tr>
  <tr>
    <td>Pivot:</td>
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='select avg(F) pivot B'>select avg(F) pivot B</option>
      <option value='select sum(G),max(F) pivot D'>select sum(G),max(F) pivot D</option>
    </select></td>
    <td>Offset / limit: </td>
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value='offset 3'>offset 3</option>
      <option value='limit 5'>limit 5</option>
      <option value='limit 4 offset 2'>limit 4 offset 2</option>
    </select></td>
    <td>Label / Format:</td>
    <td><select id='query-3' onchange='setQuery(this.value)'>
      <option value=''>None</option>
      <option value="select A label A 'Manager Name'">select A label A
      'Manager Name'</option>
      <option value="select G format G '00%'">select G format G '00%'</option>
    </select></td>
  </tr>
</table>
</form>
</div>
<table style='width: 100%;'>
  <tr style='font-size: 20px;'>
    <td>Original Table</td>
    <td>Query Table</td>
  </tr>
  <tr>
    <td style="width: 50%; padding: 10px; vertical-align: top;">
    <div id="table"></div>
    </td>
    <td style="width: 50%; padding: 10px; vertical-align: top;">
    <div id="querytable"></div>
    <div style='font-size: 15px; font-weight: bold; padding: 5px;'><input
      type="text" style="width: 100%" id='display-query' /> <br></br>
    <input type="button" value='edit &amp; submit' onclick="setQueryFromUser()" /></div>
    </td>
  </tr>
</table>
<div id="querystr">
<script>
document.write('querystr '+queryparam+' end');

</script>
<script>
function intialize(){
       $("a").addClass("test");
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
}
</script>
<br>
<br>
</div>
Choose your area:  Select Month and Year You purchased your home:<br>
    <select name ="areas">
    <option value ="statewide">State Wide</option>
    <option value ="athens">Athens</option>
    <option value ="birmingham">Birmingham</option>
    </select>
 <select name ="month">
    <option value ="Jan">Jan</option>
    <option value ="Feb">Feb</option>
    <option value ="Mar">Mar</option>
    </select>
<select name ="Year">
    <option value ="2000">2000</option>
    <option value ="2001">2001</option>
    <option value ="2002">2002</option>
    </select>  <br>

Date    Median   Average Active Sales Inv/sales<br>
<input type="text" name="odate" /><input type="text" name="omedian" /><input type="text" name="oaverage" /><input type="text" name="oactitve" /><input type="text" name="osales" /><input type="text" name="oinvsales" /><br>
<input type="text" name="ndate" /><input type="text" name="nmedian" /><input type="text" name="naverage" /><input type="text" name="nactitve" /><input type="text" name="nsales" /><input type="text" name="ninvsales" /><br>
% change from : Month Year to Month Year:<br>
The values for the % change in each element will be here<br>
Contact your local Realtor for more localized information The MLS for your area is located at : http://localmls.com
<br>
    <a href="http://jquery.com/">Jquery</a><br>

</body>
</html>