<?xml  version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Forum"
description="For your google site/blog, let visitors to your site/blog leave messages using your own spreadsheet and form! (More options will follow)"
author="Jorn Westerhout" 
author_email="jornwesterhout+easycommentsspreadsheet@gmail.com"
    screenshot="http://i576.photobucket.com/albums/ss204/jornwesterhout/screenshoteasycommentsspreadsheet.png"
    thumbnail="http://i576.photobucket.com/albums/ss204/jornwesterhout/thumbnaileasycommentsspreadsheet.png"
      category="tools"  
      category2="communication"      
  height="500"
    width="500"
  scrolling="true" > 
<Require feature="idi"/>
<Require feature="dynamic-height"/>
<Require feature="setprefs"/>
<Require feature="com.google.gadgets.analytics" /> 
</ModulePrefs>
<UserPref name="_table_query_url" default_value="demo_url" datatype="string" display_name="Spreadsheet url" required="true"/>
<UserPref name="FormKey" default_value="demo_formkey" datatype="string" display_name="Formkey (necessary for leaving messages) " required="true"/>
  <UserPref name="bgcolor" display_name="Background Color" default_value="White" datatype="enum" >
    <EnumValue value="Black" />
    <EnumValue value="White" />
    <EnumValue value="Blue" />
    <EnumValue value="Red" />
    <EnumValue value="Gray" />
  <EnumValue value="#E9ECCF" />
  <EnumValue value="#73784F" />
  <EnumValue value="#D2D6B3" />
  <EnumValue value="#7A7A3C" />
    </UserPref>
    <UserPref name="textcolor" display_name="Text Color" default_value="Black" datatype="enum" >
    <EnumValue value="Black" />
    <EnumValue value="White" />
    <EnumValue value="Blue" />
    <EnumValue value="Red" />
    <EnumValue value="Gray" />
  <EnumValue value="#E9ECCF" />
  <EnumValue value="#73784F" />
  <EnumValue value="#D2D6B3" />
  <EnumValue value="#7A7A3C" />
    </UserPref>
      <UserPref name="headercolor" display_name="Header Color" default_value="Blue" datatype="enum" >
    <EnumValue value="Black" />
    <EnumValue value="White" />
    <EnumValue value="Blue" />
    <EnumValue value="Red" />
    <EnumValue value="Gray" />
  <EnumValue value="#E9ECCF" />
  <EnumValue value="#73784F" />
  <EnumValue value="#D2D6B3" />
  <EnumValue value="#7A7A3C" />
    </UserPref>
      <UserPref name="headertextcolor" display_name="Head Text Color" default_value="White" datatype="enum" >
    <EnumValue value="Black" />
    <EnumValue value="White" />
    <EnumValue value="Blue" />
    <EnumValue value="Red" />
    <EnumValue value="Gray" />
  <EnumValue value="#E9ECCF" />
  <EnumValue value="#73784F" />
  <EnumValue value="#D2D6B3" />
  <EnumValue value="#7A7A3C" />
    </UserPref>
