<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="UpDown" height="55" width="500">
    <Require feature="dynamic-height" />
  </ModulePrefs>
<Content type="html">
<![CDATA[<html><head>
<style>
  #gadget-wrapper {
    text-align: center;
  }
  .button {
    float: left;
    margin: 0 2px;
    width: 25px;
    height: 25px;
    cursor: pointer;
  }
  .numbers {
    font-weight: bold;
    padding: 2px .25em 2px .1em;
    margin-top:4px;
    float: left;
  }
  /* This class styles the div you didn't vote for. */
  .unselected {
    color: black;
  }
 .plus-selected {
    color: #225922;
  }
  .minus-selected {
    color: #7F2928;
  }
</style>

<script type="text/javascript" src="http://wave-api.appspot.com/public/wave.js">
</script>
<script type="text/javascript">
// Copyright 2009 Google Inc.  All Rights Reserved.

/**
 * @fileoverview Wave Gadget for expressing agreement or disagreement
 * with someone's blip.
 * @author elizabethford@google.com (Elizabeth Ford)
 */

var plusDiv = null;
var minusDiv = null;
var addButton = null;
var subButton = null;
var hostname = "http://elizabethsgadgets.appspot.com/public/";

/**
 * Updates vote status information when the user clicks thumbs up or down.
 * @param {string} dir The direction the user pressed (plus or minus).
 */
function buttonClicked(dir) {
  var viewerId = wave.getViewer().getId();
  var voted = wave.getState().get(viewerId + '-vote');

  // If we've already voted for this option, ignore.
  if (dir == voted) {
    return;
  }

  var other = dir == 'plus' ? 'minus' : 'plus';
  var dirCount = parseInt(wave.getState().get(dir + 'es', '0'));

  var delta = {};
  delta[dir + 'es'] = dirCount + 1;
  if (voted == other) {
    var otherCount = parseInt(wave.getState().get(other + 'es', '0'));
    delta[other + 'es'] = otherCount - 1;
  }
  delta[viewerId + '-vote'] = dir;
  wave.getState().submitDelta(delta);
}

/**
 * Updates the html of the page to reflect the vote status information.
 */
function stateUpdated() {
  // Display the correct number of up/down votes.
  if (wave.getState() == null) {
    setElementText(plusDiv, '0');
    setElementText(minusDiv, '0');
  } else {
    var plusText = wave.getState().get('pluses', '0');
    var minusText = wave.getState().get('minuses', '0');
    if (plusText != '0') {
      plusText = '+' + plusText;
    }
    if (minusText != '0') {
      minusText = '-' + minusText;
    }
    setElementText(plusDiv, plusText);
    setElementText(minusDiv, minusText);
  }

  // Display the correct images.
  var viewerId = wave.getViewer().getId();
  var voted = wave.getState().get(viewerId + '-vote');
  var addUrl;
  var subUrl;
  if (voted == 'plus') {
    addUrl = hostname + 'thumbsup.jpg';
    subUrl = hostname + 'gs_thumbsdown.jpg';
    plusDiv.className = 'numbers plus-selected';
    minusDiv.className = 'numbers unselected';
  } else if (voted == 'minus') {
    addUrl = hostname + 'gs_thumbsup.jpg';
    subUrl =  hostname + 'thumbsdown.jpg';
    minusDiv.className = 'numbers minus-selected';
    plusDiv.className = 'numbers unselected';
  } else {
    addUrl = hostname + 'gs_thumbsup.jpg';
    subUrl = hostname + 'gs_thumbsdown.jpg';
    minusDiv.className = 'numbers unselected';
    plusDiv.className = 'numbers unselected';
  }

  setElementImage(addButton, addUrl);
  setElementImage(subButton, subUrl);
}

/**
 * Safely sets the given element to display the text.
 * @param {string} el The page element to be changed.
 * @param {string} text The text to be displayed.
 */
function setElementText(el, text) {
  clearElement(el);
  el.appendChild(document.createTextNode(text));
}

/**
 * Creates an image element from the given source url and puts it in the given
 * element. The element is emptied before you add the image.
 * @param {string} el The element you want the image to be displayed in.
 * @param {string} url The source url of the image.
 */
function setElementImage(el, url) {
  var tmp = document.createElement('img');
  tmp.src = url;
  clearElement(el);
  el.appendChild(tmp);
}

/**
 * Removes all the children of element el so you can put something else in it.
 * @param {string} el The element you want to empty.
 */
function clearElement(el) {
  while (el.firstChild) {
    el.removeChild(el.firstChild);
  }
}

/**
 * The function that's called when the gadget loads.
 */
function init() {
  plusDiv = document.getElementById('pluscount');
  minusDiv = document.getElementById('minuscount');
  addButton = document.getElementById('addButton');
  subButton = document.getElementById('subButton');

  if (wave && wave.isInWaveContainer()) {
    wave.setStateCallback(stateUpdated);
  }
  stateUpdated();
}

gadgets.util.registerOnLoadHandler(init);
</script>
</head>
<body>
<div id="gadget-wrapper">
  <br />
  <div id="addButton" class="button" onClick="buttonClicked('plus')"></div>
  <div id="pluscount" class="numbers">+0</div>
  <div id="subButton" class="button" onClick="buttonClicked('minus')"></div>
  <div id="minuscount" class="numbers">-0</div>
</div>
</body>
</html>
]]></Content>
</Module>

