<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs 
	title="My Boxes" 
	title_url="http://www.voizle.com/Gadgets/MyBoxes.xml" 
	screenshot="http://www.voizle.com/Gadgets/image/crazymathlarge.jpg"
	thumbnail="http://www.voizle.com/Gadgets/image/crazymathlarge.jpg"
	description="Fill as many boxes u can fill." 
	author="Love sharma" 
	author_email="love.sharma.87@gmail.com">
	<Require feature="wave"/>
     <Require feature="com.google.gadgets.analytics" /> 
    <Require feature="dynamic-height"/>  
  </ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
	<html>
<head><title>My Boxes</title>
<!--
	Author: Love Sharma
	Email-ID: love.sharma.87@gmail.com
	Date: 16th December 2009
	Application Name: Word Scramble
-->
<style>
	body, .label, div, td, h4{
		font-size:10pt;
	}
	h1, h4, #vlink, form{
		margin:0px;
	}
	#vlink{
		font-size:8pt;
	}
	.centerbox{
		padding:5px;
	}
	.upic, .uid{
		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:20px;
		height:20px;
	}
	.sep{
		border-top:dashed 1px #D6CAEB;
	}
	.header{
		background-color:#63EC4D;
		color:#FFFFFF;
		height:25px;
		font-size:12pt;
		font-weight:bolder;
	}
	.header a:visited, .header a{
		color:#ffffff;
		text-decoration:none;
		padding-left:10px;
	}
	.notsel, .sel, .bnotsel{
		width:20px;
		height:20px;
		text-align:center;
		vertical-align:middle;
	}
	.sel{
		background-color:lightgreen;
	}
	.bnotsel{
		background-color:#EBEBEB;
	}
	.vsep{
		border-left:2px solid #eee;
		vertical-align:top;
		padding-left:10px;
		text-align:left;
		width:43%;
	}
	h4{
		text-decoration:underline;
	}
	#update{
		padding-top:10px;
	}
	.info, #playerlist{
		font-size:10pt;
		vertical-align:middle;
		text-align:center;
		font-weight:bolder;
	}
	#playerlist{
		overflow:auto;
		vertical-align:top;
		width:100%;
		background-color:#fff;
	}
	.uimg{
		width:40px;
		height:40px;
	}
	.uname{
		font-weight:bolder;
		font-size:12px;
	}
	.ustatus{
		color:#aeaeae;
		font-size:11px;
	}
	.help{
		color:#cccccc;
		font-size:10pt;
		text-align:center;
	}
</style>
</head>
<body>
<div id="msg" style="height:100px;width:100%;display:none;overflow:auto;border:solid 2px #a9a9a9;"></div>
<!--<input type='button' onclick='reset()' /> -->
<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'>My Boxes</a>
			</td>
		</tr>
	</thead>
	<tbody id='body'>
		<tr>
			<td valign='top' width='400px'>
				<div class='centerbox'>
					<table width='100%'>
						<tbody>
							<tr>
								<td style='padding:5px;'><table width='100%'><tbody id='list'></tbody></table></td>
								<td class='vsep'><h4>Updates</h4><div id='update'></div></td>
							</tr>
						</tbody>
					</table>
				</div>
			</td>
		</tr>
	</tbody>
	<tfoot style='background-color:#D4FECD'>
		<tr>
			<td colspan="4" colspan='2'>
				<table width="100%" frame="box" rules="all">
					<tr>
						<td class='info'>
							Search: <input type="text" autocomplete="off" id="q" onkeyup="showUser(this.value.toLowerCase())" />
						</td>
					</tr>
					<tr><td>
						<div id="playerlist"><p class='help'>Search Users</p></div>
					</td></tr>
				</table>
			</td>
		</tr>
	</tfoot>
</table><a href="http://www.voizle.com/preview.vz?id=myboxes&stat=true" target="_blank"><img alt="Voizle - Statistics for MyBoxes" src="http://img.voizle.com/myboxes.jpg" title="Voizle - Statistics for MyBoxes"></a>
</center>
</div>
<script type="text/javascript">
var viewerId, boxes, state, last_pos;
      var ga = new _IG_GA("UA-9339177-1");
      ga.reportPageview('/Gadgets/ShareTask');
// 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){}
	}
}

