<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs 
	title="Poke Amigos" 
	title_url="http://www.voizle.com/poke.xml" 
	screenshot="http://www.voizle.com/image/crazymathlarge.jpg"
	thumbnail="http://www.voizle.com/image/crazymathlarge.jpg"
	description="Poke your friends and make fun in wave room" 
	author="Love sharma" 
	author_email="love.sharma.87@gmail.com">
	<Require feature="wave"/>
    <Require feature="dynamic-height"/>  
  </ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
	<html>
<head><title>Poke Amigos</title>
<style>
	body, .label, div, td{
		font-size:10pt;
	}
	h1, #vlink, form{
		margin:0px;
	}
	#vlink{
		font-size:8pt;
	}
	.centerbox{
		overflow:auto;
		height:160px;
	}
	.upic{
		vertical-align:middle;
		text-align:center;
	}
	.uid, .label{
		font-weight:bolder;
	}
	.uid, .header{
		text-align:left;
		padding-left:5px;
	}
	.label{
		text-align:right;
	}
	.userpic{
		width:50px;
		height:50px;
	}
	.sep{
		border-top:dashed 1px #D6CAEB;
	}
	.header{
		background-color:#9173C9;
		color:#FFFFFF;
		height:25px;
		font-size:12pt;
		font-weight:bolder;
	}
	.header a:visited, .header a{
		color:#ffffff;
		text-decoration:none;
		padding-left:10px;
	}
</style>
</head>
<body>
<div id="msg" style="height:100px;width:100%;display:none;overflow:auto;border:solid 2px #a9a9a9;"></div>
<div style="width:400px;"><center>
<table border="1" frame='box' rules='all' bordercolor='#000099' width='100%' align='center' style='margin-bottom:5px'>
	<thead>
		<tr class='header'>
			<td>
				<a href='http://www.voizle.com/' target='_blank'>Poke Amigos</a>
			</td>
		</tr>
	</thead>
	<tbody id='body'>
		<tr>
			<td valign='top' width='400px'>
				<div class='centerbox'>
					<table width='100%'>
						<tbody id='list'></tbody>
					</table>
				</div>
			</td>
		</tr>
	</tbody>
	<tfoot style='background-color:#CEC1E7'>
		<tr>
			<th><form action="#" onsubmit="return false;">
					<table width='100%'>
						<tr>
							<td class='upic' rowspan='2' id='pic' width='20%'></td>
							<td class='uid' colspan='2' id='name'></td>
						</tr>
						<tr>
							<td class='uid' colspan='2'>
								<select id='names' onchange='updateInfo()'></select>
							</td>
						</tr>
						<tr>
							<td class='label'>your poke: </td>
							<td class='uid'>
								<select id='pokes' onchange='updatePokeInfo()'>
									<option value='00' disabled='true' selected='true'>Select Poke</option>
									<option value='01njoy' msg='$$to$$ is a fun loving person!'>Funny</option>
									<option value='02shout' msg='$$from$$ is shouting on $$to$$'>Shout</option>
									<option value='03cool' msg='$$to$$ is a cool person!'>Cool</option>
									<option value='04cry' msg='$$to$$ made me weep!'>Cry</option>
									<option value='05zzz' msg='$$from$$ saying good night to $$to$$!'>Good Night</option>
									<option value='06angry' msg='$$from$$ wants to kill $$to$$!'>Kill</option>
									<option value='07shit' msg='$$from$$ wants help from $$to$$'>Help</option>
									<option value='08maddy' msg='$$to$$ is getting mad!!'>Mad</option>
									<option value='09yeah' msg='$$from$$ Won from $$to$$!!'>Winning</option>
									<option value='10focus' msg='$$to$$ is on stage!!'>Stage</option>
									<option value='11gurr' msg='$$from$$ wants $$to$$ to go away!!'>Go Away</option>
									<option value='12attitude' msg='$$to$$ is having lots of attitude!!'>Attitude</option>
								</select>
							</td>
							<td rowspan='2' class='upic' id='ppic' width='25%'>
							</td>
						</tr>
						<tr>
							<td class='upic' colspan='2'>
								<input type='submit' value='Poke' onclick='poke()'/>
							</td>
						</tr>
					</table>
				</form>
			</th>
		</tr>
	</tfoot>
</table><a href="http://www.voizle.com/preview.vz?id=poke&stat=true" target="_blank"><img alt="Voizle - Statistics for Poke Amigos" src="http://img.voizle.com/poke.jpg" title="Voizle - Statistics for Poke Amigos"></a>
</center>
</div>
<script type="text/javascript">
var viewerId;
// Element variable to access some common properties
var ele = {
			show:function(id){$(id).style.display='block';}, 
			hide:function(id){$(id).style.display='none';}, 
			write:function(id,msg){$(id).innerHTML = msg;},
			create:function(element){return document.createElement(element);}
		}
function $(id){
	return document.getElementById(id);
}

function log(msg){
	if(viewerId == 'love.sharma.87@googlewave.com' || viewerId == 'romeo971987@wavesandbox.com'){
		ele.show('msg');
		var ih = $("msg").innerHTML;
		$("msg").innerHTML = msg+"<br/> "+$("msg").innerHTML;
		try{
			wave.log(msg);
		}catch(e){}
	}
}

// To generate unique id
function getId(){
	return wave.getTime();
}