<Content type="html"><![CDATA[
<html>
<head>

<script>
var prefs = new gadgets.Prefs();
var bgcolor = prefs.getString("bgcolor");
var textcolor = prefs.getString("textcolor");
var headercolor = prefs.getString("headercolor");
var headertextcolor = prefs.getString("headertextcolor");
if (bgcolor == "Blue"){
bgcolor = "#0066CC";
}
if (textcolor == "Blue"){
textcolor = "#0066CC";
}
if (headercolor == "Blue"){
headercolor = "#0066CC";
}
if (headertextcolor == "Blue"){
headertextcolor = "#0066CC";
}

if (bgcolor == "Red"){
bgcolor = "#D00000";
}
if (textcolor == "Red"){
textcolor = "#D00000";
}
if (headercolor == "Red"){
headercolor = "#D00000";
}
if (headertextcolor == "Red"){
headertextcolor = "#D00000";
}

</script>


<STYLE TYPE="text/css">
 body{background-color: __UP_bgcolor__}
 
.lsb{bottom;font:15px arial,sans-serif;border:solid 1px;border-color:#ccc #999 #999 #ccc;cursor:pointer;height:25px;margin:0;outline:0;padding:0 6px;width:auto;overflow:visible;vertical-align:top}
.lsb:active{background:#ccc}

 </STYLE>
 
</head>
<body style='font-family:Arial; color: __UP_textcolor__;' text='__UP_textcolor__' link='__UP_textcolor__' alink='__UP_textcolor__' vlink='__UP_textcolor__'>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<div style="width:100%; height:100%">

<div id="tablediv" style="width:100%;text-align:center;vertical-align:center;border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#999;">

</div>
<table style="font-family:Arial; width: 100%; background-color: #FFFFFF; padding: 0px; border: 0; border-spacing:0; border-collapse: collapse;">
<tr style="font-size: 13px; background-color: #FFFFFF; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;">
<td height="0" style="font-size: 13px; background-color: #FFFFFF; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;">

<a href="https://plus.google.com/104993332184688635928/" target="_blank"><font color="black" face="arial" size="2"><b>Follow Daily Deals on Google Plus to Stay Updated on the Latest Offers</b></font></a>

</td>
</tr>
</table>

</div>

<script>

var ga = new _IG_GA("UA-10792601-4");
ga.reportPageview('/view/counterGadget');


var prefs=null;
var gadgetHelper = null;
_IG_RegisterOnloadHandler(loadVisualizationAPI);

var prefs = new gadgets.Prefs();
var formkey = prefs.getString("FormKey");
var queryurl = prefs.getString("_table_query_url");
if (formkey == "demo_formkey"){
formkey = "dEhkb3Jia1RXdVV4ckRVZnY1eVBVT0E6MA";
}


var string1 = formkey.indexOf("formkey=");
if (string1 == -1){

string1 = formkey.indexOf("&");
if (string1 == -1){
}else{
formkey = formkey.substring(0,string1);
}

}else{
formkey = formkey.substring(string1);
string1 = formkey.indexOf("&");
if (string1 == -1){
formkey = formkey.substring(8);
}else{
formkey = formkey.substring(8,string1);
}

}


if (queryurl == "demo_url"){
queryurl = "http://spreadsheets.google.com/ccc?key=tHdorbkTWuUxrDUfv5yPUOA&hl=en";
}

function loadVisualizationAPI() {
google.load("visualization", "1");
google.setOnLoadCallback(sendQuery);
}

function sendQuery() {
prefs = new _IG_Prefs(); // User preferences
prefs.set("_table_query_url", queryurl);
gadgetHelper = new google.visualization.GadgetHelper();
var query = gadgetHelper.createQueryFromPrefs(prefs);
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {

if (!gadgetHelper.validateResponse(response)) {
return; // Default error handling was done, just leave.
}




var html = []; // start the HTML output string
var data = response.getDataTable();

numberofmessages = 30;

var row = data.getNumberOfRows()-1;
if (row<numberofmessages){
numberofmessages = row + 1;
}

if (row==-1){
html.push("To make this comments board (using google docs as database for your messages) work, you should read the tutorial at <a href='http://sites.google.com/site/ecgadgets/add-to-google-site-or-blog' target='_blank'>this webpage.</a> <br><br> For a working example, see below.<br>");
} else {
if (queryurl=='http://spreadsheets.google.com/ccc?key=tHdorbkTWuUxrDUfv5yPUOA&hl=en'){
html.push("To make this comments board (using google docs as database for your messages) work, you should read the tutorial at <a href='http://sites.google.com/site/ecgadgets/add-to-google-site-or-blog' target='_blank'>this webpage.</a> <br><br> For a working example, see below.<br>");
} else {
numberofmessages = row + 1;
}

html.push('<div style="font-family:Arial; font-size: 13px;" align="right"><input onclick="scrollme();" type=button value="Leave a Message" class=lsb></div><br>');

var breakloop = row-numberofmessages;



for (row; row > breakloop; row--) {

html.push('<table style="font-family:Arial;  width: 100%; padding: 0px; border: 0; border-spacing:0; border-collapse: collapse;">');
html.push('<tr style="color: ' + headertextcolor + '; height: 25px; border: 0; vertical-align: middle; padding: 0px; background-color: ' + headercolor + '; border-spacing:0; border-collapse: collapse;">');
var Name=data.getFormattedValue(row,1);
Name=escapeHtml(Name);
var date = data.getFormattedValue(row,0);
date=escapeHtml(date);
html.push('<td style="font-size: 15px; border: 0; vertical-align: middle; padding: 0px; border-spacing:0; border-collapse: collapse;"><b>' + Name+ '</b></td><td style="font-size: 14px; border: 0; vertical-align: middle; padding: 0px; border-spacing:0; border-collapse: collapse;" align="right">' + date + '</td>');
html.push('</tr>');
html.push('<tr>');
var comments=data.getFormattedValue(row,2);
comments=replacer(comments, /\n/g, "jfdklsfjoiejfdklsfjoidsajfkldjsalkfnklvjdoisahrefjfdklshfjldksfjoiaejwkrfl");
comments=escapeHtml(comments);
comments=replacer(comments, /jfdklsfjoiejfdklsfjoidsajfkldjsalkfnklvjdoisahrefjfdklshfjldksfjoiaejwkrfl/g, "<br>");
html.push('<td style="font-size: 14px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;" colspan="2">' + comments + '</td>');
html.push('</tr>');

html.push('</tr>');
html.push('</table><br>');


}


html.push('<div id="refreshlink" style="visibility:hidden;"><a href="javascript:initialize();">Thank you, click here to see your message!</a></div><div align="left" class="ss-form"><form onsubmit="return checkform(this);" target="commentposted" action="https://spreadsheets.google.com/formResponse?formkey=' + formkey + '&amp;ifq" method="POST" id="ss-form" name="ss-form"><div align="left" class="errorbox-good"><div align="left" class="ss-item  ss-text"><div align="left" class="ss-form-entry"><table style="font-family:Arial;  width: 100%; padding: 0px; border: 0; border-spacing:0; border-collapse: collapse;"><tr style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><td width="100" style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><label class="ss-q-title" for="entry_0"><b> &nbsp;Name: </b></label></td><td style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><label class="ss-q-help" for="entry_0"></label><input type="text" name="entry.0.single" value="" style="color: #000000; background: #ffffff; border: 1px solid #767676;" class="ss-q-short" id="entry_0"></td></tr></table></div></div></div><div align="left" class="errorbox-good"><div align="left" class="ss-item  ss-paragraph-text"><div align="left" class="ss-form-entry"><table style="font-family:Arial;  width: 100%; padding: 0px; border: 0; border-spacing:0; border-collapse: collapse;"><tr style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><td width="100" style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><label class="ss-q-title" for="entry_1"><b> &nbsp;Comments:</b> </label></td><td style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><label class="ss-q-help" for="entry_1"></label><textarea name="entry.1.single" rows="8" style="color: #000000; background: #ffffff; border: 1px solid #767676; width: 90%;" class="ss-q-long" id="entry_1"></textarea></td></tr></table></div></div></div><input type="hidden" name="pageNumber" value="0"><input type="hidden" name="backupCache" value=""><div align="left" class="ss-item ss-navigate"><div align="left" class="ss-form-entry"><table style="font-family:Arial;  width: 100%; padding: 0px; border: 0; border-spacing:0; border-collapse: collapse;"><tr style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><td width="100" style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;">&nbsp;</td><td style="font-size: 13px; border: 0; vertical-align: top; padding: 0px; border-spacing:0; border-collapse: collapse;"><input type="submit" name="submit" value="Send" class=lsb></td></tr></table></div></div></form></div><table width="100%" style="border: none; border: 0px solid #CCCCCC;"><tr><td><table width="100%" style="border: none; border: 0px solid #CCCCCC;"><tr><td width="10"><iframe height="10" width="10" style="visibility:hidden;" id="commentposted" name="commentposted"></iframe></td><td align="right"><a href="http://sites.google.com/site/ecgadgets/easy-comments-spreadsheet" target="_blank"><font color="#C0C0C0" size="2">About</font></a></td></tr></table>');



}




/**
* Set the generated html into the container div.
*/
  var tableDiv = _gel('tablediv');
  tableDiv.innerHTML = html.join('');
}

function initialize() {
  // Replace the data source URL on next line with your data source URL.
  var query = new google.visualization.Query(queryurl);
  
  // Optional request to return only column C and the sum of column B, grouped by C members.

  
  // Send the query with a callback function.
  query.send(handleQueryResponse);
  
  scroll(0,0);
}


/**
* Define any supporting code you need
* (like this handy function to escape special characters for html output):
*/
function escapeHtml(text) {
if (text == null) {
return '';
}
return _hesc(text);
}
function replacer(string, le, re) {
return string.replace(le, re);
}

function scrollme(){
dh=document.body.scrollHeight;
ch=document.body.clientHeight;
if(dh>ch){
moveme=dh-ch;
window.scrollTo(0,moveme);
}
}

 
 function checkform ( form )
{
  // see http://www.thesitewizard.com/archive/validation.shtml
  // for an explanation of this script and how to use it on your
  // own website

  // ** START **
  if (document.getElementById('entry_0').value == "") {
    alert( "Please enter your name." );
    document.getElementById('entry_0').focus();
    return false ;
  }
  // ** END **
  
    // ** START **
  if (document.getElementById('entry_1').value == "") {
    alert( "Please enter your comments." );
    document.getElementById('entry_1').focus();
    return false ;
  }
  // ** END **
  
  
  if (document.getElementById) { // DOM3 = IE5, NS6 
  document.getElementById('refreshlink').style.visibility = 'visible'; 
  } 
  else { 
  if (document.layers) { // Netscape 4 
  document.refreshlink.visibility = 'visible'; 
  } 
  else { // IE 4 
  document.all.refreshlink.style.visibility = 'visible'; 
  } 
  } 
  
  return true ;
}
 
  

</script>




 

 
</body>
</html>
]]>
</Content>
</Module>
