<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs
            title="Hello Ontology!"
            description="Websites">
        <Require feature="opensocial-0.9" />
        <Require feature="views" />
        <Require feature="dynamic-height" />
        <Require feature="osapi" />
        <Require feature="orng" />
    </ModulePrefs>
    <Content type="html" view="default, home, profile"><![CDATA[<!--HTML-->
    <!DOCTYPE html>
    
	<!-- #includes -->
	<link rel="stylesheet" href="css/gadget.css" type="text/css" media="screen, projection" >
 	<link rel="stylesheet" href="css/inst.css" type="text/css" media="screen, projection" >
   	<script type="text/javascript" src="js/jquery-1.4.4.js"></script>    	
    <script type="text/javascript" src="../js/jquery.blockUI.js"></script>    
    <script type="text/javascript" src="../js/os.js" ></script>
    
	<style>
    	.links_credit { font-size:10px; }
		.links_save_button { height:20px; font-size:11px; } 
    	#edit-links {padding: 0px 0px 10px 25px; overflow: auto; width: 650px;}
		.links tr:hover {border: 1px dotted gray; cursor: pointer;}
		.links td {word-break: break-all; padding:5px;}
		.handle {background: url("images/draggable.png") no-repeat 0 0;display: block; width: 13px; height: 13px;}
    </style>
	
	<script type="text/javascript">
		function gadgetEventTrack(action, label, value) {	
			var message = {'action' : action};
			if (label) {message.label = label;}
			if (value) {message.value = value;}
			
			gadgets.orng.reportGoogleAnalyticsEvent(message);
		}		
	
		// ========================================		
		function loadLinks(callback) {
			$(".links-gadget").block({ message: "Loading..." });
			osapi.appdata.get({'userId': '@owner', 'appId':'@app', 'fields' : ['links', 'links_count']} ).execute(function(result){
				// get incoming link data (in json string format)
				var viewer = os.osapi.getViewerFromResult(result);
				
				if(viewer.links_count) {
					var count = viewer.links_count;
					if(count > 0) {
						var fields=[];
						for(var i=0;i<count;i++) {
							fields.push('link_' + i);
						}
						osapi.appdata.get({'userId': '@owner', 'groupId': '@self', 'appId':'@app', 'fields': fields})
					    	.execute(function(pub_response){
					    		var pub_viewer = os.osapi.getViewerFromResult(pub_response);
				    			for(var i=0;i<count;i++) {
						    		var link = gadgets.json.parse(pub_viewer['link_' + i]) || {};
				    				if(link.name) {
										renderLink(link.name, link.url);
				    				}
				    			}
				    			
								$(".links-gadget").unblock();
				    			if(callback) {
				    				callback();
				    			}			    		
					    	}); 	    	
					}
				}
				else {
					//old data
					
					links = gadgets.json.parse(viewer.links) || [];
					for (var i=0;i<links.length;i++) {
						var link = links[i];
						renderLink(link.link_name, link.link_url);
					}					
				}
				$(".links-gadget").unblock();
				
				if(callback) {
					callback();
				}				
		
			});			
		}	
		
		// ========================================		
		function saveLinks(callback) {
      		var data = {links_count:"0"};
      		var count = 0;
		
			$("table.links tr").each(function(index, value) {
      			var link = {name: $("a", value).text(), url: $("a", value).attr("href")};
      			data["link_" + count] = JSON.stringify(link);
      			count++;
      			
				//links.push({link_name: $("a", value).text(), link_url: $("a", value).attr("href")});			
			});
			data.links_count="" + count;
			
			osapi.appdata.update({'userId': '@viewer', 'appId': '@app', 'data': data }).execute(function(result) {
				if (result.error) { 
					alert("Error " + result.error.code + " writing application data: " + result.error.message);
				} else {
					if(callback) {
						callback();
					}
				}
			});
		}	
        		
		// ========================================		
		function renderLink(name, url) {
			var html = '<tr>';
			if($("#edit-links").length > 0) {
				html += '<td><span class="handle"/></td>';
			}
			
			html += '<td><img class="favicon" height="16" width="16"/></td><td ><a href="' + url + '" target="_blank">' + name + '</a></td>';
			if($("#edit-links").length > 0) {
				html += '<td>' + url + '</td><td><input type="button" value="Delete"></td>';
			}
			html += '</tr>';
			
			var row = $(html).appendTo("table.links tbody");
			var domain = $("a", row).get(0).hostname;
			$("img.favicon", row).attr("src", "http://www.google.com/s2/favicons?domain=" + domain);			 
		}	

		// ========================================		
		function adjustHeight() {
			var h = $(".links-gadget").height();
			h = h > 150? 150: h; 
      		gadgets.window.adjustHeight(h);
		}	
				
	</script>]]>
	</Content>
	
    <Content type="html" view="home" preferred_width="720" preferred_height="500"><![CDATA[<!--HTML-->		
	    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>    
    	
		<script type="text/javascript">
			function adjustHomeHeight() {
				var h = $(".links-gadget").height();
	      		gadgets.window.adjustHeight(h+50);
			}
			function init() {
		    	$(document).ready(function () {
					loadLinks(function() {
						adjustHomeHeight();
					});
					
		    		$("#add-link").click(function() {
		    			var name = $("#link-name").val();
		    			var url = $("#link-url").val();
						if(name=="" || url==""){
							alert("Please provide both a Link Name and a URL");
							return;
						}
						if(url.indexOf("://") == -1){
							url = "http://" + url;
						}
						
		    			renderLink(name, url);
						adjustHomeHeight();
		    			saveLinks();
		    			
		    			$("#link-name").val("");
		    			$("#link-url").val("");		    			
		    		});		    		
		    		$("table.links tr input").live("click", function() {
		    			$(this).parent().parent().remove();
						adjustHomeHeight();
		    			saveLinks();
		    		});
		    		
		    		$("table.links a").live("click", function() {
		    			gadgetEventTrack('go_to_website', $(this).text());
		    		});
		    		
					$( "table.links tbody" ).sortable({ 
						axis: "y",
						update: function( event, ui ) {
							saveLinks();
						}
					});		    		
		    	});
			}
	    </script>
	    
    	<div class="links-gadget">
		    <h3 style="padding-left:10px; padding-top: 0px;">Manage Links to Other Websites</h3>
		
		    <div style="padding:5px 0px 0px 25px;">
		    	Add websites to your profile. 
				Enter the website name, as you want it to appear on your profile, and its URL. 
		        Some examples include a link to your lab web site, your research program or your research blog.<br /><br />
		        You can drag and drop entries to change the order.<br /><br />
			</div>
			
			<!-- display the new link input fields -->
			<div class='question' style="padding:0px 0px 5px 12px;">
				<table cellpadding="0" cellspacing="0">
					<tr>
						<td class="links_body" valign="top"><b>Website Name</b><br />
							e.g. My Lab Site<br />
		                    <input id="link-name" type="linkname" name="linkname" style="width:280px; margin-top:4px;"><br />
		                    (60 characters max)
		                </td>
						<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
						<td class="links_body" valign="top"><b>Website URL</b> (not displayed in profile)<br />
							e.g. mylabsite.edu<br />
		                    <input id="link-url" type="linkurl" name="linkurl" style="width:250px; margin-top:4px;" value="http://">
		                </td>
		                <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
		                <td><br /><br /><input id="add-link" type="button" style="margin-bottom: 8px;" value="Add"></td>
					</tr>				
				</table>			
			</div>
		    
		    <h4 style="padding-left:10px; padding-top: 0px;">Your Current Websites:</h4>
		    <div id="edit-links" style="padding:0px 0px 10px 25px;">
		    	<table class="links" cellspacing='0' cellpadding='0' border='0'>
		    		<tbody></tbody>
		    	</table>
		    </div>
	    </div>        
	    <script type="text/javascript">
	    	gadgets.util.registerOnLoadHandler(function() {
				init();
			});
	    </script>
	    ]]>
    </Content>
    
    
    <Content type="html" view="profile" preferred_width="670" preferred_height="200"><![CDATA[<!--HTML-->
   
    	<div class="links-gadget">
		    <div id="view_links_table" style="padding:0px 0px 10px 20px;">
		    	<table class="links" cellspacing='0' cellpadding='0' border='0'>
		    		<tbody></tbody>
		    	</table>
		    </div>     
	    </div>     
   
		<script type="text/javascript">
	    	gadgets.util.registerOnLoadHandler(function() {
		    	$(document).ready(function () {
					loadLinks(function(){
						adjustHeight();					
					});
		    		$("table.links a").live("click", function() {
		    			gadgetEventTrack('go_to_website', $(this).text());
		    		});
				});
			});
	    </script>]]>
	</Content>
</Module>