<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs 
	title="Share Task"
	title_url="http://www.voizle.com/Gadgets/ShareTask.xml" 
	screenshot="http://www.voizle.com/Gadgets/image/sharetask.jpg" 
	thumbnail="http://www.voizle.com/Gadgets/image/sharetask.jpg" 
	description="Share your task amongst team mates." 
	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>Share Task</title>
<style>
.todolist{
	font-family:arial;
	font-size:10pt;
}
h1, #vlink, form{
	margin:0px;
}
#vlink{
	font-size:8pt;
}
.label{
	text-align:right;
	padding-right:5px;
	font-weight:bolder;
}
.tasklist{
	overflow:auto;
	height:140px;
}
.opt, .edit{
	width:5%;
}
.edit{
	cursor:pointer;
	text-decoration:underline;
	font-size:10pt;
	color:blue;
}
.strip1{
	background-color:#FFEBD0;
}
.strip0{
	background-color:#ffffff;
}
.option{
	text-align:center;
	vertical-align:middle;
}
.tname{
	width:75%
}
.pd{
	position:relative;
	top:-10px;
	width:100%;
}
.d1, .d2, .d3 {
	position:absolute;
	top:0px;
	left:0px;
	height:20px;
}
.d1, .d3{
	width:100%;
}
.d2 {
	background-color:#ddd;
}
.d1 {
	font-size:1px;
}
.d3 {
	padding-left:5px;
	font-family:verdana;
	font-size:10pt;
}
.uarea{
	text-align:center;
	width:25px;
	height:25px;
}
.header{
	background-color:#FE9C1D;
	color:#FFFFFF;
	height:25px;
	font-size:12pt;
	font-weight:bolder;
}
.header a:visited, .header a{
	color:#ffffff;
	text-decoration:none;
	padding-left:10px;
}
#search{
	font-size:10pt;
}
</style>
</head>
<body>
<div id="msg" style="height:100px;width:100%;display:none;overflow:auto;border:solid 2px #a9a9a9;"></div>
<!--<input type='button' onclick='return reset();'> -->
<div style="width:400px;"><center>
<table border="1" frame='box' rules='all' bordercolor='#999' width='100%' align='center' style='margin-bottom:10px'>
	<thead>
		<tr class='header'>
			<td>
				<a href='http://www.voizle.com/' target='_blank'>Share Task</a>
			</td>
		</tr>
	</thead>
	<tr style='background-color:#FDD198'><td width='100%' align='center'><div id='search'>Search: <input type='text' autocomplete='off' onkeyup='searchToDo()' id='q' /></div></td></tr>
	<tbody id='todobody'>
		<tr>
			<td valign='top' width='400px'>
				<div class='tasklist'>
					<table width='100%'>
						<tbody id='todolist'></tbody>
					</table>
				</div>
			</td>
		</tr>
	</tbody>
	<tfoot style='background-color:#FDD198'>
		<tr>
			<th><form action="#" onsubmit="return false;">Task: <input type='text' maxlength='30' id='item' /> 
				<select id='priority' title='Select your priority'>
					<option value='high'>high</option>
					<option value='med'>med</option>
					<option value='low' selected='true'>low</option>
				</select> 
				<input type='submit' value='Add' onclick='addTask()'/>
				</form>
			</th>
		</tr>
	</tfoot>
</table><a href="http://www.voizle.com/preview.vz?id=sharetask" target="_blank"><img alt="Voizle - Statistics for Share Task" src="http://img.voizle.com/vimg.php?id=sharetask" title="Voizle - Statistics for Share Task"></a>
</center>
</div>
<script type="text/javascript">
      var ga = new _IG_GA("UA-9339177-1");
      ga.reportPageview('/Gadgets/ShareTask');