function reset(){
	wave.getState().reset();
	return false;
}
// To generate unique id
function getId(){
	return wave.getTime();
}
function createUser(id, vid, status){
	$(id).innerHTML = '';
	 var user_detail = {};
	if(vid != null && status != null){
		user_detail = wave.getParticipantById(vid);
	}else{
		user_detail.getDisplayName = function(){return "Unknown";};
		user_detail.getThumbnailUrl = function(){return "http://gadget-doc-examples.googlecode.com/svn/trunk/images/unknown.gif";};
	}
	var tab = document.createElement("table");
	tab.style.width = '100%';
	var tr = document.createElement("tr");
	var tdimg = document.createElement("td");
	tdimg.style.width = '40px';
	var img = document.createElement("img");
	var image = user_detail.getThumbnailUrl();
	img.src = user_detail.getThumbnailUrl().replace("https://wave.google.com","https:");
	img.className = 'uimg';
	tdimg.appendChild(img);
	tdimg.rowSpan='2';
	tr.appendChild(tdimg);
	var tdname = document.createElement("td");
	tdname.innerHTML = user_detail.getDisplayName();
	tdname.className = 'uname';
	tdname.align='left';
	tr.appendChild(tdname);
	tab.appendChild(tr);
	var trmsg = document.createElement("tr");
	var tdmsg = document.createElement("td");
	tdmsg.innerHTML = (status == null) ? 'N/A' : 'Score: '+status + ' points';
	tdmsg.className = 'ustatus';
	tdmsg.align='left';
	trmsg.appendChild(tdmsg);
	tab.appendChild(trmsg);
	var hr = ele.create("hr");
	hr.height = "1px";
	$(id).appendChild(hr);
	$(id).appendChild(tab);
}

function showUser(query){
	ele.write("playerlist", "");
	if(query.length != 0){
		var user = wave.getParticipants();
		var len = user.length, j = false;
		i = 0;
		for(; i < len; i++){
			if(user[i].getDisplayName().toLowerCase().search(query) > -1 && user[i].getId().search('appspot.com') == -1){
				var vid = user[i].getId();
				var div = ele.create("div");
				div.id = "ds" + i;
				$("playerlist").appendChild(div);
				boxes[vid] = state.get(vid);
				createUser("ds" + i, vid, (isNaN(boxes[vid]) || boxes[vid] == null) ? 0 : boxes[vid], query);
				j = true;
			}
		}

		if(i>3)
			$('playerlist').style.height = '180px';
		else
			$('playerlist').style.height = (60+(60*(i-1)))+'px';

		if(!j){
			ele.write("playerlist", "Participant not Found: "+query);
			$('playerlist').className = 'help';
		}
	}else{
		$('playerlist').style.height = '50px';
		ele.write("playerlist", "<p class='help'>Search Users</p>");
	}
	gadgets.window.adjustHeight();
	return;
}
function clicked(){
	var user = wave.getParticipantById(viewerId);
	var cid = this.id.substr(4);
	var div = ele.create('span');
		div.id = 'd' + cid;
		var img = ele.create('img');
		img.src = user.getThumbnailUrl();
		img.className = 'notsel';
		div.appendChild(img);
	ele.write('i' + cid, '');
	$('i' + cid).appendChild(div);
	var box = {};
	if(boxes == null)
		boxes = {};
	boxes[cid] = viewerId;
	boxes['last'] = cid;
	
	boxes[viewerId] = state.get(viewerId);
	var score = (boxes[viewerId] == null) ? 0 : boxes[viewerId];
	boxes[viewerId] = score*1 + 1;
	
	var boxplayer = {};
	try{
		eval("boxplayer = " + state.get('player'));
	}catch(e){log('clicked: '+e);}
	
	if(boxplayer == null)
		boxplayer = {};
		
	var gscore = (boxplayer[viewerId] == null) ? 0 : boxplayer[viewerId];
	boxplayer[viewerId] = gscore*1 + 1;
	var nbp = {};
	for(vid in boxplayer){
		nbp['\''+vid+'\''] = boxplayer[vid];
	}
	boxes['player'] = wave.util.printJson(nbp);
	wave.getState().submitDelta(boxes);
}