function createSelect(id, text, value){
	ele.write(id, '');
	var selectbox = $(id);
	var len = text.length;
	for(i=0;i<len;i++){
		var optn = ele.create("option");
		optn.text = text[i];
		optn.value = value[i];
		optn.setAttribute('selected', 'true');
		selectbox.options.add(optn);
	}
}

function updatePokeInfo(){
	var id = $('pokes').options[$('pokes').selectedIndex].value;
	ele.write('ppic', '');
	var img = ele.create('img');
		img.src = 'http://poke-amigos.appspot.com/expression/' + id.substr(2) + '.gif';
	$('ppic').appendChild(img);
   gadgets.window.adjustHeight();
}

function updateInfo(){
	var id = $('names').options[$('names').selectedIndex].value;
	ele.write('pic', '');
	var img = ele.create('img');
		img.src = wave.getParticipantById(id).getThumbnailUrl();
		img.className = 'userpic';
	$('pic').appendChild(img);
	ele.write('name', wave.getParticipantById(id).getDisplayName());
   gadgets.window.adjustHeight();
}

function poke(){
	var names = $('names');
	var pokes = $('pokes');
	try{
		if(names.selectedIndex != 0 && pokes.selectedIndex != 0){
			pokeamigo = {};
			details = {};
			details['from'] = viewerId;
			details['to'] = names.options[names.selectedIndex].value;
			details['pokename'] = pokes.options[pokes.selectedIndex].value;
			var uid = getId();
			pokeamigo[uid] = wave.util.printJson(details);
			wave.getState().submitDelta(pokeamigo);
		}else{
			if(names.selectedIndex == 0) alert('Please select name!!');
			else if(pokes.selectedIndex == 0) alert('Please select poke!!');
		}
	}catch(e){
		log(e);
	}
}

function setParticipant(){
	var user = wave.getParticipants();
	var len = user.length;
	var id = new Array();
	var names = new Array();
	id.push('0');
	names.push('Select Name');
	for(i = 0; i < len; i++){
		var pid = user[i].getId();
		if(pid != viewerId){
			id.push(pid);
			names.push(user[i].getDisplayName());
		}
	}
	var sel = 0;
	try{
		sel = $('names').selectedIndex;
	}catch(e){}
	createSelect('names', names, id);
	$('names').selectedIndex = sel;
	$('names').options[0].disabled = true;
	return;
}

function getMsg(toname, fromname, pokenum){
	var msg = $('pokes').options[pokenum].getAttribute('msg');
	msg = msg.replace('$$from$$', fromname).replace('$$to$$', toname);
	return msg;
}

function createPoke(id, from, pokename, to){
	var frompart = wave.getParticipantById(from);
	var topart = wave.getParticipantById(to);
	var toname = topart.getDisplayName();
	var fromname = frompart.getDisplayName();
	var msg = getMsg(toname, fromname, pokename.substr(0,2)*1);
	
	var pokeimg = 'http://poke-amigos.appspot.com/expression/' + pokename.substr(2) + '.gif';
	
	var div = ele.create('div');
		div.id = id;
		div.className = 'sep';
		var tab = ele.create('table');
			tab.style.width = '100%';
			var tr = ele.create('tr');
				var comment = ele.create('td');
					comment.className = 'upic';
					comment.innerHTML = msg;
					comment.colSpan = '3';
				tr.appendChild(comment);
			var tr2 = ele.create('tr');
				var tdfrom = ele.create('td');
					tdfrom.className = 'upic';
					tdfrom.style.width = '33.33%';
					var imgfrom = ele.create('img');
						imgfrom.src = frompart.getThumbnailUrl();
						imgfrom.alt = fromname;
						imgfrom.title = fromname;
						imgfrom.className = 'userpic';
					tdfrom.appendChild(imgfrom);
				var tdpoke = ele.create('td');
					tdpoke.className = 'upic';
					tdpoke.style.width = '33.33%';
					var imgpoke = ele.create('img');
						imgpoke.src = pokeimg;
						imgpoke.alt = msg;
						imgpoke.title = msg;
					tdpoke.appendChild(imgpoke);
				var tdto = ele.create('td');
					tdto.className = 'upic';
					tdto.style.width = '33.33%';
					var imgto = ele.create('img');
						imgto.src = topart.getThumbnailUrl();
						imgto.alt = toname;
						imgto.title = toname;
						imgto.className = 'userpic';
					tdto.appendChild(imgto);
				tr2.appendChild(tdfrom);
				tr2.appendChild(tdpoke);
				tr2.appendChild(tdto);
			tab.appendChild(tr);
			tab.appendChild(tr2);
		div.appendChild(tab);
	$('list').appendChild(div);
}

function initPoke() {
	if(!wave.getState()) {
		return;
	}
	var state = wave.getState();
	viewerId = wave.getViewer().getId();
	setParticipant();
	var keys = state.getKeys();
	var len = keys.length;
	ele.write('list', '');
	var flag = false;
	for(i = len - 1; i >= 0; i--){
		eval('var pokes = ' + state.get(keys[i]));
		createPoke(keys[i], pokes.from, pokes.pokename, pokes.to);
		flag = true;
	}
	if(flag){
		ele.show('body');
	}else{
		ele.hide('body');
	}
   gadgets.window.adjustHeight();
}

function init() {
    if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(initPoke);
		wave.setParticipantCallback(initPoke);
    }   
	gadgets.window.adjustHeight();
}
try{
	gadgets.util.registerOnLoadHandler(init);
}catch(e){}
</script><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-9339177-1");pageTracker._trackPageview();} catch(err) {}</script>
</body>
</html>
]]></Content>
</Module>