June 7, 2010 18:11
diff --git a/Tomjunk b/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>
	<!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 FG'>select FG</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 < 80'>where G < 80</option>
	<option value='where G < 90'>where G < 90</option>
	<option value="where D <> 'Asia'">where D <> '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 & 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>