<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="USGS Volcano Observatory Activity Reports" 
                description="USGS Volcano Updates"
		author="Scott Haefner and Dina Venezky"
		author_email="dvenezky@usgs.gov"
                author_affiliation="U.S. Geological Survey"
                title_url="USGS Volcano Updates"
		screenshot="http://volcanoes.usgs.gov/images/volcmapplet.png"
		thumbnail="http://volcanoes.usgs.gov/images/tn-volcmapplet.png"
		height="300">
  <Require feature="sharedmap"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<style type="text/css">
h1 {
  font-size: 16px;
  color: #333;
  padding: 0;
  margin: 0 5px;
}
h2 {
  font-size: 14px;
  color: #633;
  padding: 0;
  margin: 1em 5px;
}
p {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #666;
  padding: 0;
  margin: 0 0 0 8px;
}
ol {
  font-size: 12px;
  margin: 1em 1em 1em 2.5em;
  padding: 0;
}
li {
  margin: .4em 0;
  padding: 0;
}
img {
  padding-left: 10px;
}
</style>
<h1>USGS Volcano Updates</h1>
<div id="content">
</div>
<script type="text/javascript">

// Global variables
var map = null;
var volcs = [];
var icons = [];
var markers = [];

var points = {
  width: { // Marker: icon size in pixels
  	'observatory': 21,
    'unassignedunassigned': 18,
    'greennormal': 21,
    'yellowadvisory': 27,
    'orangewatch': 33,
    'orangewarning': 33,
    'redwarning': 40,
    'redwatch': 40
    },
    height: { // Marker: icon height in pixels
    'observatory': 16,
    'unassignedunassigned': 14,
    'greennormal': 16,
    'yellowadvisory': 20,
    'orangewatch': 24,
    'orangewarning': 24,
    'redwarning': 31,
    'redwatch': 31
    }
  };


function initMap() {
  createMap();
  readMarkers();
}


function createMap() {
  var map_center = new GLatLng(20, 170);
  var map_zoom = 2;
  var map_type = G_SATELLITE_MAP; //G_NORMAL_MAP
  map = new GMap2({ logoPassive:true });
  map.setCenter(map_center, map_zoom, map_type);
}


function readMarkers() {

  // Fetch RSS feed
  var feed = "http://volcanoes.usgs.gov/rss/vhpmapplet.xml";
  _IG_FetchXmlContent(feed, function(response) {  
    if (response == null || typeof(response) != "object" || response.firstChild == null) {
      _gel("content").innerHTML = "<i>Invalid data.</i>";
      return;
    }
  
    volcs = response.getElementsByTagName("item");
    
    var pubDate = response.getElementsByTagName("pubDate");
    var feed_pubDate = pubDate.item(0).firstChild.nodeValue;

    //var html = "<p>" + volcs.length + " reports on this map</p>";
    var html = "<p>Updated " + feed_pubDate + "</p>";
    html += '<img src="http://volcanoes.usgs.gov/images/triangles/legend_sm.png" alt="legend" />';
    html += "<h2>10 Most Recent Reports</h2>";
    html += "<ol>";
    
    // Loop through volcano list (<item> nodes)
    for (var i = 0; i < volcs.length; i++) {
  
      // For each volcano, get child nodes
      var item_nodes = volcs.item(i).childNodes;
      
      // Loop through child nodes
      for (var j = 0; j < item_nodes.length ; j++) {
        
        var node = item_nodes.item(j);
                
        if (node.nodeName == "title") {
           var title = node.firstChild.nodeValue;
        }
        if (node.nodeName == "description") {
           var description = node.firstChild.nodeValue;
        }
        if (node.nodeName == "link") {
           var link = node.firstChild.nodeValue; 
        }
        if (node.nodeName == "georss:point") {
           var georss = node.firstChild.nodeValue;
           var coords = georss.split(' ');
           var lat = parseFloat(coords[0]);
           var long = parseFloat(coords[1]);
        }
        if (node.nodeName == "volcano:alertlevel") {
          var alertlevel = node.firstChild.nodeValue.toLowerCase();
        }
        if (node.nodeName == "volcano:colorcode") {
          var colorcode = node.firstChild.nodeValue.toLowerCase();
        }

      }
        
      if (i < 10) { // Show first 10 alerts in left panel
        html += '<li><a href="javascript:showBubble(' + i + ')">' + title + "</a></li>";
      }
      
      var bubble = '<div style=\"width:500px;\"><p><strong>' + title + '</strong><br />' + description + '</p><p><a href="' + link + '" target="_new">More information</a> &raquo;</p></div>';
      var titletip = title;
      var icon = getIcon(alertlevel, colorcode);

      createMarker(lat, long, icon, title, bubble, i);

    }

    html += "</ol>";

    // Display HTML string in <div>
    _gel('content').innerHTML = html;
    
  }); // Allow Google to cache feed for only 5-minutes
}


// Create marker object for volcano overlay

function createMarker(lat, long, icon, titletip, bubble, count) {
  var marker = new GMarker(new GLatLng(lat, long), {icon:icon, title:titletip});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(bubble);
  });
  map.addOverlay(marker);
  markers[count] = marker; // Save for use in sidebar link
}


// Set icon properties based on alertlevel, colorcode

function getIcon(alertlevel, colorcode) {
  var ref = colorcode  + alertlevel;
  if (!icons[ref]) {
    var h_center_pt = parseInt(points.width[ref]/2);
    var v_center_pt = parseInt(points.height[ref]/2);
    var icon = new GIcon();
    icon.image = 'http://volcanoes.usgs.gov/images/triangles/' + ref + '.png';
    icon.iconSize = new GSize(points.width[ref], points.height[ref]);
    icon.iconAnchor = new GPoint(h_center_pt, v_center_pt);
    icon.infoWindowAnchor = new GPoint(h_center_pt, v_center_pt);
    icons[ref] = icon;
  }
  return icons[ref];
}


// Show bubble window when volcano clicked from sidebar

function showBubble(i) {
  GEvent.trigger(markers[i], "click");
}

_IG_RegisterOnloadHandler(initMap);

</script>

]]></Content>
</Module>
