rave-demo-gadgets/src/main/webapp/CTSSResourcesMapView.xml - rave - Git at Google

 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Licensed to the Apache Software Foundation (ASF) under one
   or more contributor license agreements.  See the NOTICE file
   distributed with this work for additional information
   regarding copyright ownership.  The ASF licenses this file
   to you under the Apache License, Version 2.0 (the
   "License"); you may not use this file except in compliance
   with the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing,
   software distributed under the License is distributed on an
   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
   KIND, either express or implied.  See the License for the
   specific language governing permissions and limitations
   under the License.

   $Id:$
 -->
 <Module>
   <ModulePrefs
 title="List of CTSS Resources - Map View"
 title_url="http://www.collab-ogce.org/ogce/index.php/Main_Page"
 author="Suresh Deivasigamani"
 author_email="sudeivas@indiana.edu"
 description="This is a gadget developed for Teragrid - OGCE project. Used Google gadgets API to retrieve the information from the Information Service's REST Web Service and display the information using Google Maps API. This is a list of available CTSS resources and its details"
 height="800"
 screenshot="http://img695.imageshack.us/img695/2726/ctssresourcesmapviewscr.png"
 thumbnail="http://img704.imageshack.us/img704/444/ctssresourcesmapview.png">
 </ModulePrefs>
 <Content type="html" view="canvas,home">
  <![CDATA[
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>Google Maps JavaScript API v3 Example: Map Simple</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 <script type="text/javascript">
     var geocoder;
     var map;
     var info_global;
     keyArray = new Array(); // Keys
     valArray = new Array(); // Values

 // function to insert key and its value in 2 different arrays
     function put( key, val )
     {
     var elementIndex = findIt( key );
     if( elementIndex == (-1) )
     	{
         keyArray.push( key );
         valArray.push( val );
     	}
     else
     	{
         valArray[ elementIndex ] = val;
     	}
     }

 // function to get the value based on the key
     function get( key )
     {
     var result = null;
     var elementIndex = findIt( key );
     if( elementIndex != (-1) )
     	{
         result = valArray[ elementIndex ];
     	}
     	return result;
     }

 // find the index on the key
     function findIt( key )
     {
     var result = (-1);
     for( var i = 0; i < keyArray.length; i++ )
    	 {
         	if( keyArray[ i ] == key )
         	{
             	result = i;
             	break;
         	}
    	 }
     return result;
     }

 // function to retrieve the XML file from the REST web service
     function makeJSONRequest() {
       var params = {};
       params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
       // This URL returns a JSON-encoded string that represents a JavaScript object
       var url = "http://info.teragrid.org/web-apps/json/ctss-resources-v1/";
       gadgets.io.makeRequest(url, response, params);
     }

 // process the XML response
     function response(obj) {
       var jsondata = obj.data;
       var jsondataInner = obj.data;
       // Process returned JS object as an associative array
       for (var key in jsondata.Resources) {
 	var valueOuter = jsondata.Resources[key];
 	for(var item in valueOuter) {
 		var valueList = new Array();
 		valueList.push(valueOuter[item]);
 		for(var keyInner in jsondataInner.Resources){
 			var valueInner = jsondataInner.Resources[keyInner];
 			for(var itemInner in valueInner){
 				if(valueOuter[item].OrganizationName == valueInner[itemInner].OrganizationName && valueOuter[item].ResourceID != valueInner[itemInner].ResourceID)			{
 					valueList.push(valueInner[itemInner]);
 				}
 			}
 		}
 		codeAddress(valueList);
 	}
       }
      }

 // function to initialize values to the google maps. Latitude and longitude are hard coded for the locations.
    function initialize() {
     geocoder = new google.maps.Geocoder();
     var myLatlng = new google.maps.LatLng(35.50,-90.35);
     var myOptions = {
       zoom: 4,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.HYBRID
     }
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     makeJSONRequest();
     put("Indiana University",new google.maps.LatLng(39.16,-86.53));
     put("Louisiana Optical Network Initiative",new google.maps.LatLng(40.25,-86.55));
     put("National Center for Atmospheric Research",new google.maps.LatLng(40.01,-105.17));
     put("National Center for Supercomputing Applications",new google.maps.LatLng(40.6,-88.12));
     put("University of Tennessee, Knoxville",new google.maps.LatLng(35.57,-83.55));
     put("Oak Ridge National Laboratory",new google.maps.LatLng(36.0,-84.16));
     put("Pittsburgh Supercomputing Center",new google.maps.LatLng(40.26,-79.59));
     put("Purdue University",new google.maps.LatLng(40.3,-86.6));
     put("University of Texas at Austin",new google.maps.LatLng(30.17,-97.45));
    }

 // function to get the INCA status for a particular Resource
    function getStatus(obj){
 	var id = obj.id;
 	document.getElementById(id).disabled="true";
 	var id_array = id.split(";");
 	info_global = document.getElementById(id_array[0]);
 	var params = {};
         params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
 	var url = "http://inca.teragrid.org/inca/XML/kit-status-v1/portal_summary/"+id_array[1];
         gadgets.io.makeRequest(url, statusResponse, params);
 	}

 // function to process the response of INCA Status call and insert into the respective tabs
    function statusResponse(obj){
 	var domdata = obj.data;
  	var itemList = domdata.getElementsByTagName("reportSummary");
 	var temp = "<font size=\"2\" face=\"Verdana\"><b>INCA Status: </b>";
 	if(itemList.length > 0){
 	for(var i=0;i<itemList.length;i++){
 		if(itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue !="Success")
 			temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: red\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
 		else
 			temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: LimeGreen\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
 		}
 	}else{
 	temp = temp + "<p>none";
 	}
 	temp = temp +"</font>";
 	var element = document.createElement("div");
 	element.innerHTML = temp;
 	info_global.appendChild(element);
 	}

 // function to create markers and infowindows for each marker
    function codeAddress(valueList){
 	var address = valueList[0].OrganizationName
 	var marker = new google.maps.Marker({
 		map: map,
 		position: get(address),
 		});
 	var contentString = document.createElement("div");
 	contentString.id = "tabs";
 	var header = document.createElement("ul");
 	contentString.appendChild(header);
 	var i = 0;
 	for(i=0;i<valueList.length;i++)
 	{
 	var value = valueList[i];
 	var temp = document.createElement("li");
 	temp.innerHTML = "<a href=\"#tab-"+i+"\"><span><font size=\"2\" face=\"Verdana\"><b>"+value.ResourceID.substring(0,value.ResourceID.indexOf('.'))+"</b></font></span></a>";
 	header.appendChild(temp);
 	var info = document.createElement("div");
 	info.id = "tab-"+i;
 	var buttonId = info.id+";"+value.ResourceID;
 	info.innerHTML = '<font size="2" face="Verdana"><b>SiteID : </b>' + value.SiteID +
 		'<p><b>ResourceID : </b>' + value.ResourceID +
 		'<p><b>TgcdbResourceName : </b>' + value.TgcdbResourceName +
 		'<p><b>ResourceName : </b>' + value.ResourceName +
 		'<p><b>OrganizationName : </b>' + value.OrganizationName +
 		'<p><b>PopsName : </b>' + value.PopsName + '</font>' +
 		'<p><button type="button" id='+buttonId+' onclick="getStatus(this);"><font size="2" face="Verdana"><b>INCA STATUS</b></font></button>';
 	contentString.appendChild(info);
 	}
 	var infoWindow = new google.maps.InfoWindow({
 		content: contentString
 		});
 	google.maps.event.addListener(marker, 'click', function() {
 		infoWindow.open(map,marker);
 		 $("#tabs").tabs();
 		});
    }
 </script>
 </head>
 <body style="margin:0px; padding:0px;" onload="initialize()">
   <div id="map_canvas" style="width:100%; height:100%"></div>
 </body>
   ]]>
 </Content>

 <Content type="html" view="default">
  <![CDATA[
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>Google Maps JavaScript API v3 Example: Map Simple</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 <script type="text/javascript">
     var geocoder;
     var map;
     var info_global;
     keyArray = new Array(); // Keys
     valArray = new Array(); // Values

 // function to insert key and its value in 2 different arrays
     function put( key, val )
     {
     var elementIndex = findIt( key );
     if( elementIndex == (-1) )
     	{
         keyArray.push( key );
         valArray.push( val );
     	}
     else
     	{
         valArray[ elementIndex ] = val;
     	}
     }

 // function to get the value based on the key
     function get( key )
     {
     var result = null;
     var elementIndex = findIt( key );
     if( elementIndex != (-1) )
     	{
         result = valArray[ elementIndex ];
     	}
     	return result;
     }

 // find the index on the key
     function findIt( key )
     {
     var result = (-1);
     for( var i = 0; i < keyArray.length; i++ )
    	 {
         	if( keyArray[ i ] == key )
         	{
             	result = i;
             	break;
         	}
    	 }
     return result;
     }

 // function to retrieve the XML file from the REST web service
     function makeJSONRequest() {
       var params = {};
       params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
       // This URL returns a JSON-encoded string that represents a JavaScript object
       var url = "http://info.teragrid.org/web-apps/json/ctss-resources-v1/";
       gadgets.io.makeRequest(url, response, params);
     }

 // process the XML response
     function response(obj) {
       var jsondata = obj.data;
       var jsondataInner = obj.data;
       // Process returned JS object as an associative array
       for (var key in jsondata.Resources) {
 	var valueOuter = jsondata.Resources[key];
 	for(var item in valueOuter) {
 		var valueList = new Array();
 		valueList.push(valueOuter[item]);
 		for(var keyInner in jsondataInner.Resources){
 			var valueInner = jsondataInner.Resources[keyInner];
 			for(var itemInner in valueInner){
 				if(valueOuter[item].OrganizationName == valueInner[itemInner].OrganizationName && valueOuter[item].ResourceID != valueInner[itemInner].ResourceID)			{
 					valueList.push(valueInner[itemInner]);
 				}
 			}
 		}
 		codeAddress(valueList);
 	}
       }
      }

 // function to initialize values to the google maps. Latitude and longitude are hard coded for the locations.
    function initialize() {
     geocoder = new google.maps.Geocoder();
     var myLatlng = new google.maps.LatLng(35.50,-90.35);
     var myOptions = {
       zoom: 4,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.HYBRID
     }
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     makeJSONRequest();
     put("Indiana University",new google.maps.LatLng(39.16,-86.53));
     put("Louisiana Optical Network Initiative",new google.maps.LatLng(40.25,-86.55));
     put("National Center for Atmospheric Research",new google.maps.LatLng(40.01,-105.17));
     put("National Center for Supercomputing Applications",new google.maps.LatLng(40.6,-88.12));
     put("University of Tennessee, Knoxville",new google.maps.LatLng(35.57,-83.55));
     put("Oak Ridge National Laboratory",new google.maps.LatLng(36.0,-84.16));
     put("Pittsburgh Supercomputing Center",new google.maps.LatLng(40.26,-79.59));
     put("Purdue University",new google.maps.LatLng(40.3,-86.6));
     put("University of Texas at Austin",new google.maps.LatLng(30.17,-97.45));
    }

 // function to get the INCA status for a particular Resource
    function getStatus(obj){
 	var id = obj.id;
 	document.getElementById(id).disabled="true";
 	var id_array = id.split(";");
 	info_global = document.getElementById(id_array[0]);
 	var params = {};
         params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
 	var url = "http://inca.teragrid.org/inca/XML/kit-status-v1/portal_summary/"+id_array[1];
         gadgets.io.makeRequest(url, statusResponse, params);
 	}

 // function to process the response of INCA Status call and insert into the respective tabs
    function statusResponse(obj){
 	var domdata = obj.data;
  	var itemList = domdata.getElementsByTagName("reportSummary");
 	var temp = "<font size=\"2\" face=\"Verdana\"><b>INCA Status: </b>";
 	if(itemList.length > 0){
 	for(var i=0;i<itemList.length;i++){
 		if(itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue !="Success")
 			temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: red\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
 		else
 			temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: LimeGreen\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
 		}
 	}else{
 	temp = temp + "<p>none";
 	}
 	temp = temp +"</font>";
 	var element = document.createElement("div");
 	element.innerHTML = temp;
 	info_global.appendChild(element);
 	}

 // function to create markers and infowindows for each marker
    function codeAddress(valueList){
 	var address = valueList[0].OrganizationName
 	var marker = new google.maps.Marker({
 		map: map,
 		position: get(address),
 		});
 	var contentString = document.createElement("div");
 	contentString.id = "tabs";
 	var header = document.createElement("ul");
 	contentString.appendChild(header);
 	var i = 0;
 	for(i=0;i<valueList.length;i++)
 	{
 	var value = valueList[i];
 	var temp = document.createElement("li");
 	temp.innerHTML = "<a href=\"#tab-"+i+"\"><span><font size=\"2\" face=\"Verdana\"><b>"+value.ResourceID.substring(0,value.ResourceID.indexOf('.'))+"</b></font></span></a>";
 	header.appendChild(temp);
 	var info = document.createElement("div");
 	info.id = "tab-"+i;
 	var buttonId = info.id+";"+value.ResourceID;
 	info.innerHTML = '<font size="2" face="Verdana"><b>SiteID : </b>' + value.SiteID +
 		'<p><b>ResourceID : </b>' + value.ResourceID +
 		'<p><b>TgcdbResourceName : </b>' + value.TgcdbResourceName +
 		'<p><b>ResourceName : </b>' + value.ResourceName +
 		'<p><b>OrganizationName : </b>' + value.OrganizationName +
 		'<p><b>PopsName : </b>' + value.PopsName + '</font>' +
 		'<p><button type="button" id='+buttonId+' onclick="getStatus(this);"><font size="2" face="Verdana"><b>INCA STATUS</b></font></button>';
 	contentString.appendChild(info);
 	}
 	var infoWindow = new google.maps.InfoWindow({
 		content: contentString
 		});
 	google.maps.event.addListener(marker, 'click', function() {
 		infoWindow.open(map,marker);
 		 $("#tabs").tabs();
 		});
    }
 </script>
 </head>
 <body style="margin:0px; padding:0px;" onload="initialize()">
   <div id="map_canvas" style="width:100%; height:100%"></div>
 </body>
   ]]>
 </Content>
 </Module>
	<?xml version="1.0" encoding="UTF-8"?>
	<!--
	Licensed to the Apache Software Foundation (ASF) under one
	or more contributor license agreements. See the NOTICE file
	distributed with this work for additional information
	regarding copyright ownership. The ASF licenses this file
	to you under the Apache License, Version 2.0 (the
	"License"); you may not use this file except in compliance
	with the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing,
	software distributed under the License is distributed on an
	"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	KIND, either express or implied. See the License for the
	specific language governing permissions and limitations
	under the License.

	$Id:$
	-->
	<Module>
	<ModulePrefs
	title="List of CTSS Resources - Map View"
	title_url="http://www.collab-ogce.org/ogce/index.php/Main_Page"
	author="Suresh Deivasigamani"
	author_email="sudeivas@indiana.edu"
	description="This is a gadget developed for Teragrid - OGCE project. Used Google gadgets API to retrieve the information from the Information Service's REST Web Service and display the information using Google Maps API. This is a list of available CTSS resources and its details"
	height="800"
	screenshot="http://img695.imageshack.us/img695/2726/ctssresourcesmapviewscr.png"
	thumbnail="http://img704.imageshack.us/img704/444/ctssresourcesmapview.png">
	</ModulePrefs>
	<Content type="html" view="canvas,home">
	<![CDATA[
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Google Maps JavaScript API v3 Example: Map Simple</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript">
	var geocoder;
	var map;
	var info_global;
	keyArray = new Array(); // Keys
	valArray = new Array(); // Values

	// function to insert key and its value in 2 different arrays
	function put( key, val )
	{
	var elementIndex = findIt( key );
	if( elementIndex == (-1) )
	{
	keyArray.push( key );
	valArray.push( val );
	}
	else
	{
	valArray[ elementIndex ] = val;
	}
	}

	// function to get the value based on the key
	function get( key )
	{
	var result = null;
	var elementIndex = findIt( key );
	if( elementIndex != (-1) )
	{
	result = valArray[ elementIndex ];
	}
	return result;
	}

	// find the index on the key
	function findIt( key )
	{
	var result = (-1);
	for( var i = 0; i < keyArray.length; i++ )
	{
	if( keyArray[ i ] == key )
	{
	result = i;
	break;
	}
	}
	return result;
	}

	// function to retrieve the XML file from the REST web service
	function makeJSONRequest() {
	var params = {};
	params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
	// This URL returns a JSON-encoded string that represents a JavaScript object
	var url = "http://info.teragrid.org/web-apps/json/ctss-resources-v1/";
	gadgets.io.makeRequest(url, response, params);
	}

	// process the XML response
	function response(obj) {
	var jsondata = obj.data;
	var jsondataInner = obj.data;
	// Process returned JS object as an associative array
	for (var key in jsondata.Resources) {
	var valueOuter = jsondata.Resources[key];
	for(var item in valueOuter) {
	var valueList = new Array();
	valueList.push(valueOuter[item]);
	for(var keyInner in jsondataInner.Resources){
	var valueInner = jsondataInner.Resources[keyInner];
	for(var itemInner in valueInner){
	if(valueOuter[item].OrganizationName == valueInner[itemInner].OrganizationName && valueOuter[item].ResourceID != valueInner[itemInner].ResourceID) {
	valueList.push(valueInner[itemInner]);
	}
	}
	}
	codeAddress(valueList);
	}
	}
	}

	// function to initialize values to the google maps. Latitude and longitude are hard coded for the locations.
	function initialize() {
	geocoder = new google.maps.Geocoder();
	var myLatlng = new google.maps.LatLng(35.50,-90.35);
	var myOptions = {
	zoom: 4,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.HYBRID
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	makeJSONRequest();
	put("Indiana University",new google.maps.LatLng(39.16,-86.53));
	put("Louisiana Optical Network Initiative",new google.maps.LatLng(40.25,-86.55));
	put("National Center for Atmospheric Research",new google.maps.LatLng(40.01,-105.17));
	put("National Center for Supercomputing Applications",new google.maps.LatLng(40.6,-88.12));
	put("University of Tennessee, Knoxville",new google.maps.LatLng(35.57,-83.55));
	put("Oak Ridge National Laboratory",new google.maps.LatLng(36.0,-84.16));
	put("Pittsburgh Supercomputing Center",new google.maps.LatLng(40.26,-79.59));
	put("Purdue University",new google.maps.LatLng(40.3,-86.6));
	put("University of Texas at Austin",new google.maps.LatLng(30.17,-97.45));
	}

	// function to get the INCA status for a particular Resource
	function getStatus(obj){
	var id = obj.id;
	document.getElementById(id).disabled="true";
	var id_array = id.split(";");
	info_global = document.getElementById(id_array[0]);
	var params = {};
	params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
	var url = "http://inca.teragrid.org/inca/XML/kit-status-v1/portal_summary/"+id_array[1];
	gadgets.io.makeRequest(url, statusResponse, params);
	}

	// function to process the response of INCA Status call and insert into the respective tabs
	function statusResponse(obj){
	var domdata = obj.data;
	var itemList = domdata.getElementsByTagName("reportSummary");
	var temp = "<font size=\"2\" face=\"Verdana\"><b>INCA Status: </b>";
	if(itemList.length > 0){
	for(var i=0;i<itemList.length;i++){
	if(itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue !="Success")
	temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: red\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
	else
	temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: LimeGreen\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
	}
	}else{
	temp = temp + "<p>none";
	}
	temp = temp +"</font>";
	var element = document.createElement("div");
	element.innerHTML = temp;
	info_global.appendChild(element);
	}

	// function to create markers and infowindows for each marker
	function codeAddress(valueList){
	var address = valueList[0].OrganizationName
	var marker = new google.maps.Marker({
	map: map,
	position: get(address),
	});
	var contentString = document.createElement("div");
	contentString.id = "tabs";
	var header = document.createElement("ul");
	contentString.appendChild(header);
	var i = 0;
	for(i=0;i<valueList.length;i++)
	{
	var value = valueList[i];
	var temp = document.createElement("li");
	temp.innerHTML = "<a href=\"#tab-"+i+"\"><span><font size=\"2\" face=\"Verdana\"><b>"+value.ResourceID.substring(0,value.ResourceID.indexOf('.'))+"</b></font></span></a>";
	header.appendChild(temp);
	var info = document.createElement("div");
	info.id = "tab-"+i;
	var buttonId = info.id+";"+value.ResourceID;
	info.innerHTML = '<font size="2" face="Verdana"><b>SiteID : </b>' + value.SiteID +
	'<p><b>ResourceID : </b>' + value.ResourceID +
	'<p><b>TgcdbResourceName : </b>' + value.TgcdbResourceName +
	'<p><b>ResourceName : </b>' + value.ResourceName +
	'<p><b>OrganizationName : </b>' + value.OrganizationName +
	'<p><b>PopsName : </b>' + value.PopsName + '</font>' +
	'<p><button type="button" id='+buttonId+' onclick="getStatus(this);"><font size="2" face="Verdana"><b>INCA STATUS</b></font></button>';
	contentString.appendChild(info);
	}
	var infoWindow = new google.maps.InfoWindow({
	content: contentString
	});
	google.maps.event.addListener(marker, 'click', function() {
	infoWindow.open(map,marker);
	$("#tabs").tabs();
	});
	}
	</script>
	</head>
	<body style="margin:0px; padding:0px;" onload="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
	]]>
	</Content>

	<Content type="html" view="default">
	<![CDATA[
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Google Maps JavaScript API v3 Example: Map Simple</title>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript">
	var geocoder;
	var map;
	var info_global;
	keyArray = new Array(); // Keys
	valArray = new Array(); // Values

	// function to insert key and its value in 2 different arrays
	function put( key, val )
	{
	var elementIndex = findIt( key );
	if( elementIndex == (-1) )
	{
	keyArray.push( key );
	valArray.push( val );
	}
	else
	{
	valArray[ elementIndex ] = val;
	}
	}

	// function to get the value based on the key
	function get( key )
	{
	var result = null;
	var elementIndex = findIt( key );
	if( elementIndex != (-1) )
	{
	result = valArray[ elementIndex ];
	}
	return result;
	}

	// find the index on the key
	function findIt( key )
	{
	var result = (-1);
	for( var i = 0; i < keyArray.length; i++ )
	{
	if( keyArray[ i ] == key )
	{
	result = i;
	break;
	}
	}
	return result;
	}

	// function to retrieve the XML file from the REST web service
	function makeJSONRequest() {
	var params = {};
	params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
	// This URL returns a JSON-encoded string that represents a JavaScript object
	var url = "http://info.teragrid.org/web-apps/json/ctss-resources-v1/";
	gadgets.io.makeRequest(url, response, params);
	}

	// process the XML response
	function response(obj) {
	var jsondata = obj.data;
	var jsondataInner = obj.data;
	// Process returned JS object as an associative array
	for (var key in jsondata.Resources) {
	var valueOuter = jsondata.Resources[key];
	for(var item in valueOuter) {
	var valueList = new Array();
	valueList.push(valueOuter[item]);
	for(var keyInner in jsondataInner.Resources){
	var valueInner = jsondataInner.Resources[keyInner];
	for(var itemInner in valueInner){
	if(valueOuter[item].OrganizationName == valueInner[itemInner].OrganizationName && valueOuter[item].ResourceID != valueInner[itemInner].ResourceID) {
	valueList.push(valueInner[itemInner]);
	}
	}
	}
	codeAddress(valueList);
	}
	}
	}

	// function to initialize values to the google maps. Latitude and longitude are hard coded for the locations.
	function initialize() {
	geocoder = new google.maps.Geocoder();
	var myLatlng = new google.maps.LatLng(35.50,-90.35);
	var myOptions = {
	zoom: 4,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.HYBRID
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	makeJSONRequest();
	put("Indiana University",new google.maps.LatLng(39.16,-86.53));
	put("Louisiana Optical Network Initiative",new google.maps.LatLng(40.25,-86.55));
	put("National Center for Atmospheric Research",new google.maps.LatLng(40.01,-105.17));
	put("National Center for Supercomputing Applications",new google.maps.LatLng(40.6,-88.12));
	put("University of Tennessee, Knoxville",new google.maps.LatLng(35.57,-83.55));
	put("Oak Ridge National Laboratory",new google.maps.LatLng(36.0,-84.16));
	put("Pittsburgh Supercomputing Center",new google.maps.LatLng(40.26,-79.59));
	put("Purdue University",new google.maps.LatLng(40.3,-86.6));
	put("University of Texas at Austin",new google.maps.LatLng(30.17,-97.45));
	}

	// function to get the INCA status for a particular Resource
	function getStatus(obj){
	var id = obj.id;
	document.getElementById(id).disabled="true";
	var id_array = id.split(";");
	info_global = document.getElementById(id_array[0]);
	var params = {};
	params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
	var url = "http://inca.teragrid.org/inca/XML/kit-status-v1/portal_summary/"+id_array[1];
	gadgets.io.makeRequest(url, statusResponse, params);
	}

	// function to process the response of INCA Status call and insert into the respective tabs
	function statusResponse(obj){
	var domdata = obj.data;
	var itemList = domdata.getElementsByTagName("reportSummary");
	var temp = "<font size=\"2\" face=\"Verdana\"><b>INCA Status: </b>";
	if(itemList.length > 0){
	for(var i=0;i<itemList.length;i++){
	if(itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue !="Success")
	temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: red\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
	else
	temp = temp + "<p><b>"+itemList.item(i).getElementsByTagName("nickname")[0].childNodes[0].nodeValue+": </b><font style=\"BACKGROUND-COLOR: LimeGreen\">" + itemList.item(i).getElementsByTagName("comparisonResult")[0].childNodes[0].nodeValue + "</font>";
	}
	}else{
	temp = temp + "<p>none";
	}
	temp = temp +"</font>";
	var element = document.createElement("div");
	element.innerHTML = temp;
	info_global.appendChild(element);
	}

	// function to create markers and infowindows for each marker
	function codeAddress(valueList){
	var address = valueList[0].OrganizationName
	var marker = new google.maps.Marker({
	map: map,
	position: get(address),
	});
	var contentString = document.createElement("div");
	contentString.id = "tabs";
	var header = document.createElement("ul");
	contentString.appendChild(header);
	var i = 0;
	for(i=0;i<valueList.length;i++)
	{
	var value = valueList[i];
	var temp = document.createElement("li");
	temp.innerHTML = "<a href=\"#tab-"+i+"\"><span><font size=\"2\" face=\"Verdana\"><b>"+value.ResourceID.substring(0,value.ResourceID.indexOf('.'))+"</b></font></span></a>";
	header.appendChild(temp);
	var info = document.createElement("div");
	info.id = "tab-"+i;
	var buttonId = info.id+";"+value.ResourceID;
	info.innerHTML = '<font size="2" face="Verdana"><b>SiteID : </b>' + value.SiteID +
	'<p><b>ResourceID : </b>' + value.ResourceID +
	'<p><b>TgcdbResourceName : </b>' + value.TgcdbResourceName +
	'<p><b>ResourceName : </b>' + value.ResourceName +
	'<p><b>OrganizationName : </b>' + value.OrganizationName +
	'<p><b>PopsName : </b>' + value.PopsName + '</font>' +
	'<p><button type="button" id='+buttonId+' onclick="getStatus(this);"><font size="2" face="Verdana"><b>INCA STATUS</b></font></button>';
	contentString.appendChild(info);
	}
	var infoWindow = new google.maps.InfoWindow({
	content: contentString
	});
	google.maps.event.addListener(marker, 'click', function() {
	infoWindow.open(map,marker);
	$("#tabs").tabs();
	});
	}
	</script>
	</head>
	<body style="margin:0px; padding:0px;" onload="initialize()">
	<div id="map_canvas" style="width:100%; height:100%"></div>
	</body>
	]]>
	</Content>
	</Module>