var priorities = new Array('high', 'med', 'low');
var progress = new Array(0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
var todo, viewerId, taskdetail;
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 reset(){
	wave.getState().reset();
	return false;
}
function r(num){
	return parseInt(Math.random()*num);
}
function log(msg){
	if(viewerId == 'romeo971987@wavesandbox.com'){
		ele.show('msg');
		var ih = $("msg").innerHTML;
		$("msg").innerHTML = msg+"<br/> "+$("msg").innerHTML;
		try{
			wave.log(msg);
		}catch(e){}
	}
	gadgets.window.adjustHeight();
}
function clip(str, len){
	if(str.length > len) return str.substr(0, len-5)+"...";
	return str;
}

function createSelect(id, pid, text, value, sval){
	ele.write(pid + id, '');
	var selectbox = ele.create('select');
	selectbox.id = 'sel' + pid + id;
	var len = text.length;
	for(i=0;i<len;i++){
		var optn = document.createElement("option");
		optn.text = text[i];
		optn.value = value[i];
		if(value[i] == sval){
			optn.setAttribute('selected', 'true');
		}
		selectbox.options.add(optn);
	}
	$(pid + id).appendChild(selectbox);
	gadgets.window.adjustHeight();
}

function searchToDo(){
	var query = $('q').value.toLowerCase();
	ele.write('todolist', '')
	var state = wave.getState();
	var keys = state.getKeys();
	taskdetail = {};
	var len = keys.length;
	ele.write('todolist', '');
	if(len != 0){
		var k = 1;
		for(i = len - 1; i >= 0; i--){
			taskdetail = {};
			eval('taskdetail = ' + state.get(keys[i]));
			if(taskdetail.name.toLowerCase().search(query) > -1 || taskdetail.prio.toLowerCase().search(query) > -1){
				createToDo(keys[i], i%2, taskdetail.prio, taskdetail.name, taskdetail.proc, taskdetail.vid);
				k++;
			}
		}
		if(k == 1){
			ele.write('todolist','<center>Task Not Found: ' + query +'</center>');
		}
	}
	gadgets.window.adjustHeight();
}

function delToDo(){
	todo[this.id.substr(1)] = null;
	wave.getState().submitDelta(todo);
}

function saveToDo(){
	this.innerHTML = 'Edit';
	this.onclick = editToDo;
	var id = this.id;
	var detail = {};
	var todo = {};
	detail['prio'] = $('selprio' + id).options[$('selprio' + id).selectedIndex].value;
	detail['name'] = $('task' + id).value.replace("'", "\\\\'");
	detail['proc'] = $('selproc' + id).options[$('selproc' + id).selectedIndex].value;
	detail['vid'] = viewerId;
	todo[id] = wave.util.printJson(detail);
	wave.getState().submitDelta(todo);
	gadgets.window.adjustHeight();
}

function editToDo(){
	this.innerHTML = 'Save';
	this.onclick = saveToDo;
	var id = this.id;
	createSelect(id, 'prio', priorities, priorities, $('prio'+id).innerHTML);
	createSelect(id, 'proc', progress, progress, $('proc'+id).innerHTML.replace('%',''));
	var task = ele.create('input');
	task.maxLength = '30';
	task.value = $('name' + id).innerHTML;
	task.id = 'task' + id;
	ele.write('name' + id, '');
	$('name' + id).appendChild(task);
	gadgets.window.adjustHeight();
}

function createToDo(vid, strip, prio, name, proc, oid){
	var user = wave.getParticipantById(oid);
	var tr = ele.create('tr');
	tr.className = 'strip' + strip;
	var tduser = ele.create('td');
		tduser.className = 'uarea';
		tduser.title = user.getDisplayName();
		var tduserimg = ele.create('img');
		tduserimg.className = 'uarea';
		tduserimg.src = user.getThumbnailUrl();
		tduser.appendChild(tduserimg);
	var tdedit = ele.create('td');
		tdedit.className = 'edit';
		//if(oid == viewerId){
			tdedit.innerHTML = 'Edit';
			tdedit.id = vid;
			tdedit.title = 'Edit Task';
			tdedit.onclick = editToDo;
		//}
	var tdprio = ele.create('td');
		tdprio.className = 'opt';
		tdprio.innerHTML = prio;
		tdprio.title = 'Priority';
		tdprio.id = 'prio' + vid;
	var tdname = ele.create('td');
		tdname.className = 'tname';
		var divpd = ele.create('div');
			divpd.className = 'pd';
			var divd1 = ele.create('div');
				divd1.className = 'd1';
			var divd2 = ele.create('div');
				divd2.className = 'd2';
				divd2.style.width = proc+'%';
			var divd3 = ele.create('div');
				divd3.className = 'd3';
				divd3.innerHTML = clip(name,30);
				divd3.title = proc + '% Completed -> ' +name;
				divd3.id = 'name' + vid;
		divpd.appendChild(divd1);
		divpd.appendChild(divd2);
		divpd.appendChild(divd3);
	tdname.appendChild(divpd);
	var tdproc = ele.create('td');
		tdproc.className = 'opt';
		tdproc.innerHTML = proc+'%';
		tdproc.title = 'Task Progress';
		tdproc.id = 'proc' + vid;
	var tddel = ele.create('td');
		tddel.className = 'edit';
		//if(oid == viewerId){
			tddel.innerHTML = '<img src="http://www.voizle.com/image/del.png" />';
			tddel.id = 'd' + vid;
			tddel.title = 'Delete Task';
			tddel.onclick = delToDo;
		//}
	tr.appendChild(tduser);
	tr.appendChild(tdedit);
	tr.appendChild(tdprio);
	tr.appendChild(tdname);
	tr.appendChild(tdproc);
	tr.appendChild(tddel);
	$('todolist').appendChild(tr);
}
function getId(){
	return wave.getTime();
}
function addTask(){
	if($('item').value.length != 0){
		var detail = {};
		var todo = {};
		detail['prio'] = $('priority').options[$('priority').selectedIndex].value;
		detail['name'] = $('item').value.replace("'", "\\\\'");
		detail['proc'] = 0;
		detail['vid'] = viewerId;
		var uid = getId();
		todo[uid] = wave.util.printJson(detail);
		wave.getState().submitDelta(todo);
		$('item').value = '';
		$('priority').selectedIndex = 2;
	}else{
		alert('Please provide Task name!!')
	}
	gadgets.window.adjustHeight();
}
function highChanged() {
	if(!wave.getState()) {
		return;
	}
	todo = {};
	var state = wave.getState();
	viewerId = wave.getViewer().getId();
	var keys = state.getKeys();
	taskdetail = {};
	var len = keys.length;
	if(len != 0){
		var k = 1;
		ele.show('search');
		ele.show('todobody');
		ele.write('todolist', '');
		for(i = len - 1; i >= 0; i--, k++){
			taskdetail = {};
			eval('taskdetail = ' + state.get(keys[i]));
			todo[keys[i]] = wave.util.printJson(taskdetail);
			createToDo(keys[i], i%2, taskdetail.prio, taskdetail.name, taskdetail.proc, taskdetail.vid);
		}
		if(k==1){
			ele.hide('search');
			ele.hide('todobody');
		}else searchToDo();
	}else{
		ele.hide('search');
		ele.hide('todobody');
	}
	gadgets.window.adjustHeight();
}

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