mhawksey/index.html

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SpreadEmbed</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery.embedly.min.js"></script>
<script type="text/javascript">
      google.load('visualization', '1');
    </script>
<script type="text/javascript">
/*
   Copyright 2011 Martin Hawksey

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
*/
$(document).ready(function() {
	$('#loader').hide(500);
	$('#theRest').hide();
});

function getEmbedly(){
	$('#loader').show(500);
	var url = document.getElementById('vizUrl').value;
	var col = document.getElementById('gsCol').value;
	var head = document.getElementById('gsHead').checked;
	var row = 1;
	if (head) row = 2;
	if (col!='') url+='&range='+col+''+row+':'+col+'50';
	$('#urlout').html("<a href='http://hawksey.info/spreadembed/se.html?url="+encodeURIComponent(url)+"'>Permalink</a>");
	var query = new google.visualization.Query(url);
    query.send(handleSelectResponse);
}
function handleSelectResponse(response) {
	if (response.isError()) {
	alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	return;
	}

	var data = response.getDataTable();
	var arr = new Array();
	for (i=0; i<data.getNumberOfRows(); i++){
		$("#stuff LI").remove();
		arr.push(data.getValue(i, 0));
	}
	$.embedly(arr, {maxWidth:500, key: "2b457b60f04a11e0b79e4040d3dc5c07"},  function(oembed){
	  if (oembed != null) {
		$("#stuff").append('<li>'+(oembed.code)+'</li>');
	  }
	});
	$('#loader').hide(500);
}

 // Mod from http://ouseful.open.ac.uk/datastore/gspreadsheetdb2.php
function preview() {
  if (document.getElementById('gsKey').value!='') key=document.getElementById('gsKey').value;
  if (/key=([^&]*)/.test(key)) key=/key=([^&]*)/.exec(key)[1];
  var url='https://spreadsheets.google.com/feeds/worksheets/'+key+'/public/basic?alt=json';
  $.getJSON(url,function(json){
	var vizUrl=document.getElementById('vizUrl');
	for (var u in json['feed']['entry']) {
	  vizUrl.options[u]=new Option(json['feed']['entry'][u]['title']['$t'],json['feed']['entry'][u]['link'][2]['href']);
	}
	$('#theRest').show(500);
  });
}
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Powered by <a href="http://api.embed.ly"><img src="http://static.embed.ly/images/logo.png"/></a></div>
<div id="content" class="main">
  <h1>SpreadEmbed</h1>
  <p align="center">This tool is inspired by <a href="http://enterprise20.squarespace.com/journal/2011/10/6/curated-archive-of-the-business-gets-social-gartnerchat.html">this brilliant idea</a> by <a href="http://ethnologician.org/about-me/" target="_blank">Saqib Ali</a> and put together by <a href="http://mashe.hawksey.info" target="_blank">mhawksey</a>.</p>
  <div id="desc">
    <p><strong>What is it? </strong> - It takes a list of urls stored in a published Google Spreadsheet, passes them to the Embed.ly API and produces a page of embedded objects. For example <a href="https://docs.google.com/spreadsheet/ccc?key=0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE&hl=en_GB" target="_blank">this spreadsheet</a> is used to generate <a href="http://hawksey.info/spreadembed/se.html?url=https%3A%2F%2Fspreadsheets.google.com%2Ftq%3Fkey%3D0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE%26sheet%3Dod6%26pub%3D1">this page</a>.</p>
  </div>
  <form id="embedform" class="main-form">
    <p>
      <label for="gsKey">1. Google spreadsheet key (e.g. <em>rvWgEEGK9xuUQBR1EFcxHWA</em> ) or spreadsheet URL</label>
      <input type="text" id='gsKey' value="0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE" size=60 onChange="preview()">
      <input type="button" value="2. Get Sheet Names" onclick="preview()" />
    </p>
    <div id="theRest">
      <p>
        <label for="vizUrl">3. Select sheet name:</label>
        <select name="vizUrl" id="vizUrl">
          <option value="">-Select Sheet-</option>
        </select>
      </p>
      <p>
        <label for="gsCol">4. Enter column letter with urls</label>
        <input type="text" id='gsCol' size=3/>
      </p>
      <p>
        <label for="gsHead">5. Sheet has header row
        <input name="gsHead" type="checkbox" id="gsHead" value="true" checked="checked" />
        </label>
      </p>
      <p align="center">
        <input type="button" value="6. Go Embed.ly It!" onclick="getEmbedly()" />
      </p>
    </div>
  </form>
  <div id="urlout"></div>
  <div id="loader"> <img src="ajax-loader.gif" width="32" height="32" alt="loader" /><br />
  </div>
  <ul id="stuff">
  </ul>
