<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="To Do" title_url="http://www.voizle.com/ToDo.xml" screenshot="http://www.voizle.com/image/crazymathlarge.jpg" thumbnail="http://www.voizle.com/image/crazymathlarge.jpg" description="todo" author="Love sharma" author_email="love.sharma.87@gmail.com" height='350'>
<Require feature="wave"/> 
  </ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
	<html>
<head><title>TaskToDo</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:#e0F8FF;
}
.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;
}

</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 width='100%' border='0'><tr align='center' valign='middle'><td><img src='http://www.voizle.com/image/task.orig.png' /></td><td><h1>-- Task To-Do --</h1><a id='vlink' href="http://www.voizle.com">Powered by Voizle</a></td><td><img src='http://www.voizle.com/image/task.orig.png' /></td></tr></table><hr>

<table border="1" frame='box' rules='all' bordercolor='#999' width='100%' align='center' style='margin-bottom:10px'>
	<tr><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>
		<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=todo" target="_blank"><img alt="Voizle - Statistics for ToDo" src="http://img.voizle.com/todo.jpg" title="Voizle - Statistics for TaskToDo"></a>
</center>
</div>
<script type="text/javascript">
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, list;
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();
}
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){}
	}
}
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);
}

function searchToDo(){
	var query = $('q').value.toLowerCase();
	ele.write('todolist', '')
	var state = wave.getState();
	todo[viewerId] = state.get(viewerId);
	list = {};
	if(todo[viewerId] != null){
		eval('list = ' + todo[viewerId]);
		var i = 1;
		ele.write('todolist', '');
		for(key in list){
			var detail = list[key];
			if(detail.name.toLowerCase().search(query) > -1 || detail.prio.toLowerCase().search(query) > -1){
				createToDo(key, i%2, detail.prio, detail.name, detail.proc);
				i++;
			}
		}
		if(i == 1){
			ele.write('todolist','<center>Task Not Found: ' + query +'</center>');
		}
	}
}

function delToDo(){
	todo = {};
	delete list[this.id.substr(1)];
	todo[viewerId] = wave.util.printJson(list);
	wave.getState().submitDelta(todo);
}

function saveToDo(){
	this.innerHTML = 'Edit';
	this.onclick = editToDo;
	var id = this.id;
	var detail = 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;
	list[id] = detail;
	todo[viewerId] = wave.util.printJson(list);
	wave.getState().submitDelta(todo);
}

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);
}

function createToDo(vid, strip, prio, name, proc){
	var tr = ele.create('tr');
	tr.className = 'strip' + strip;
	var tdedit = ele.create('td');
		tdedit.className = 'edit';
		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';
		tddel.innerHTML = '<img src="http://www.voizle.com/image/del.png" />';
		tddel.id = 'd' + vid;
		tddel.title = 'Delete Task';
		tddel.onclick = delToDo;
	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 = todo = {};
		detail['prio'] = $('priority').options[$('priority').selectedIndex].value;
		detail['name'] = $('item').value.replace("'", "\\\\'");
		detail['proc'] = 0;
		var uid = getId();
		list[uid] = detail;
		todo[viewerId] = wave.util.printJson(list);
		wave.getState().submitDelta(todo);
		$('item').value = '';
		$('priority').selectedIndex = 2;
		//wave.getState().submitValue(viewerId, 'got');
	}else{
		alert('Please provide Task name!!')
	}
}
function highChanged() {
	if(!wave.getState()) {
		return;
	}
	todo = {};
	var state = wave.getState();
	viewerId = wave.getViewer().getId();
    todo[viewerId] = state.get(viewerId);
	list = {};
	if(todo[viewerId] != null){
		ele.show('search');
		ele.show('todobody');
		eval('list = ' + todo[viewerId]);
		var i = 1;
		ele.write('todolist', '');
		for(key in list){
			var detail = list[key];
			if(detail){
				createToDo(key, i%2, detail.prio, detail.name, detail.proc);
				i++;
			}
		}
		if(i==1){
			ele.hide('search');
			ele.hide('todobody');
		}else searchToDo();
	}else{
		ele.hide('search');
		ele.hide('todobody');
	}
}

function init() {
    if (wave && wave.isInWaveContainer()) {
        wave.setStateCallback(highChanged);
    }
}
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>