<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Wave simple IM"
		height="250"
		description="Simple IM"
		author="Gerhard Davids"
		author_email="glacieredpyro@gmail.com">
  <Require feature="rpc" /> 
  </ModulePrefs>
  <Content type="html">
 <![CDATA[ 
 <script type="text/javascript" src="http://wave-api.appspot.com/public/wave.js"></script> 
 <script type="text/javascript">
 	//Members
	var BLIP_HTML_TEMPLATE = "<div style=\"background-color:#DCEFF3;border:solid 1px black; margin-top:5px;\">"
			+ "<table><tr>"
			+ "<td rowspan=\"2\" onmouseover=\"swap({id});$('txt{id}').select();\" onmouseout=\"swap({id});\"><img id=\"thumbnail\" src=\"{thmb}\" width=\"50\" height=\"50\"/><br />"
			+ "<input type=\"hidden\" id=\"btn{id}\" value=\"edit\">"
			+ "</td><td><div style=\"color:#2E752B;\"><b>{owner} :</b></div></td>"
			+ "</tr><tr><td style=\"width:100%;\"><div id=\"blip{id}\">{message}</div></td>"
			+ "</tr></table></div>";
	var BLIP_HTML_NOTIFICATION = "<div style=\"color:#9C2A3B;padding-left:20px; margin-top:5px;\">a New user has joined the wave</div>";
	
  	function submit() {
	    if ($("textInput").value) {
		    if (!wave.getState()) {
	        	return;
	     	}
      		var blip = $("textInput").value;
      		var owner = wave.getViewer().getId();
      		var state = wave.getState();
      		$("textInput").value = "";
      		delta = {};
        	delta["owner"] = owner;
        	delta["blip"] = blip;
        	delta["idGen"] = getUniqueID(state);
        	delta["edit"] = 0;
        	state.submitDelta(delta);
	    }
    }

    function newMember() {
    	if (!wave.getState()) {
        	return;
     	}
    	blip = BLIP_HTML_NOTIFICATION;
    	owner = "_null";
    	var state = wave.getState();
    	delta = {};
    	delta["owner"] = owner;
    	delta["blip"] = blip;
    	state.submitDelta(delta);
    }

	function $(pElement) {
		return document.getElementById(pElement);
	}

	function getBlip(pOwner, pMessage, pID) {
		var blip = BLIP_HTML_TEMPLATE.replace("{owner}", getName(pOwner)).replace("{id}", pID).replace("{id}", pID).replace("{id}", pID);
		blip = blip.replace("{message}", pMessage).replace("{id}", pID).replace("{id}", pID).replace("{thmb}", getThumbnail(pOwner));
		return blip;
	}
	
	function getUniqueID(pState) {
		if (pState.get("idGen")) {
			return pState.get("idGen") + 1;
		} else {
			return 0;
		}
	}
	
	function getName(pID) {
		var participants = wave.getParticipants();
	    if (participants) {
	    	for (var i = 0; i < participants.length; ++i) {
		        if (participants[i].getId() == pID) {
		          var user = participants[i];
		          return user.getDisplayName();
		        }
		      }
	    }
	    return "glacieredpyro@gmail.com";
	}
	
	function getThumbnail(pID) {
		var participants = wave.getParticipants();
	    if (participants) {
	    	for (var i = 0; i < participants.length; ++i) {
		        if (participants[i].getId() == pID) {
		          var user = participants[i];
		          //return user.getDisplayName();
		          return user.getThumbnailUrl();
		        }
		      }
	    }
	}
	
	function swap(id) {
	    if($("btn"+id).value == "edit") { 
	    	var val = $("blip"+id).innerHTML.replace("<br>", "\n");
	    	var text = "<textarea id=\"txt"+id+"\" style=\"width:100%;\" rows=3>"+val+"</textarea>";
	    	$("blip"+id).innerHTML = text;
	    	$("btn"+id).value = "save";
	    } else if($("btn"+id).value = "save") {
	    	var val = $("txt"+id).value.replace("\n","<br>");
	    	$("blip"+id).innerHTML = val;
	    	$("btn"+id).value = "edit";
	    	var state = wave.getState();
      		delta = {};
        	delta["blip"] = val;
        	delta["idGen"] = id;
        	delta["edit"] = 1;
        	state.submitDelta(delta);
	    }
    }

    function renderInfo() {
     if (!wave.getState()) {
        return;
     }
     var state = wave.getState();
	if(state.get("edit") && state.get("edit") == 1) {
		$("blip"+state.get("idGen")).innerHTML = state.get("blip");
		return;
	} 
	 if (state.get("owner")) {
	     if (state.get("owner") != "_null") {
		 	 $("chatContainer").innerHTML = getBlip(state.get("owner"), state.get("blip"), state.get("idGen")) + $("chatContainer").innerHTML;
	     } else {
	    	 $("chatContainer").innerHTML = state.get("blip") + $("chatContainer").innerHTML;
	     }
     }
	 $("thumbnail").src = wave.getViewer().getThumbnailUrl();
    }

    function checkReturn(e) {
    	var characterCode;
    	if(e && e.which){ 
    		e = e
    		characterCode = e.which 
    	}else{
    		e = event
    		characterCode = e.keyCode 
    	}
    	if(characterCode == 13){ 
    		return false 
    	}else{
    		return true 
    	}
    }

    function init() {
      if (wave && wave.isInWaveContainer()) {
      	var blip = "Welcome to my first Gadget attempt.<br /> I will be extending this example built in pure JS/HTML as I go along."
		    	+ "it may also later move to using GWT instead.<br />Feel free to contact me for any info/comments/queries<br>"
		    	+ "Update : Hovering over an avatar will place you in edit mode, leaving the avatar will commit the change.<br>"
		    	+ "Some problem in chrome. Not to bothered about chrome at the moment as im trying to get my GWT version working.";
      	var owner = -1;
	    $("chatContainer").innerHTML = getBlip(owner, blip, 1) + $("chatContainer").innerHTML;
        wave.setStateCallback(renderInfo);
        wave.setParticipantCallback(newMember);
      }
    }
    gadgets.util.registerOnLoadHandler(init);
  </script>
	<div>
		<img id="thumbnail" src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/unknown.gif" width="50" height="50"/>
		<input id="textInput" type="text" width="100px" onkeypress="if(!checkReturn(event)) {submit();}"/>
		<input type="button" value="enter" onClick="submit();"/>
	</div>
	<div id="chatContainer" style="padding-left:5px;padding-right:5px;"></div>
  ]]> 
  </Content>
  </Module>