</div>
</body>
</html>

## se.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SpreadEmbed - Static</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="script/jquery.embedly.min.js"></script>
<script type="text/javascript">
      google.load('visualization', '1');
    </script>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content" class="main">
<div id="loader"> <img src="ajax-loader.gif" width="32" height="32" alt="loader" /><br /></div>

<ul id="stuff">
</ul>

</div>
<script>
//http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
  }
});

$(document).ready(function() {
  sourceUrl=decodeURIComponent($.getUrlVar('url'));

  getEmbedly(sourceUrl);
  $('#loader').hide(500);
})
var visualization;

function getEmbedly(sourceUrl){
	var query = new google.visualization.Query(sourceUrl);
	   query.send(handleSelectResponse);
}
function handleSelectResponse(response) {
	if (response.isError()) {
	alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	return;
  }

  var data = response.getDataTable();
  //var ansSet=document.myform.ansSet
  var arr = new Array();
  for (i=0; i<data.getNumberOfRows(); i++){
		$("#stuff LI").remove();
		arr.push(data.getValue(i, 0));
	}
	$.embedly(arr, {maxWidth:500, key: "2b457b60f04a11e0b79e4040d3dc5c07"},  function(oembed){
	  if (oembed != null) {
		$("#stuff").append('<li>'+(oembed.code)+'</li>');
	  }
	});
  }
</script>
</body>
</html>

