<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs 
	title="TrimURL with Voizle" 
	title_url="http://www.voizle.com/Gadgets/TrimURL.xml" 
	screenshot="http://www.voizle.com/Gadgets/image/crazymathlarge.jpg"
	thumbnail="http://www.voizle.com/Gadgets/image/crazymathlarge.jpg"
	description="Trim URL with Voizle and get statistic report for each Trimmed URL." 
	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{
		font-size:10pt;
	}
	h1, form{
		margin:0px;
	}
	.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;
		vertical-align:top;
		padding-top:5px;
	}
	.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;
	}
	.help{
		color:#cccccc;
		font-size:10pt;
		text-align:left;
		padding-left:10px;
		margin:0px;
	}
	.list{
		overflow:auto;
		width:100%;
	}
</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'>TrimURL with Voizle</a>
			</td>
		</tr>
	</thead>
	<tbody id='body'>
		<tr>
			<td valign='top' width='400px'>
				<div class='centerbox'>
					<form action="#" onsubmit="return false;">
						<table width='100%'>
							<tbody>
								<tr>
									<td class='label'>Long URL: </td><td class='uid'><input autocomplete="off" size='40' type='text' id='lurl' value='http://www.google.com' /><p class='help'>example: http://www.crazyfriendz.com/url/?lovesharma<hr/></p><input type='submit' value='Trim' onclick='return trimurl();' /> <input type='button' value='Reset' onclick='reseti()' /></td>
								</tr>
								<tr>
									<td class='label'>Trimmed URL: </td><td class='uid'><input autocomplete="off" type='text' size='30' id='turl' /><hr/></td>
								</tr>
							</tbody>
							<tfoot>
								<tr><td colspan='2'>
								<div class='list' id='cb'>
									<table width="90%" align="center">
										<tbody id='lst'></tbody>
									</table>
									</div>
								</td></tr>
							</tfoot>
						</table>
					</form>
				</div>
			</td>
		</tr>
	</tbody>
</table>
<a href="http://www.voizle.com/preview.vz?id=tzcjuopv&stat=true" target="_blank"><img alt="Voizle - Statistics for Trimmer" src="http://img.voizle.com/tzcjuopv.jpg" title="Voizle - Statistics for Trimmer"></a>
</center>
</div>
<script type="text/javascript">
var viewerId;
      var ga = new _IG_GA("UA-9339177-1");
      ga.reportPageview('/Gadgets/TrimUrl');
// 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 reseti(){
	$("lurl").value="";
	$("turl").value="";
}
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;
}
function trimurl(){
	try{
		var lurl = $('lurl').value.trim();
		if(lurl.length != 0){
		var params = {};  
		params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
		var url = "http://api.voizle.com/?crawl=no&type=short&format=json&u="+lurl;  
		gadgets.io.makeRequest(url, getContent, params);}
	}catch(e){log(e);}
	gadgets.window.adjustHeight();
}
function getContent(obj) {
  try{
		//obj.text contains the text of the page that was requested  
		var jsondata = obj.data;
		if(jsondata.voizle.success){
			var urlid = jsondata.voizle.urlid;
			$('turl').value = 'http://u.voizle.com/' + urlid;
			var arr = {};
			arr[urlid] = viewerId;
			wave.getState().submitDelta(arr);
		}
	}catch(e){
		log(e);
	}
	gadgets.window.adjustHeight();
}
function createList(vid, k){
	var user = wave.getParticipantById(vid);
	var tr = ele.create('tr');
		tr.className = 'sep';
		var td = ele.create('td');
			td.className = 'upic';
			var img = ele.create('img');
				img.className = 'userpic';
				img.title = user.getDisplayName();
				img.src = user.getThumbnailUrl();
			td.appendChild(img);
		var tdlink = ele.create('td');
			tdlink.className = 'uid';
			tdlink.innerHTML = '<a target="_blank" href="http://u.voizle.com/'+k+'">http://u.voizle.com/'+k+'</a>';
			tdlink.title = 'http://u.voizle.com/'+k;
		var tddet = ele.create('td');
			tddet.className = 'uid';
			tddet.innerHTML = '<a target="_blank" href="http://www.voizle.com/preview.vz?id='+k+'">detail</a>';
		tr.appendChild(td);
		tr.appendChild(tdlink);
		tr.appendChild(tddet);
	$('lst').appendChild(tr);
}
function initThis() {
	if(!wave.getState()) {
		return;
	}
	state = wave.getState();
	viewerId = wave.getViewer().getId();
	var keys = state.getKeys();
	var len = keys.length;
	ele.write('lst', '');
	j = 0;
	for(i = len - 1 ;i >= 0; i--, j++){
		createList(state.get(keys[i]), keys[i]);
	}
	if(j>4){
		$('cb').style.height = '150px';
	}
   gadgets.window.adjustHeight();
}

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