////////////////////////////////////////////////////////////////////////
/*
     FILE: coverage.js
  PURPOSE: To show a clickable image map of the coverage regions.
   AUTHOR: Peter Hollemans
     DATE: 2003/11/22
  CHANGES: n/a

  CoastWatch Web Component
  Copyright 2003, USDOC/NOAA/NESDIS CoastWatch

*/
////////////////////////////////////////////////////////////////////////

/**
 * In order to use this script, the following global variables must be
 * predefined:
 *
 * URL = The base CoastWatch web directory URL.
 * REGIONS = The list of space-seperated CoastWatch regions.
 */

/** The coverage basemap image. */
var baseMap;

/** The array of region map images. */
var regionMaps;

/** The array of region pages. */
var regionPages;

////////////////////////////////////////////////////////////

/** Initializes the coverage map listeners and variables. */
function init () {

  // Create base map image name
  // --------------------------
  baseMap = "images/coverage_" + REGIONS.replace (/ /g, "_") + ".png";

  // Create region image names
  // -------------------------
  var regionArray = REGIONS.split (" ");
  regionMaps = new Array (regionArray.length);
  for (var i = 0; i < regionArray.length; i++)
    regionMaps[i] = "images/coverage_" + regionArray[i] + ".png";

  // Create region page names
  // ------------------------
  regionPages = new Array (regionArray.length);
  for (var i = 0; i < regionArray.length; i++)
    regionPages[i] = "cgi-bin/catalog.cgi?region=" + regionArray[i];

  // Add event listeners to map areas
  // --------------------------------
  for (var i = 0; i < regionArray.length; i++) {
    var area = document.getElementById ("region_" + i);
    xAddEventListener (area, "mouseover", handleMouseOver, false);
    xAddEventListener (area, "mouseout", handleMouseOut, false);
    xAddEventListener (area, "click", handleClick, false);
  } // for

  // Add event listener to image
  // ---------------------------
  var image = document.getElementById ("coverage");
  xAddEventListener (image, "mouseout", handleMouseOut, false);

  // Preload images
  //---------------
  var imageArray = new Array (regionArray.length);
  for (var i = 0; i < regionArray.length; i++) {
    imageArray[i] = new Image();
    imageArray[i].src = URL + "/" + regionMaps[i];
  } // for  

} // init

////////////////////////////////////////////////////////////

/** 
 * Handles a mouseover event by changing the coverage image to a
 * highlighted version of the current region.
 */
function handleMouseOver (event) {

  // Get target index
  // ----------------
  var xevent = new xEvent (event)
  var index = xevent.target.id.replace (/region_/, "");

  // Change image
  // ------------
  var image = document.getElementById ("coverage");
  image.src = URL + "/" + regionMaps[index];

} // handleMouseOver

////////////////////////////////////////////////////////////

/** 
 * Handles a mouseout event by changing the coverage image back
 * to the base map.
 */
function handleMouseOut (event) {

  // Change image back to base
  // -------------------------
  var image = document.getElementById ("coverage");
  image.src = URL + "/" + baseMap;

} // handleMouseOut

////////////////////////////////////////////////////////////

/** 
 * Handles a click event by sending the browser to the location
 * of the current region.
 */
function handleClick (event) {

  // Get target index
  // ----------------
  var xevent = new xEvent (event)
  var index = xevent.target.id.replace (/region_/, "");

  // Send browser to new page
  // ------------------------
  self.location.href = URL + "/" + regionPages[index];

} // handleClick

////////////////////////////////////////////////////////////

// Set to initialize on load
// -------------------------
onload = init;

////////////////////////////////////////////////////////////