## style.css
BODY {background-color:#333333;}
#content{background-color:#FFFFFF;margin:0px auto 20px auto ;width:800px; padding:10px 0}
#embedform, #desc {width:600px;margin: 0px auto 20px auto ;}
#embedform .url{border:1px solid #AAAAAA;font-size:1.5em;margin:10px 0;padding:5px;width:75%;}
#embedform p{margin:3px 0}
#embedform .submit{float:right;font-size:1.7em;margin-top:10px;}

#embed {margin:auto;text-align:center;width:600px;}
#header{
	text-align:right;
	margin:0 auto;
	width:800px;
	height:75px;
	background-color: #FFFFFF;
}
#loader{width:800px;text-align:center;}
#urlout{width:700px;text-align:right;}
a img {border:none;}
li {list-style:none; margin:20px; }
h1 {margin-top:0px;text-align:center}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SpreadEmbed</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript" src="jquery.embedly.min.js"></script>
	<script type="text/javascript">
	google.load('visualization', '1');
	</script>
	<script type="text/javascript">
	/*
	Copyright 2011 Martin Hawksey

	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	*/
	$(document).ready(function() {
	$('#loader').hide(500);
	$('#theRest').hide();
	});

	function getEmbedly(){
	$('#loader').show(500);
	var url = document.getElementById('vizUrl').value;
	var col = document.getElementById('gsCol').value;
	var head = document.getElementById('gsHead').checked;
	var row = 1;
	if (head) row = 2;
	if (col!='') url+='&range='+col+''+row+':'+col+'50';
	$('#urlout').html("<a href='http://hawksey.info/spreadembed/se.html?url="+encodeURIComponent(url)+"'>Permalink</a>");
	var query = new google.visualization.Query(url);
	query.send(handleSelectResponse);
	}
	function handleSelectResponse(response) {
	if (response.isError()) {
	alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	return;
	}

	var data = response.getDataTable();
	var arr = new Array();
	for (i=0; i<data.getNumberOfRows(); i++){
	$("#stuff LI").remove();
	arr.push(data.getValue(i, 0));
	}
	$.embedly(arr, {maxWidth:500, key: "2b457b60f04a11e0b79e4040d3dc5c07"}, function(oembed){
	if (oembed != null) {
	$("#stuff").append('<li>'+(oembed.code)+'</li>');
	}
	});
	$('#loader').hide(500);
	}

	// Mod from http://ouseful.open.ac.uk/datastore/gspreadsheetdb2.php
	function preview() {
	if (document.getElementById('gsKey').value!='') key=document.getElementById('gsKey').value;
	if (/key=([^&])/.test(key)) key=/key=([^&])/.exec(key)[1];
	var url='https://spreadsheets.google.com/feeds/worksheets/'+key+'/public/basic?alt=json';
	$.getJSON(url,function(json){
	var vizUrl=document.getElementById('vizUrl');
	for (var u in json['feed']['entry']) {
	vizUrl.options[u]=new Option(json['feed']['entry'][u]['title']['$t'],json['feed']['entry'][u]['link'][2]['href']);
	}
	$('#theRest').show(500);
	});
	}
	</script>
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div id="header">Powered by <a href="http://api.embed.ly"><img src="http://static.embed.ly/images/logo.png"/></a></div>
	<div id="content" class="main">
	<h1>SpreadEmbed</h1>
	<p align="center">This tool is inspired by <a href="http://enterprise20.squarespace.com/journal/2011/10/6/curated-archive-of-the-business-gets-social-gartnerchat.html">this brilliant idea</a> by <a href="http://ethnologician.org/about-me/" target="_blank">Saqib Ali</a> and put together by <a href="http://mashe.hawksey.info" target="_blank">mhawksey</a>.</p>
	<div id="desc">
	<p><strong>What is it? </strong> - It takes a list of urls stored in a published Google Spreadsheet, passes them to the Embed.ly API and produces a page of embedded objects. For example <a href="https://docs.google.com/spreadsheet/ccc?key=0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE&hl=en_GB" target="_blank">this spreadsheet</a> is used to generate <a href="http://hawksey.info/spreadembed/se.html?url=https%3A%2F%2Fspreadsheets.google.com%2Ftq%3Fkey%3D0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE%26sheet%3Dod6%26pub%3D1">this page</a>.</p>
	</div>
	<form id="embedform" class="main-form">
	<p>
	<label for="gsKey">1. Google spreadsheet key (e.g. <em>rvWgEEGK9xuUQBR1EFcxHWA</em> ) or spreadsheet URL</label>
	<input type="text" id='gsKey' value="0AqGkLMU9sHmLdGVuQzlLb3dNakpCamJGSEtGUTN3bkE" size=60 onChange="preview()">
	<input type="button" value="2. Get Sheet Names" onclick="preview()" />
	</p>
	<div id="theRest">
	<p>
	<label for="vizUrl">3. Select sheet name:</label>
	<select name="vizUrl" id="vizUrl">
	<option value="">-Select Sheet-</option>
	</select>
	</p>
	<p>
	<label for="gsCol">4. Enter column letter with urls</label>
	<input type="text" id='gsCol' size=3/>
	</p>
	<p>
	<label for="gsHead">5. Sheet has header row
	<input name="gsHead" type="checkbox" id="gsHead" value="true" checked="checked" />
	</label>
	</p>
	<p align="center">
	<input type="button" value="6. Go Embed.ly It!" onclick="getEmbedly()" />
	</p>
	</div>
	</form>
	<div id="urlout"></div>
	<div id="loader"> <img src="ajax-loader.gif" width="32" height="32" alt="loader" /><br />
	</div>
	<ul id="stuff">
	</ul>
	</div>
	</body>
	</html>
	BODY {background-color:#333333;}
	#content{background-color:#FFFFFF;margin:0px auto 20px auto ;width:800px; padding:10px 0}
	#embedform, #desc {width:600px;margin: 0px auto 20px auto ;}
	#embedform .url{border:1px solid #AAAAAA;font-size:1.5em;margin:10px 0;padding:5px;width:75%;}
	#embedform p{margin:3px 0}
	#embedform .submit{float:right;font-size:1.7em;margin-top:10px;}

	#embed {margin:auto;text-align:center;width:600px;}
	#header{
	text-align:right;
	margin:0 auto;
	width:800px;
	height:75px;
	background-color: #FFFFFF;
	}
	#loader{width:800px;text-align:center;}
	#urlout{width:700px;text-align:right;}
	a img {border:none;}
	li {list-style:none; margin:20px; }
	h1 {margin-top:0px;text-align:center}