<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Rate gadget" heigh="130">
    <Require feature="wave-preview" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[     
	<script type="text/javascript" src="http://vbsteven.be/wave/json2.js" ></script>
	<script type="text/javascript">

		function rateButtonClicked() {
			var allow_multiple = wave.getState().get('multiple', 'false');

			if (allow_multiple == 'true') {
				vote();
			} else if (!alreadyVoted(wave.getViewer().getId())) {
				vote();
			} else {
				alert("You already voted");
			}
		}	

		function vote() {
			var total = parseInt(wave.getState().get('total', '0'));
			var count = parseInt(wave.getState().get('count', '0'));
			var voters = JSON.parse(wave.getState().get('voters', '[]'));

			total += parseInt(document.getElementById("rating").value)
			count++;
			var rating = total/count;
			rating = rating.toFixed(1);
			voters.push(wave.getViewer().getId());	
			
			var voters_json = JSON.stringify(voters);	

			wave.getState().submitDelta({'count': count, 'total': total, 'rating': rating, 'voters': voters_json });
		}	

		function alreadyVoted(viewer) {
			var voters = JSON.parse(wave.getState().get('voters', '[]'));
			var voted = false;
			for (x in voters) {
				if (voters[x] == viewer) {
					voted = true;
				}
			} 

			return voted;
		}

		function stateUpdated() {
			var p_rating = document.getElementById("p_rating");

			if (!wave.getState().get('count')) {
				p_rating.innerHTML = "rating : n/a";
				p_rating.innerHTML += "<br />votes : 0";
			}
			else {
				p_rating.innerHTML = "rating : " + wave.getState().get('rating');
				p_rating.innerHTML += "<br />votes : " + wave.getState().get('count');
			}

			var title = document.getElementById("h2_title");
			title.innerHTML = wave.getState().get('title', 'Rate me');

			
			if (wave.getViewer() == wave.getHost()) {
				// current user is the user that added the gadget to this wave
				var p = document.getElementById("p_settings");
				p.innerHTML = '<a href="#" onclick="showSettings()">show settings</a>';
			}
		}

		function hideSettings() {
			var el = document.getElementById("div_settings");
			el.innerHTML = "";
			var p = document.getElementById("p_settings");
			p.innerHTML = '<a href="#" onclick="showSettings()">show settings</a>';
		}

		function showSettings() {
			var el = document.getElementById("div_settings");
			el.innerHTML = 'Name : <input type="text" id="settings_title" cols="30"><br />';
			el.innerHTML += 'allow multiple votes per user <input type="checkbox" id="settings_multiple"><br />';
			el.innerHTML += '<input type="submit" value="save" onclick="saveSettings()" />';
			var p = document.getElementById("p_settings");
			p.innerHTML = '<a href="#" onclick="hideSettings()">hide settings</a>';

			var input = document.getElementById('settings_title');
			input.value = wave.getState().get('title');
			input = document.getElementById('settings_multiple');
			if (wave.getState().get('multiple') == 'true') {
				input.checked = true;
			} 
		}

		function saveSettings() {
			var title = document.getElementById('settings_title').value;
			var multiple;

			if (document.getElementById('settings_multiple').checked) {
				multiple = "true";
			} else {
				multiple = "false";
			}
			
			wave.getState().submitDelta({'title': title, 'multiple': multiple});
			hideSettings();			
		}


		function init() {
			if (wave) {
				wave.setStateCallback(stateUpdated);
			}
		}
		gadgets.util.registerOnLoadHandler(init);
	</script>

	<h2 id="h2_title">rate me</h2>
	<select id="rating">
		<option value="0">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="5">5</option>
		<option value="6">6</option>
		<option value="7">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
	</select>
	<input type="button" name="ratebutton" value="Rate" onclick="rateButtonClicked()"/>
	
	<p id="p_rating">rating : </p>
	<p id="p_settings"></p>
	<div id="div_settings"></div>
    ]]>
  </Content>
</Module>