function getCover(){
	var k = false, error = false;
	try{
		var last = last_pos.split('_');
		var i = last[0]*1;
		var j = last[1]*1;
		if((i-3) > 0 && $('box_' + (i-3) + '_' + j) != null){
			$('box_' + (i-3) + '_' + j).onclick = clicked;
			$('box_' + (i-3) + '_' + j).className = 'sel';
			k = true;
		}
		if((j-3) > 0 && $('box_' + i + '_' + (j-3)) != null){	
			$('box_' + i + '_' + (j-3)).onclick = clicked;
			$('box_' + i + '_' + (j-3)).className = 'sel';
			k = true;
		}
		if((j+3) < 11 && $('box_' + i + '_' + (j+3)) != null){	
			$('box_' + i + '_' + (j+3)).onclick = clicked;
			$('box_' + i + '_' + (j+3)).className = 'sel';
			k = true;
		}
		if((i+3) < 11 && $('box_' + (i+3) + '_' + j) != null){	
			$('box_' + (i+3) + '_' + j).onclick = clicked;
			$('box_' + (i+3) + '_' + j).className = 'sel';
			k = true;
		}
		if((i-2) > 0 && (j-2) > 0 && $('box_' + (i-2) + '_' + (j-2)) != null){	
			$('box_' + (i-2) + '_' + (j-2)).onclick = clicked;
			$('box_' + (i-2) + '_' + (j-2)).className = 'sel';
			k = true;
		}
		if((i+2) < 11 && (j+2) < 11 && $('box_' + (i+2) + '_' + (j+2)) != null){	
			$('box_' + (i+2) + '_' + (j+2)).onclick = clicked;
			$('box_' + (i+2) + '_' + (j+2)).className = 'sel';
			k = true;
		}
		if((i-2) > 0 && (j+2) < 11 && $('box_' + (i-2) + '_' + (j+2)) != null){	
			$('box_' + (i-2) + '_' + (j+2)).onclick = clicked;
			$('box_' + (i-2) + '_' + (j+2)).className = 'sel';
			k = true;
		}
		if((i+2) < 11 && (j-2) > 0 && $('box_' + (i+2) + '_' + (j-2)) != null){	
			$('box_' + (i+2) + '_' + (j-2)).onclick = clicked;
			$('box_' + (i+2) + '_' + (j-2)).className = 'sel';
			k = true;
		}
	}catch(e){log('getCover: '+e);error = true;}
	if(!k){
		if(!error){
			ele.write('update', 'GameOver!!! Restarted Game!!!');
			setTimeout('scorereset()', 2000);
		}else{
			for(i = 1; i <= 10; i++){
				for(j = 1; j <= 10; j++){
					if($('box_' + i + '_' + j) != null){
						$('box_' + i + '_' + j).onclick = clicked;
						$('box_' + i + '_' + j).className = 'sel';
					}
				}
			}
		}
	}
}
function scorereset(){
	var box = {};
	for(i = 1; i <= 10; i++){
		for(j = 1; j <= 10; j++){
			box[i + '_' + j] = null;
		}
	}
	box['last'] = null;
	box['player'] = null;
	state.submitDelta(box);
}

function updates(){
	eval("var boxplayer = " + state.get('player'));
	ele.write('update', '');
	for(vid in boxplayer){
		var user = wave.getParticipantById(vid);
		var tr = ele.create('tr');
			tr.id = vid;
			var tdimg = ele.create('td');
				var img = ele.create('img');
					img.className = 'userpic';
					img.src = user.getThumbnailUrl();
					img.title = user.getDisplayName();
				tdimg.appendChild(img);
				tdimg.className = 'userpic';
			var td = ele.create('td');
				td.innerHTML = user.getDisplayName().substr(0, 5) + ' ('+ boxplayer[vid] +')';
			tr.className = 'uid';
			tr.appendChild(tdimg);
			tr.appendChild(td);
		$('update').appendChild(tr);
	}
}

function createBox(i, j){
	var id = i + '_' + j;
	var inp;
	try{
		boxes[id] = state.get(id);
	}catch(e){
		boxes[id] = null;
	}
	if(boxes != null && boxes[id] != null && last_pos != null){
		var user = wave.getParticipantById(boxes[id]);
		inp = ele.create('img');
		inp.src = user.getThumbnailUrl();
		inp.alt = user.getDisplayName();
		inp.title = user.getDisplayName();
		inp.className = 'notsel';
	}else{
		inp = ele.create('input');
		inp.type = 'button';
		inp.className = 'bnotsel';
		inp.id = 'box_' + id;
	}
	$('i' + id).appendChild(inp);
}

function createBoxes(){
	ele.write('list', '');
	for(i = 1; i <= 10; i++){
		var tr = ele.create('tr');
		tr.id = 'd' + i;
		$('list').appendChild(tr);
		for(j = 1; j <= 10; j++){
			var d = ele.create('td');
				d.id = 'i' + i + '_' + j;
			$('d' + i).appendChild(d);
			createBox(i, j);
		}
	}
}

function initBox() {
	if(!wave.getState()) {
		return;
	}
	state = wave.getState();
	viewerId = wave.getViewer().getId();
	boxes = {};
	try{
		boxes[viewerId] = state.get(viewerId);
		last_pos = state.get('last');
		createBoxes();
		updates();
		getCover();
		showUser($('q').value.toLowerCase());
	}catch(e){log('initBox: '+e);}
   gadgets.window.adjustHeight();
}

function init() {
    if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(initBox);
		wave.setParticipantCallback(initBox);
    }   
	gadgets.window.adjustHeight();
}
try{
	gadgets.util.registerOnLoadHandler(init);
}catch(e){}
</script>
</body>
</html>
]]></Content>
</Module>