// create ship markers based on observations
      function createShipMarker(point,name,vessel,dateTime,html,count)  {
        // create icon symbol
        var icon = new GIcon();
        if (count == 0)  {
          icon.image = "images/star.png";
          icon.iconSize = new GSize(16, 16);
          icon.iconAnchor = new GPoint(10, 10);
          icon.infoWindowAnchor = new GPoint(5, 1);
        }
        else {
          //if (vessel == "430370610")  icon.image = "images/red_icon.png";
          //if (vessel == "493139281")  icon.image = "images/yellow_icon.png";
          //if (vessel == "436900778")  icon.image = "images/green_icon.png";
          //if (vessel == "493171234")  icon.image = "images/blue_icon.png";
          icon.image = "images/red_icon.png";
          icon.iconSize = new GSize(20, 20);
          icon.iconAnchor = new GPoint(10, 10);
          icon.infoWindowAnchor = new GPoint(10, 10);
        }
        var marker = new GMarker(point,{icon:icon,title:name});
        marker.shipID = vessel;
        marker.dateTime = dateTime;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindow(html);
        });
        smarkers.push(marker);
        return marker;
      }
 
      // create ship track 
      function createShipTrack(vessel,points)  {
        // create line color symbol
        //if (vessel == "430370610")  pcolor="#ff0000";
        //if (vessel == "493139281")  pcolor="#ffff00";
        //if (vessel == "436900778")  pcolor="#00ff00";
        //if (vessel == "493171234")  pcolor="#0000ff";
        pcolor = "#ff0000";
        var line = new GPolyline(points,pcolor,2,0.8);
        var bounds = line.getBounds();
        line.shipID = vessel;
        line.bounds = bounds;
        tracks.push(line);
      }

      // create SEA stations markers
      function createStationMarker(point,name,stationTable)  {
        // create icon symbol
        var icon = new GIcon();
        icon.image = "images/triangle_green.png";
        icon.iconSize = new GSize(10, 10);
        icon.iconAnchor = new GPoint(10, 10);
        icon.infoWindowAnchor = new GPoint(5, 1);
        var marker = new GMarker(point,{icon:icon,title:name});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindow(stationTable);
        });
        sea_stations.push(marker);
        return marker;
      }

      // find the ship obs to be plotted
      function findShip()  {
        var selectedShipTrack = document.getElementById("trackLine");
        chkSelectedShipTrack = selectedShipTrack.checked;
        var sidebar_html = "";
        var selectedShip = document.getElementById("ship_name");
        ship_ID = selectedShip.value;
        for (var j=0;j<smarkers.length;j++)  {
          mapPaCOOS.removeOverlay(smarkers[j]);
        }
        for (var j=0;j<tracks.length;j++)  {
          mapPaCOOS.removeOverlay(tracks[j]);
        }
        for (var j=0; j<tracks.length; j++)  {
          if (tracks[j].shipID == ship_ID)  {
            var bounds = tracks[j].bounds;
            mapPaCOOS.setZoom(mapPaCOOS.getBoundsZoomLevel(bounds));
            mapPaCOOS.setCenter(bounds.getCenter());
            if (chkSelectedShipTrack)  {
              mapPaCOOS.addOverlay(tracks[j]);
            }
          }
        }
        count = 0;
        for (var j=0;j<smarkers.length;j++)  {
          if (smarkers[j].shipID == ship_ID)  {
            count++;
          }
        }
        headerFrameText = '<div class="headerFrame">Ship Measurements<br>Total Number of Observations: '+count+'</div>';
        document.getElementById("headerFrame").innerHTML = headerFrameText;
        //sidebar_html += '<div class="smallText">Total number of observations: '+count+'<br></div>';
        for (var j=0;j<smarkers.length;j++)  {
          if (smarkers[j].shipID == ship_ID)  {
            mapPaCOOS.addOverlay(smarkers[j]);
            sidebar_html += '<div class="button2"><a href="javascript:clickObs(' + j +')">'+smarkers[j].dateTime+'</a></div>';
          }
        }
        document.getElementById("sidebar").innerHTML = sidebar_html;
      }

      // handles turning off and on ship track
      function trackLineOnOff()  {
        var selectedShipTrack = document.getElementById("trackLine");
        chkSelectedShipTrack = selectedShipTrack.checked;
        var selectedShip = document.getElementById("ship_name");
        ship_ID = selectedShip.value;
        if (chkSelectedShipTrack)  {
          for (var j=0;j<tracks.length;j++)  {
            if (tracks[j].shipID == ship_ID)  {
              mapPaCOOS.addOverlay(tracks[j]);
            }
          }
        }
        else  {
          for (var j=0;j<tracks.length;j++)  {
            mapPaCOOS.removeOverlay(tracks[j]);
          }
        }
      }

      // handles turning off and on SEA Stations
      function addSEAStationsToMap()  {
        var selectedSeaStations = document.getElementById("SEA");
        chkSelectedSeaStations = selectedSeaStations.checked;
        if (chkSelectedSeaStations)  {
          for (var j=0;j<sea_stations.length;j++)  {
            mapPaCOOS.addOverlay(sea_stations[j]);
          }
        }
        else {
          for (var j=0;j<sea_stations.length;j++)  {
            mapPaCOOS.removeOverlay(sea_stations[j]);
          }
        }
      }

      // handles turning off and on U.S. Rivers
      function addRiversToMap()  {
        var selectedRivers = document.getElementById("rivers");
        chkselectedRivers = selectedRivers.checked;
        if (chkselectedRivers)  {
          serverMap.show();
        }
        else  {
          serverMap.hide();
        }
      }

      // handles turning off and on NMS
      function addNMSToMap()  {
        var selectedNMSLines = document.getElementById("NMS");
        chkselectedNMSLines = selectedNMSLines.checked;
        if (chkselectedNMSLines)  {
          mapPaCOOS.addOverlay(nmsKML);
        }
        else  {
          mapPaCOOS.removeOverlay(nmsKML);
        }
      }


      // handles clicks from sidebar
      function clickObs(k) {
        GEvent.trigger(smarkers[k],"click");
      }

      // function to launch WCO application
      function launchWCO(wco) {
        var Win1 = open(wco,"WCO Portal Window","height=800,width=850,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes");
        Win1.focus();
      }

      // handles resetting the map
      function resetMap()  {
        mapPaCOOS.getInfoWindow().hide();
        for (var j=0;j<smarkers.length;j++)  {
          mapPaCOOS.removeOverlay(smarkers[j]);
        }
        for (var j=0;j<tracks.length;j++)  {
          mapPaCOOS.removeOverlay(tracks[j]);
        }
        mapPaCOOS.setCenter(new GLatLng( 37.230328,-98.525391), 4);
        document.getElementById("sidebar").innerHTML = '';
        document.getElementById("headerFrame").innerHTML = '<div class="headerFrame>Ship Information</div>';
      }

      // sets up status bar
      function updateStatusBar() {
	 var bounds = mapPaCOOS.getBounds();
	 var SW = bounds.getSouthWest();
	 var NE = bounds.getNorthEast();
	 var oCoords = document.getElementById("coords");
	 oCoords.innerHTML = '<b>SW:</b> ' + SW.y.toFixed(6) + ', ' + SW.x.toFixed(6);
	 oCoords.innerHTML += '<br> ';
	 oCoords.innerHTML += '<b>NE:</b> ' + NE.y.toFixed(6) + ', ' + NE.x.toFixed(6);
      }

      // populates status bar with values
      function mouseMove(mousePt) {
	 mouseLatLng = mousePt;
	 var zoom = mapPaCOOS.getZoom();
	 var oStatusDiv = document.getElementById("mouseTrack")	
	 var mousePx = normalProj.fromLatLngToPixel(mousePt, zoom);
	 oStatusDiv.innerHTML = '<b>Mouse LatLng:</b> ' + mousePt.y.toFixed(6) + ', ' + mousePt.x.toFixed(6) ;
	 oStatusDiv.innerHTML += '<br> ';
	 oStatusDiv.innerHTML += '<b>Zoom Level:</b> ' + zoom;
	 oStatusDiv.innerHTML += '<br>';
      }

      // handle movements and send updates to status bar
      function moveEnd() {
        updateStatusBar();
      }

      // updates status bar
      function zoomEnd(oldZ,zoom) {
        var center = mapPaCOOS.getCenter();
        updateStatusBar();
        var zoomLevel = mapPaCOOS.getZoom();
        //if (zoomLevel <= 8)  {
        //  document.getElementById("sidebar").innerHTML = '';
        //}
      }