<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs 
    title="Sample Spreadsheet Gadget" 
    description="Fun sample spreadsheet Gadget." 
    author="Google Engineering" 
    author_affiliation="Google Inc." 
    author_email="visualization.api+spreadsheet@gmail.com" 
    screenshot="/ig/modules/spreadsheet.png" 
    thumbnail="/ig/modules/spreadsheet-thm.png" > 
<Require feature="idi"/> 
<Require feature="locked-domain" /> 
</ModulePrefs> 
<UserPref name="_table_query_url" display_name="Data source url" required="true"/> 
<UserPref name="setName" display_name="Title" required="true" />
<UserPref name="_table_query_refresh_interval" display_name="Data refresh interval (minutes)" default_value="0" datatype="enum" required="false"> 
    <EnumValue value="0" display_value="Do not refresh"/> 
    <EnumValue value="60" display_value="1"/> 
    <EnumValue value="300" display_value="5"/> 
    <EnumValue value="1800" display_value="30"/> 
</UserPref>
<Content type="html">
    <![CDATA[ 
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<style type="text/css">
body {color: white;}
div {padding: 3px; font-family: verdana, arial; font-size: 12px; font-weight: bold; text-align: center;}
table {margin: 0 auto;}
.title-div {margin: 0 auto;}
.remove, .toggle, .answer, .question, .title, .functional, .words-left {display:block}
.remove *{
  display:block;
  height:1px;
  overflow:hidden;
  cursor: pointer;
  font-size:.01em;
  background:#ff0000}
.remove1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #ff9191;
  border-right:1px solid #ff9191;
  background:#ff3f3f}
.remove2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #ffe5e5;
  border-right:1px solid #ffe5e5;
  background:#ff3030}
.remove3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #ff3030;
  border-right:1px solid #ff3030;}
.remove4{
  border-left:1px solid #ff9191;
  border-right:1px solid #ff9191}
.remove5{
  border-left:1px solid #ff3f3f;
  border-right:1px solid #ff3f3f}
.removefg{
  background:#ff0000;
  cursor: pointer;}
.toggle *{
  display:block;
  height:1px;
  overflow:hidden;
  cursor: pointer;
  font-size:.01em;
  background:#005577}
.toggle1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #91b5c4;
  border-right:1px solid #91b5c4;
  background:#3f7f99}
.toggle2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e5eef1;
  border-right:1px solid #e5eef1;
  background:#307590}
.toggle3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #307590;
  border-right:1px solid #307590;}
.toggle4{
  border-left:1px solid #91b5c4;
  border-right:1px solid #91b5c4}
.toggle5{
  border-left:1px solid #3f7f99;
  border-right:1px solid #3f7f99}
.togglefg{
  background:#005577;
  cursor: pointer;}
.answer *{
  display:block;
  cursor: pointer;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#228b22}
.answer1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #9fcd9f;
  border-right:1px solid #9fcd9f;
  background:#59a859}
.answer2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e8f3e8;
  border-right:1px solid #e8f3e8;
  background:#4ba14b}
.answer3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #4ba14b;
  border-right:1px solid #4ba14b;}
.answer4{
  border-left:1px solid #9fcd9f;
  border-right:1px solid #9fcd9f}
.answer5{
  border-left:1px solid #59a859;
  border-right:1px solid #59a859}
.answerfg{
  background:#228b22;
  text-align: center;}
.question *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#76ad41}
.question1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #c4dbad;
  border-right:1px solid #c4dbad;
  background:#98c170}
.question2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #f1f6ec;
  border-right:1px solid #f1f6ec;
  background:#90bc65}
.question3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #90bc65;
  border-right:1px solid #90bc65;}
.question4{
  border-left:1px solid #c4dbad;
  border-right:1px solid #c4dbad}
.question5{
  border-left:1px solid #98c170;
  border-right:1px solid #98c170}
.questionfg{
  background:#76ad41;
  text-align: center;}
.title *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#007766}
.title1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #91c4bd;
  border-right:1px solid #91c4bd;
  background:#3f998c}
.title2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #e5f1ef;
  border-right:1px solid #e5f1ef;
  background:#309083}
.title3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #309083;
  border-right:1px solid #309083;}
.title4{
  border-left:1px solid #91c4bd;
  border-right:1px solid #91c4bd}
.title5{
  border-left:1px solid #3f998c;
  border-right:1px solid #3f998c}
.titlefg{
  background:#007766;
  padding:0 5px;}
.functional *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#3333ff;
  cursor: pointer;}
.functional1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #a7a7ff;
  border-right:1px solid #a7a7ff;
  background:#6666ff}
.functional2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #eaeaff;
  border-right:1px solid #eaeaff;
  background:#5959ff}
.functional3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #5959ff;
  border-right:1px solid #5959ff;}
.functional4{
  border-left:1px solid #a7a7ff;
  border-right:1px solid #a7a7ff}
.functional5{
  border-left:1px solid #6666ff;
  border-right:1px solid #6666ff}
.functionalfg{
  background:#3333ff;
  margin: auto;
  text-align: center;
  font-size: 0.8em;
  cursor: pointer;}
.words-left *{
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#115533}
.words-left1{
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #98b5a7;
    border-right:1px solid #98b5a7;
    background:#4c7f66}
.words-left2{
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #e7eeea;
    border-right:1px solid #e7eeea;
    background:#3e7559}
.words-left3{
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #3e7559;
    border-right:1px solid #3e7559;}
.words-left4{
    border-left:1px solid #98b5a7;
    border-right:1px solid #98b5a7}
.words-left5{
    border-left:1px solid #4c7f66;
    border-right:1px solid #4c7f66}
.words-leftfg{
    background:#115533;
    font-size: 1.2em;
    padding: 0 5px;}

</style>

<div id="wrapper" style="overflow: auto; padding: 4px;">
    <div id="navigation">
    <table border="0">
        <tr>
            <td><div>
              <b class="functional">
              <b class="functional1"><b></b></b>
              <b class="functional2"><b></b></b>
              <b class="functional3"></b>
              <b class="functional4"></b>
              <b class="functional5"></b></b>

              <div class="functionalfg" onclick="showAll();">
                Show All
              </div>

              <b class="functional">
              <b class="functional5"></b>
              <b class="functional4"></b>
              <b class="functional3"></b>
              <b class="functional2"><b></b></b>
              <b class="functional1"><b></b></b></b>
            </div></td>
            <td><div>
              <b class="functional">
              <b class="functional1"><b></b></b>
              <b class="functional2"><b></b></b>
              <b class="functional3"></b>
              <b class="functional4"></b>
              <b class="functional5"></b></b>

              <div class="functionalfg" onclick="hideAll();">
                Hide All
              </div>

              <b class="functional">
              <b class="functional5"></b>
              <b class="functional4"></b>
              <b class="functional3"></b>
              <b class="functional2"><b></b></b>
              <b class="functional1"><b></b></b></b>
            </div></td>
            <td><div>
              <b class="functional">
              <b class="functional1"><b></b></b>
              <b class="functional2"><b></b></b>
              <b class="functional3"></b>
              <b class="functional4"></b>
              <b class="functional5"></b></b>

              <div class="functionalfg" onclick="undoDelete();">
                Undo
              </div>

              <b class="functional">
              <b class="functional5"></b>
              <b class="functional4"></b>
              <b class="functional3"></b>
              <b class="functional2"><b></b></b>
              <b class="functional1"><b></b></b></b>
            </div></td>
            
            <td><div>
              <b class="words-left">
              <b class="words-left1"><b></b></b>
              <b class="words-left2"><b></b></b>
              <b class="words-left3"></b>
              <b class="words-left4"></b>
              <b class="words-left5"></b></b>

              <div class="words-leftfg">
                Words left: <span id="words-left">...</span>
              </div>

              <b class="words-left">
              <b class="words-left5"></b>
              <b class="words-left4"></b>
              <b class="words-left3"></b>
              <b class="words-left2"><b></b></b>
              <b class="words-left1"><b></b></b></b>
            </div></td>
            <td><div>
              <b class="functional">
              <b class="functional1"><b></b></b>
              <b class="functional2"><b></b></b>
              <b class="functional3"></b>
              <b class="functional4"></b>
              <b class="functional5"></b></b>

              <div class="functionalfg" onclick="shuffle();">
                Shuffle
              </div>

              <b class="functional">
              <b class="functional5"></b>
              <b class="functional4"></b>
              <b class="functional3"></b>
              <b class="functional2"><b></b></b>
              <b class="functional1"><b></b></b></b>
            </div></td>
            <td><div>
              <b class="functional">
              <b class="functional1"><b></b></b>
              <b class="functional2"><b></b></b>
              <b class="functional3"></b>
              <b class="functional4"></b>
              <b class="functional5"></b></b>

              <div class="functionalfg" onclick="flip();">
                Flip Cards
              </div>

              <b class="functional">
              <b class="functional5"></b>
              <b class="functional4"></b>
              <b class="functional3"></b>
              <b class="functional2"><b></b></b>
              <b class="functional1"><b></b></b></b>
            </div></td>
            <td><div>
              <b class="functional">
              <b class="functional1"><b></b></b>
              <b class="functional2"><b></b></b>
              <b class="functional3"></b>
              <b class="functional4"></b>
              <b class="functional5"></b></b>

              <div class="functionalfg" onclick="reset();">
                Reset
              </div>

              <b class="functional">
              <b class="functional5"></b>
              <b class="functional4"></b>
              <b class="functional3"></b>
              <b class="functional2"><b></b></b>
              <b class="functional1"><b></b></b></b>
            </div></td>
        </tr>
    </table>
    </div>
    <div>
    <table><tr><td>
    <div class="title-div">
      <b class="title">
      <b class="title1"><b></b></b>
      <b class="title2"><b></b></b>
      <b class="title3"></b>
      <b class="title4"></b>
      <b class="title5"></b></b>

      <div id="title-text" class="titlefg">
        Title
      </div>

      <b class="title">
      <b class="title5"></b>
      <b class="title4"></b>
      <b class="title3"></b>
      <b class="title2"><b></b></b>
      <b class="title1"><b></b></b></b>
    </div></td></tr></table>
    </div>
    <div id="cards"></div>
</div>

<script>

var gadgetHelper = null;
_IG_RegisterOnloadHandler(loadVisualizationAPI);

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

function sendQuery() {
    var prefs = new _IG_Prefs(); // User preferences
    _gel("title-text").innerHTML = prefs.getString("setName");
    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.
    }

    if (response.isError()) {
        alert("Error in query: " + response.getMessage() + "\n\n" + response.getDetailedMessage());
    }

    var data = response.getDataTable();
        
    // cards is an array of 3-ples: [front, back, visible]
    cards = [];
    
    // front lets you switch between questions and answers as default.
    front = 0;
    
    var table = [];
    
    for (var row = 0; row < data.getNumberOfRows(); row++) {
        if (data.getFormattedValue(row, 0) && data.getFormattedValue(row, 1)) {
            cards.push([data.getFormattedValue(row, 0), data.getFormattedValue(row, 1), true]);
            table.push( '<tr id="row' + row + '"><td><div>\
              <b class="question">\
              <b class="question1"><b></b></b>\
              <b class="question2"><b></b></b>\
              <b class="question3"></b>\
              <b class="question4"></b>\
              <b class="question5"></b></b>\
\
              <div id="q' + row + '" class="questionfg">\
              </div>\
\
              <b class="question">\
              <b class="question5"></b>\
              <b class="question4"></b>\
              <b class="question3"></b>\
              <b class="question2"><b></b></b>\
              <b class="question1"><b></b></b></b>\
            </div></td>' + 
            '<td><div id="aDiv' + row + '" style="visibility: hidden; width: 100%; height: 100%;">\
              <b class="answer">\
              <b class="answer1"><b></b></b>\
              <b class="answer2"><b></b></b>\
              <b class="answer3"></b>\
              <b class="answer4"></b>\
              <b class="answer5"></b></b>\
\
              <div id="a' + row + '" class="answerfg">\
              </div>\
\
              <b class="answer">\
              <b class="answer5"></b>\
              <b class="answer4"></b>\
              <b class="answer3"></b>\
              <b class="answer2"><b></b></b>\
              <b class="answer1"><b></b></b></b>\
            </div></td>' + 
            '<td><div onclick="toggle(this);">\
              <b class="toggle">\
              <b class="toggle1"><b></b></b>\
              <b class="toggle2"><b></b></b>\
              <b class="toggle3"></b>\
              <b class="toggle4"></b>\
              <b class="toggle5"></b></b>\
\
              <div class="togglefg">\
                Answer\
              </div>\
\
              <b class="toggle">\
              <b class="toggle5"></b>\
              <b class="toggle4"></b>\
              <b class="toggle3"></b>\
              <b class="toggle2"><b></b></b>\
              <b class="toggle1"><b></b></b></b>\
            </div></td>' + 
            '<td><div onclick="remove(this);">\
              <b class="remove">\
              <b class="remove1"><b></b></b>\
              <b class="remove2"><b></b></b>\
              <b class="remove3"></b>\
              <b class="remove4"></b>\
              <b class="remove5"></b></b>\
\
              <div class="removefg">\
                Delete\
              </div>\
\
              <b class="remove">\
              <b class="remove5"></b>\
              <b class="remove4"></b>\
              <b class="remove3"></b>\
              <b class="remove2"><b></b></b>\
              <b class="remove1"><b></b></b></b>\
            </div></td></tr>');
        }
    }
    _gel("cards").innerHTML = "<table>" + table.join('') + "</table>";
    displayCards();
    var wrapper = _gel("wrapper");
    _gel("words-left").innerHTML = cards.length;
    
}

function noUndo() {
    undo = false;
}

function canUndo(elem) {
    undo = elem;
}

function flip() {
    front = 1 - front;
    displayCards();
}

function shuffle() {
    hideAll();
    cards = cards.sort(function(a,b) {return 0.5 - Math.random();});
    displayCards();
    noUndo();
}

function displayCards() {
    var visible = getVisibleCards();
    _gel('words-left').innerHTML = visible.length;
    for (var i = 0; i < visible.length; i++) {
        _gel("q" + i).innerHTML = visible[i][front];
        _gel("a" + i).innerHTML = visible[i][1 - front];
    }
}

function hideAll() {
    var visible = getVisibleCards();
    for (var i = 0; i < visible.length; i++) {
        _gel("aDiv" + i).style.visibility = "hidden";
    }
}

function showAll() {
    var visible = getVisibleCards();
    for (var i = 0; i < visible.length; i++) {
        _gel("aDiv" + i).style.visibility = "visible";
    }
}

function remove(elem) {
    hideAll();
    var question = elem.parentNode.parentNode.getElementsByTagName("td")[0].getElementsByTagName("div")[0].getElementsByTagName("div")[0].innerHTML;
    var answer = elem.parentNode.parentNode.getElementsByTagName("td")[1].getElementsByTagName("div")[0].getElementsByTagName("div")[0].innerHTML;
    var visible = getVisibleCards();
    for (var i = 0; i < visible.length; i++) {
        if (visible[i][front] == question && visible[i][1 - front] == answer) {
            visible[i][2] = false;
            canUndo(visible[i]);
            break;
        }
    }
    _gel("row" + (visible.length - 1)).style.display = "none";
    displayCards();
}

function toggle(elem) {
    var answer = elem.parentNode.parentNode.getElementsByTagName("td")[1].getElementsByTagName("div")[0];
    if (answer.style.visibility == "visible") {
        answer.style.visibility = "hidden";
    } else {
        answer.style.visibility = "visible";
    }
}

function undoDelete() {
    if (!undo) {
        return;
    }
    var visible = getVisibleCards();
    _gel("row" + visible.length).style.display = "";
    undo[2] = true;
    noUndo();
    displayCards();
}

function reset() {
    front = 0;
    noUndo();
    hideAll();
    cards.map(function(a) {a[2] = true;});
    var rows = _gel("row0").parentNode.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].style.display = "";
    }
    displayCards();
}

function getVisibleCards() {
    return cards.filter(function(a) {return a[2];});
}

</script>
]]>
</Content>
</Module>


