var urlObsIco    = 'http://fedora.asascience.com/cgi-bin/obs?'
var obsTypes    = ['Waves','Wind','Currents','Air Temperature'];
var obsFriendly = {
   'Waves'           : 'Waves'
  ,'Wind'            : 'Wind'
  ,'Currents'        : 'Currents'
  ,'Air Temperature' : 'AirTemp'
};
var obsImages = {
   'Waves'           : 'wave=0,4,${waveHeight},${waveDirection}&center=1'
  ,'Wind'            : 'wind=0,15,${windSpeed},${windDirection}&center=1'
  ,'Currents'        : 'current=0,2,${currentSpeed},${currentDirection}&center=1'
  ,'Air Temperature' : 'temperature=0,0,${airTemperature},0&center=1'
};

var kmlTypes    = ['Feature Area','Lidar 2004','Lidar 2007'];
var kmlFriendly = {
   'Feature Area' : 'FeatureArea'
  ,'Lidar 2004'   : 'LidarCoverage2004'
  ,'Lidar 2007'   : 'LidarCoverage2007'
};

var styleMap = {
  'Lidar 2004' : new OpenLayers.StyleMap({
    'default' : new OpenLayers.Style({
       fillColor     : "#ffff00"
      ,fillOpacity   : 0.4
      ,strokeColor   : "#ffff00"
      ,strokeWidth   : 1
      ,strokeOpacity : 0.8
    })
  })
  ,'Lidar 2007' : new OpenLayers.StyleMap({
    'default' : new OpenLayers.Style({
       fillColor     : "#00ff00"
      ,fillOpacity   : 0.4
      ,strokeColor   : "#00ff00"
      ,strokeWidth   : 1
      ,strokeOpacity : 0.8
    })
  })
  ,'Feature Area' : new OpenLayers.StyleMap({
    'default' : new OpenLayers.Style({
       fillColor     : "#ffa500"
      ,fillOpacity   : 0.4
      ,strokeColor   : "#ffa500"
      ,strokeWidth   : 1
      ,strokeOpacity : 0.8
    })
  })
};


var centerZoomSimple      = [new OpenLayers.LonLat(55.020,25.187).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")),10];
var centerZoomInteractive = [new OpenLayers.LonLat(55.120,25.087).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")),10];

var graphSize        = [600,400];  // must be in a 3:2 ratio
var obsLeftTDWidth   = '300px';    // set this big enough to keep the latest measurement reading from wrapping
var obsSelectNumRows = 23;         // adjust this to fill the space to match the graph's height
var popupSize        = [375,200];
var obsDivHeight     = '300px';
var imagePath        = "/images/map/";

// global vars for interactive map
var obsLyr = [];
var kmlLyr = [];
var camsLyr,camsPolyLyr;
var codarOlayLyr;
//var bathyOlayLyr;
var map;
var obs    = [];
var obsValSpan;
var popup;
var lyrName2lyrIdx = [];

function initObs(noMarkers) {
  var hideMarkers = ''; 
  if (noMarkers) {
    hideMarkers = '&hideMarkers=1';
  }
  for (var i = 0; i < obsTypes.length; i++) {
    obsLyr.push(new OpenLayers.Layer.Vector(obsTypes[i],{visibility : false,rendererOptions : {zIndexing : true},styleMap : new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
       externalGraphic   : urlObsIco + obsImages[obsTypes[i]] + hideMarkers
      ,graphicWidth      : '${graphicWidth}'
      ,graphicHeight     : '${graphicHeight}'
      ,graphicOpacity    : 0.00001  // stupid IE -- have to fake it out to avoid opaque bg while img loading
      ,graphicZIndex     : '${zIndex}'
    }))}));
  }
}

function initKml() {
  for (var i = 0; i < kmlTypes.length; i++) {
    kmlLyr.push(new OpenLayers.Layer.GML(kmlTypes[i],kmlPath + kmlFriendly[kmlTypes[i]] + '.kml',{
       visibility    : false
      ,format        : OpenLayers.Format.KML
      ,formatOptions : {'extractAttributes' : true}
      ,styleMap      : styleMap[kmlTypes[i]]
      ,projection    : new OpenLayers.Projection("EPSG:4326")
    }));
  }
}

function initCams() {
  camsLyr = new OpenLayers.Layer.Vector('Cameras',{visibility : false,rendererOptions : {zIndexing : true},styleMap : new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
     externalGraphic : imagePath + 'weather_icons/Cameras.png'
    ,graphicWidth    : 26
    ,graphicHeight   : 26
    ,graphicZIndex   : 100
    ,graphicOpacity  : 1
  }))});
  camsPolyLyr = new OpenLayers.Layer.Vector('CamerasPoly',{visibility : false,rendererOptions : {zIndexing : true},styleMap : new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
     fillColor       : "#ff0000"
    ,fillOpacity     : 0.4
    ,strokeColor     : "#ff0000"
    ,strokeWidth     : 1
    ,strokeOpacity   : 0.8
  }))});
}

function initOlays() {
  codarOlayLyr = new OpenLayers.Layer.Image(
     'HF RADAR'
    ,'http://dccodar.s3.amazonaws.com/totals/live/current.jpg'
    ,new OpenLayers.Bounds(55.032406,25.102,55.389462,25.340147).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"))
    ,new OpenLayers.Size(967,800)
    ,{isBaseLayer : false,maxResolution : map.getMaxResolution(),visibility : false}
  );
  /*
  bathyOlayLyr = new OpenLayers.Layer.WMS(
     'Contour 09-10'
    ,'http://asascience.mine.nu:8080/geoserver/gwc/service/wms?'
    ,{layers : 'dubai:shoreline_contours',transparent : true,format : 'image/gif'}
    ,{isBaseLayer : false,visibility : false}
  );
  */
}

function initSimple(o) {
  initObs(true);
  map = new OpenLayers.Map('mapSimple',{
     controls : []
    ,layers   : [
      new OpenLayers.Layer.Google('',{'maxExtent': new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),sphericalMercator : true,type : G_SATELLITE_MAP})
    ]
  });
  for (var j = 0; j < obsLyr.length; j++) {
    map.addLayer(obsLyr[j]);
  }
  map.setCenter(centerZoomSimple[0],centerZoomSimple[1]);
  setupStations();
  setSimpleMapObs(o);
  $('#current_text').html(o);
}

function setSimpleMapObs(o) {
  for (var i = 0; i < map.layers.length; i++) {
    if (!map.layers[i].isBaseLayer) {
      if (obsFriendly[map.layers[i].name] == o) {
        map.layers[i].setVisibility(true);
        if (map.layers[i].styleMap.styles['default'].defaultStyle.graphicOpacity < 1) {
          map.layers[i].styleMap.styles['default'].defaultStyle.graphicOpacity = 1;
          map.layers[i].redraw();
        }
      }
      else {
        map.layers[i].setVisibility(false);
      }
    }
  }
}

function initInteractive() {
  initObs(true);
  initKml();
  initCams();

  var ctlObsSelect = [];
  var ctlObsHilite = [];
  for (var i = 0; i < obsLyr.length; i++) {
    ctlObsSelect.push(new OpenLayers.Control.SelectFeature(obsLyr[i],{
      onSelect : function(feature) {
        if (!$("#data").is(':visible')) {
          $("#data").slideToggle("slow");
          $(".btn-slide").toggleClass("active");
        }

        if (popup) {
          map.removePopup(popup);
        }

        var tsHits = 0;
        for (var i in tsOpts) {
          tsHits++;
        }
        var ts = [];
        for (var i in tsOpts) {
          var radio = document.createElement('input');
          if (navigator.appName == 'Microsoft Internet Explorer') {
            var checked = '';
            if (ts.length == 0) {
              checked = 'checked';
            }
            radio = document.createElement('<input type="radio" name="ts" id="' + i + '" value="' + i + '" ' + checked + '>');
          }
          if (ts.length == 0) {
            radio.defaultChecked = true;
            radio.checked        = true;
          }
          radio.type = 'radio';
          radio.name = 'ts';
          radio.value = i;
          radio.id    = i;
          radio.onclick = function() {
            document.getElementById('graph').src = urlGraphs + this.value + '/sensor_' + document.obsForm.obs.value + '.png';
          };
          var textNode = document.createTextNode(tsOpts[i]);
          var label = document.createElement('label');
          label.htmlFor = radio.id;
          label.appendChild(radio);
          label.appendChild(textNode);
          ts.push(label);
        }

        var select = document.createElement('select');
        select.name = 'obs';
        select.id   = 'obs';
        select.size = obsSelectNumRows;
        var j = 0;
        var obsTxt;
        for (var i in feature.attributes['obs']) {
          select.options[select.options.length] = new Option(i,feature.attributes['obs'][i].filename,j==0,j==0);
          if (feature.attributes['obs'][i].value == "-999999") {
            obs[feature.attributes['obs'][i].sensorid] = "No recent observations";
            obsTxt = document.createTextNode("No recent observations");
          } else {
            obs[feature.attributes['obs'][i].sensorid] = feature.attributes['obs'][i].value + ' ' + feature.attributes['obs'][i].unit + ' at ' + feature.attributes['obs'][i].time;
          }
          if (!obsTxt) {
            obsTxt = document.createTextNode(feature.attributes['obs'][i].value + ' ' + feature.attributes['obs'][i].unit + ' at ' + feature.attributes['obs'][i].time);
          }
          j++;
        }
        select.onchange = function() {
          obsValSpan.removeChild(obsValSpan.firstChild);
          var font = document.createElement('font');
          font.style.fontWeight = 'bold';
          var zid = this.value.split("-")[2];
          var zed = zid.substr(2,zid.length);
          var textNode = document.createTextNode(obs[zed]);
          font.appendChild(textNode);
          obsValSpan.appendChild(font);
          var ts = 'one';
          if (document.obsForm.ts) {
            for (var i = 0; i < document.obsForm.ts.length; i++) {
              if (document.obsForm.ts[i].checked) {
                ts = document.obsForm.ts[i].value;
              }
            }
            document.getElementById('graph').src = urlGraphs + ts + '/sensor_' + document.obsForm.obs.value + '.png'; 
          }
        }

        var tbody = document.getElementById('data').getElementsByTagName('tbody')[0];
        while (tbody.hasChildNodes()) {
          tbody.removeChild(tbody.firstChild);
        }
        var tr = document.createElement('tr');
          var td = document.createElement('td');
            td.style.textAlign = 'center';
            td.colSpan = 2;
            var font = document.createElement('font');
            font.style.fontWeight = 'bold';
            font.style.fontSize = 'large';
            var a  = document.createElement('a');
            a.href = urlStations + feature.attributes['code'];
            a.target = '_blank';
            a.innerHTML = feature.attributes['name'];
            font.appendChild(a);
            td.appendChild(font);
            
            // Lat/Lons
            if (showStationLonLat) {
              td.appendChild(document.createElement('br'));
              var span = document.createElement('span');
              span.innerHTML = 'Longitude: ' + feature.attributes['lon'] + ' Latitude : ' + feature.attributes['lat'];
              td.appendChild(span);
            }
            
            
            td.appendChild(document.createElement('br'));
            td.appendChild(document.createElement('br'));
          tr.appendChild(td);
        tbody.appendChild(tr);
        var tr = document.createElement('tr');
          if (select.options.length > 0) {
            var td = document.createElement('td');
              td.style.verticalAlign = 'top';
              td.style.textAlign = 'center';
              td.style.width = obsLeftTDWidth;
              var font = document.createElement('font');
              font.style.fontWeight = 'bold';
              font.style.fontSize = 'medium';
              font.appendChild(document.createTextNode('Available sensors'));
              td.appendChild(font);
              td.appendChild(document.createElement('br'));
              td.appendChild(select);
            tr.appendChild(td);
          }
          var td = document.createElement('td');
            td.style.width = graphSize[0] + 'px';
            td.style.height = graphSize[1] + 'px';
            td.style.verticalAlign = 'top';
            td.style.textAlign = 'center';
            if (tsHits > 0) {
              var img = document.createElement('img');
              img.id = 'graph';
              if (select.options.length > 0) {
                img.src = urlGraphs + 'one/sensor_' + select.options[0].value + '.png';
              }
              else {
                img.src = imagePath + 'no_data.png';
              }
              img.width  = graphSize[0];
              img.height = graphSize[1];
              td.appendChild(img);
            }
            else {
              td.style.verticalAlign = 'middle';
              var font = document.createElement('font');
              font.style.fontWeight = 'bold';
              font.style.fontSize = 'medium';
              var a = document.createElement('a');
              a.href = '/' + locale_string + '/login';
              a.innerHTML = 'Login';
              font.appendChild(a);
              td.appendChild(font);
              var font = document.createElement('font');
              font.style.fontWeight = 'bold';
              font.style.fontSize = 'medium';
              font.appendChild(document.createTextNode(' or '));
              td.appendChild(font);
              var font = document.createElement('font');
              font.style.fontWeight = 'bold';
              font.style.fontSize = 'medium';
              var a = document.createElement('a');
              a.href = '/' + locale_string + '/signup';
              a.target = '_blank';
              a.innerHTML = 'register';
              font.appendChild(a);
              td.appendChild(font);
              var font = document.createElement('font');
              font.style.fontWeight = 'bold';
              font.style.fontSize = 'medium';
              font.appendChild(document.createTextNode(' to view time series graphs.'));
              td.appendChild(font);
            }
          tr.appendChild(td);
        tbody.appendChild(tr);
        var tr = document.createElement('tr');
          var td = document.createElement('td');
            td.style.verticalAlign = 'bottom';
            td.style.textAlign = 'center';
            if (select.options.length > 0) {
              var font = document.createElement('font');
              font.style.fontWeight = 'bold';
              font.style.fontSize = 'medium';
              font.appendChild(document.createTextNode('Latest measurement'));
              td.appendChild(font);
              td.appendChild(document.createElement('br'));
              obsValSpan = document.createElement('span');
              obsValSpan.id = 'obsValSpan';
              var font = document.createElement('font');
              font.style.fontWeight = 'bold';
              font.appendChild(obsTxt);
              obsValSpan.appendChild(font);
              td.appendChild(obsValSpan);
              td.appendChild(document.createElement('br'));
            }
          tr.appendChild(td);
          var td = document.createElement('td');
            td.style.verticalAlign = 'bottom';
            td.style.textAlign = 'right';
            if (select.options.length > 0) {
              for (var j = 0; j < ts.length; j++) {
                if (ts.length == 1) {
                  ts[j].style.visibility = 'hidden';
                }
                td.appendChild(ts[j]);
              }
            }
          tr.appendChild(td);
        tbody.appendChild(tr);
      }
      ,onUnselect : function (feature) {
        var tbody = document.getElementById('data').getElementsByTagName('tbody')[0];
        while (tbody.hasChildNodes()) {
          tbody.removeChild(tbody.firstChild);
        }
      }
    }));
    
    ctlObsHilite.push(new OpenLayers.Control.SelectFeature(obsLyr[i],{
       hover          : true
      ,highlightOnly  : true
      ,eventListeners : {
        featurehighlighted : function(e) {
          if (popup) {
            map.removePopup(popup);
          }

          popup = new OpenLayers.Popup.AnchoredBubble(
             ''
            ,e.feature.geometry.getBounds().getCenterLonLat()
            ,new OpenLayers.Size(popupSize[0],popupSize[1])
            ,'<div class="obsPopup"><table><tr><td style="vertical-align:top"><table>' + '<tr><td style="text-align:center" colspan=3><b>' + e.feature.attributes['name'] + '</b></td></tr>' + e.feature.attributes['obsPopup'] + '<tr><td colspan=3>&nbsp;</td></tr>' + '<tr><td style="text-align:center" colspan=3>Click the icon on the map for graphs and additional sensors.</td></tr>' + '</table></td><td>&nbsp;</td><td style="vertical-align:top"><table>' + '<tr><td style="text-align:center" colspan=3><img height=168 src="' + e.feature.attributes['image_link'] + '" /></td></tr>' + '</td></tr>' + '</table></td></tr></table></div>'
            ,{'size' : new OpenLayers.Size(25,25),'offset' : new OpenLayers.Pixel(0,0)}
            ,true
            ,function(evt) {
              map.removePopup(popup);
            }
          );
          e.feature.popup = popup;
          map.addPopup(popup);
        }
        ,featureunhighlighted : function(e) {
          map.removePopup(popup);
        }
      }
    }));
  }

  ctlObsSelect.push(new OpenLayers.Control.SelectFeature(camsLyr,{
    onSelect : function(feature) {
      window.open(feature.attributes['full']);
    }
  }));

  ctlObsHilite.push(new OpenLayers.Control.SelectFeature(camsLyr,{
     hover          : true
    ,highlightOnly  : true
    ,eventListeners : {
      featurehighlighted : function(e) {
        if (popup) {
          map.removePopup(popup);
        }

        popup = new OpenLayers.Popup.AnchoredBubble(
           ''
          ,e.feature.geometry.getBounds().getCenterLonLat()
          ,new OpenLayers.Size(popupSize[0],popupSize[1])
          ,'<div class="obsPopup"><table><tr><td style="vertical-align:top"><table>' + '<tr><td style="text-align:center"><b>' + e.feature.attributes['name'] + '</b></td></tr>' + '<tr><td align=center><img width=160 src="' + e.feature.attributes['thumb'] + '" /></td></tr>' + '<tr><td style="text-align:center">Click the icon on the map to view a larger image.</td></tr>' + '</table></td></tr></table></div>'
          ,{'size' : new OpenLayers.Size(25,25),'offset' : new OpenLayers.Pixel(0,0)}
          ,true
          ,function(evt) {
            map.removePopup(popup);
          }
        );
        e.feature.popup = popup;
        map.addPopup(popup);
      }
      ,featureunhighlighted : function(e) {
        map.removePopup(popup);
      }
    }
  }));

  map = new OpenLayers.Map('mapInteractive',{
     projection       : new OpenLayers.Projection('EPSG:900913')
    ,units            : 'm'
    ,maxResolution    : 156543.0339
    ,maxExtent        : new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
    ,controls         : [new OpenLayers.Control.Navigation(),new OpenLayers.Control.PanZoom()]
    ,layers           : [new OpenLayers.Layer.Google('',{'maxExtent': new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),sphericalMercator : true,type : G_SATELLITE_MAP})]
  });
  map.setCenter(centerZoomInteractive[0],centerZoomInteractive[1]);
  
  map.setOptions({
    restrictedExtent : map.getExtent()
    ,maxExtent : map.getExtent()
  });

  initOlays();

  for (var i = 0; i < ctlObsSelect.length; i++) {
    map.addControl(ctlObsHilite[i]);
    map.addControl(ctlObsSelect[i]);
  }

  OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,{
    defaultHandlerOptions: {
       'single'        : true
      ,'double'        : true
      ,'pixelTolerance': 0
      ,'stopSingle'    : false
      ,'stopDouble'    : false
    }
    ,initialize: function(options) {
      this.handlerOptions = OpenLayers.Util.extend(
        {}, this.defaultHandlerOptions
      );
      OpenLayers.Control.prototype.initialize.apply(
        this, arguments
      ); 
      this.handler = new OpenLayers.Handler.Click(
        this, {
           'click'    : this.trigger
          ,'dblclick' : this.trigger
        }, this.handlerOptions
      );
    }
    ,trigger: function(e) {
      if ($("#data").is(':visible')) {
        $("#data").slideToggle("slow");
        $(".btn-slide").toggleClass("active");
      }
    }
  });

  var ctlClick = new OpenLayers.Control.Click();
  map.addControl(ctlClick);
  ctlClick.activate();

  addLayers();

  var tbody = document.getElementById('mapSwitcher').getElementsByTagName('tbody')[0];
  var tr       = document.createElement('tr');
  for (var i = 0; i < obsTypes.length; i++) {
    var lyrIdx    = lyrName2lyrIdx[obsLyr[i].name];
    var td        = document.createElement('td');
    var radio     = document.createElement('input');
    if (navigator.appName == 'Microsoft Internet Explorer') {
      var checked = '';
      if (i == 0) {
        checked = 'checked';
      }
      radio = document.createElement('<input type="radio" name="lyr" id="radio.' + lyrIdx + ' ' + checked + '>');
    }
    radio.name    = 'lyr';
    radio.id      = 'radio.' + lyrIdx;
    radio.type    = 'radio';
    radio.onclick = function() {
      map.layers[this.id.split('.')[1]].setVisibility(this.checked);
      displayObs(this.id.split('.')[1]);
    };
    if (i == 0) {
      //radio.checked = true;
      //radio.defaultChecked = true;
    }
    td.appendChild(radio);
    tr.appendChild(td);
    var td       = document.createElement('td');
    var a        = document.createElement('a');
    a.href       = "javascript:switcherToggle('radio'," + lyrIdx + ")";
    var img      = document.createElement('img');
    img.src      = imagePath + 'weather_icons/' + obsFriendly[obsLyr[i].name] + '.png';
    a.appendChild(img);
    td.appendChild(a);
    tr.appendChild(td);
    var td       = document.createElement('td');
    td.setAttribute('class','switcher');
    var a        = document.createElement('a');
    a.href       = "javascript:switcherToggle('radio'," + lyrIdx + ")";
    a.innerHTML  = obsLyr[i].name;
    td.appendChild(a);
    tr.appendChild(td);
    var td       = document.createElement('td');
    td.innerHTML = '&nbsp;&nbsp;&nbsp;';
    tr.appendChild(td);
  }
  var lyrIdx   = lyrName2lyrIdx[camsLyr.name];
  var td       = document.createElement('td');
  var radio     = document.createElement('input');
  if (navigator.appName == 'Microsoft Internet Explorer') {
    var checked = '';
    if (i == 0) {
      checked = 'checked';
    }
    radio = document.createElement('<input type="radio" name="lyr" id="radio.' + lyrIdx + '>');
  }
  radio.name    = 'lyr';
  radio.id      = 'pair.' + lyrIdx;
  radio.type    = 'radio';
  radio.onclick = function() {
    map.layers[this.id.split('.')[1]-1].setVisibility(this.checked);
    map.layers[this.id.split('.')[1]].setVisibility(this.checked);
    displayObs(this.id.split('.')[1],this.id.split('.')[1]-1);
  };
  td.appendChild(radio);
  tr.appendChild(td);
  var td       = document.createElement('td');
  var a        = document.createElement('a');
  a.href       = "javascript:switcherToggle('pair'," + lyrIdx + ")";
  var img      = document.createElement('img');
  img.src      = imagePath + 'weather_icons/Cameras.png';
  a.appendChild(img);
  td.appendChild(a);
  tr.appendChild(td);
  var td       = document.createElement('td');
  td.setAttribute('class','switcher');
  var a        = document.createElement('a');
  a.href       = "javascript:switcherToggle('pair'," + lyrIdx + ")";
  a.innerHTML  = 'Cameras';
  td.appendChild(a);
  tr.appendChild(td);
  var td       = document.createElement('td');
  td.innerHTML = '&nbsp;&nbsp;&nbsp;';
  tr.appendChild(td);
  tbody.appendChild(tr);

  for (var i = 0; i < ctlObsSelect.length; i++) {
    ctlObsHilite[i].activate();
    ctlObsSelect[i].activate();
  }

  for (var i = 0; i < map.layers.length; i++) {
    if (map.layers[i].name == obsTypes[0]) {
      //map.layers[i].setVisibility(true);
      //displayObs(i);
    }
  }

  var tr       = document.createElement('tr');
  var lyrIdx    = lyrName2lyrIdx[codarOlayLyr.name];
  var td        = document.createElement('td');
  var cbox     = document.createElement('input');
  cbox.id      = 'cbox.' + lyrIdx;
  cbox.type    = 'checkbox';
  cbox.onclick = function() {
    map.layers[this.id.split('.')[1]].setVisibility(this.checked);
  };
  td.appendChild(cbox);
  tr.appendChild(td);
  var td       = document.createElement('td');
  var a        = document.createElement('a');
  a.href       = "javascript:switcherToggle('cbox'," + lyrIdx + ")";
  var img      = document.createElement('img');
  img.src      = imagePath + 'weather_icons/CODAR.png';
  a.appendChild(img);
  td.appendChild(a);
  tr.appendChild(td);
  var td       = document.createElement('td');
  td.setAttribute('class','switcher');
  var a        = document.createElement('a');
  a.href       = "javascript:switcherToggle('cbox'," + lyrIdx + ")";
  a.innerHTML  = codarOlayLyr.name;
  td.appendChild(a);
  tr.appendChild(td);
  var td       = document.createElement('td');
  td.innerHTML = '&nbsp;&nbsp;&nbsp;';
  tr.appendChild(td);
  for (var i = 0; i < kmlTypes.length; i++) {
    var lyrIdx    = lyrName2lyrIdx[kmlLyr[i].name];
    var td        = document.createElement('td');
    var cbox     = document.createElement('input');
    cbox.id      = 'cbox.' + lyrIdx;
    cbox.type    = 'checkbox';
    cbox.onclick = function() {
      map.layers[this.id.split('.')[1]].setVisibility(this.checked);
    };
    td.appendChild(cbox);
    tr.appendChild(td);
    var td       = document.createElement('td');
    var a        = document.createElement('a');
    a.href       = "javascript:switcherToggle('cbox'," + lyrIdx + ")";
    var img      = document.createElement('img');
    img.src      = imagePath + 'weather_icons/' + kmlFriendly[kmlLyr[i].name] + '.png';
    a.appendChild(img);
    td.appendChild(a);
    tr.appendChild(td);
    var td       = document.createElement('td');
    td.setAttribute('class','switcher');
    var a        = document.createElement('a');
    a.href       = "javascript:switcherToggle('cbox'," + lyrIdx + ")";
    a.innerHTML  = kmlLyr[i].name;
    td.appendChild(a);
    tr.appendChild(td);
    var td       = document.createElement('td');
    td.innerHTML = '&nbsp;&nbsp;&nbsp;';
    tr.appendChild(td);
  }

  /*
  var lyrIdx    = lyrName2lyrIdx[bathyOlayLyr.name];
  var td        = document.createElement('td');
  var cbox     = document.createElement('input');
  cbox.id      = 'cbox.' + lyrIdx;
  cbox.type    = 'checkbox';
  cbox.onclick = function() {
    map.layers[this.id.split('.')[1]].setVisibility(this.checked);
    if (this.checked) {
      document.getElementById('bathyLegend').style.visibility = 'visible';
    }
    else {
      document.getElementById('bathyLegend').style.visibility = 'hidden';
    }
  };
  td.appendChild(cbox);
  tr.appendChild(td);
  var td       = document.createElement('td');
  var a        = document.createElement('a');
  a.href       = "javascript:switcherToggle('cbox'," + lyrIdx + ",'bathyLegend')";
  var img      = document.createElement('img');
  img.src      = imagePath + 'weather_icons/CODAR.png';
  a.appendChild(img);
  td.appendChild(a);
  tr.appendChild(td);
  var td       = document.createElement('td');
  td.setAttribute('class','switcher');
  var a        = document.createElement('a');
  a.href       = "javascript:switcherToggle('cbox'," + lyrIdx + ",'bathyLegend')";
  a.innerHTML  = bathyOlayLyr.name;
  td.appendChild(a);
  tr.appendChild(td);
  var td       = document.createElement('td');
  td.innerHTML = '&nbsp;&nbsp;&nbsp;';
  tr.appendChild(td);
  */
  tbody.appendChild(tr);
  
  setupStations();
  setupCams();
  
  // This decides what layer is active... pull this from URL variable through
  // the controller and set a JS variable in the layout/view.
  if (showLayer != "" && showLayer != "Cameras") {
    startupLayers([showLayer]);
  }
}

function setupStations() {
  OpenLayers.ProxyHost = proxyLoc;
  var request = OpenLayers.Request.GET({
     url      : urlXmlObs
    ,callback : function(req) {
      var sXml = req.responseXML.getElementsByTagName('station');
      for (var i = 0; i < sXml.length; i++) {
        var name,code,latitude,longitude; 
        var obs = [];
        for (var j = 0; j < sXml[i].childNodes.length; j++) {
          if (sXml[i].childNodes[j].tagName == 'name') {
            name = OpenLayers.Util.getXmlNodeValue(sXml[i].childNodes[j]);
          }
          if (sXml[i].childNodes[j].tagName == 'code') {
            code = OpenLayers.Util.getXmlNodeValue(sXml[i].childNodes[j]);
          }
          else if (sXml[i].childNodes[j].tagName == 'latitude') {
            latitude = OpenLayers.Util.getXmlNodeValue(sXml[i].childNodes[j]);
          }
          else if (sXml[i].childNodes[j].tagName == 'longitude') {
            longitude = OpenLayers.Util.getXmlNodeValue(sXml[i].childNodes[j]);
          }
          else if (sXml[i].childNodes[j].tagName == 'small_image') {
            image_link = OpenLayers.Util.getXmlNodeValue(sXml[i].childNodes[j]);
          }
          else if (sXml[i].childNodes[j].tagName == 'observations') {
            for (var k = 0; k < sXml[i].childNodes[j].childNodes.length; k++) {
              var ob = [];
              for (var l = 0; l < sXml[i].childNodes[j].childNodes[k].childNodes.length; l++) {
                ob[sXml[i].childNodes[j].childNodes[k].childNodes[l].tagName] = OpenLayers.Util.getXmlNodeValue(sXml[i].childNodes[j].childNodes[k].childNodes[l]);
                if (sXml[i].childNodes[j].childNodes[k].childNodes[l].tagName == 'value') {
                  var p = sXml[i].childNodes[j].childNodes[k].childNodes[l].getAttribute('time').split(' ');
                  var d = {
                     'ymd' : p[0].split('-')
                    ,'hms' : p[1].split(':')
                    ,'tz'  : p[2]
                  };
                  var dt = new Date(d.ymd[0],d.ymd[1] - 1,d.ymd[2],d.hms[0] - 1,d.hms[1]);
                  ob['time'] = dt.getFullYear() + '-' + leftPad(String(dt.getMonth() + 1)) + '-' + leftPad(String(dt.getDate())) + ' ' + leftPad(String(dt.getHours() + 1)) + ':' + leftPad(String(dt.getMinutes())) + ' ' + d.tz;
                }
                if (sXml[i].childNodes[j].childNodes[k].childNodes[l].tagName == 'variable') {
                  ob['unit'] = sXml[i].childNodes[j].childNodes[k].childNodes[l].getAttribute('unit');
                }
              }
              if (ob['variable'] && ob['sensorid'] && ob['value'] && !obs[ob['variable']]) {
                obs[ob['variable']] = {
                   'sensorid' : ob['sensorid']
                  ,'value'    : ob['value']
                  ,'unit'     : ob['unit']
                  ,'time'     : ob['time']
                  ,'filename' : ob['filename']
                }
              }
            }
          }
        }
        if (name && code && latitude && longitude) {
          var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(longitude,latitude).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")));
          feature.attributes.name = name;
          feature.attributes.image_link = image_link;
          feature.attributes.code = code;
          feature.attributes.obs  = obs;
          feature.attributes.lon  = longitude;
          feature.attributes.lat  = latitude;

          if (obs['Wave Height'] && obs['Wave Direction']) {
            feature.attributes.waveHeight    = obs['Wave Height'].value;
            feature.attributes.waveDirection = obs['Wave Direction'].value;
          }
          if (obs['Current Speed'] && obs['Current Direction']) {
            feature.attributes.currentSpeed     = obs['Current Speed'].value;
            feature.attributes.currentDirection = obs['Current Direction'].value;
          }
          if (obs['Wind Speed'] && obs['Wind Direction']) {
            feature.attributes.windSpeed     = obs['Wind Speed'].value;
            feature.attributes.windDirection = obs['Wind Direction'].value;
          }
          if (obs['Air Temperature']) {
            feature.attributes.airTemperature = obs['Air Temperature'].value;
          }
          for (var j = 0; j < obsLyr.length; j++) {
            if ((obsLyr[j].name == 'Wind' && obs['Wind Speed'] && obs['Wind Direction'])
              || (obsLyr[j].name == 'Waves' && obs['Wave Height'] && obs['Wave Direction'])
              || (obsLyr[j].name == 'Currents' && obs['Current Speed'] && obs['Current Direction'])
              || (obsLyr[j].name == 'Air Temperature' && obs['Air Temperature'])
            ) {
              feature.attributes.obsPopup = '';
              if (obsLyr[j].name == 'Wind' && obs['Wind Speed'].value != -999999) {
                feature.attributes.obsPopup = '<tr><td style="text-align:center" colspan=3>' + obs['Wind Speed'].time + '</td></tr>' + '<tr><td colspan=3>&nbsp;</td></tr>' + '<tr><td>Wind speed</td><td>&nbsp;&nbsp;&nbsp;</td><td style="text-align:right">' + obs['Wind Speed'].value + ' ' + obs['Wind Speed'].unit + '</td><tr><td>' + 'Wind direction</td><td>&nbsp;&nbsp;&nbsp;</td><td style="text-align:right">' + obs['Wind Direction'].value + ' ' + obs['Wind Direction'].unit + '</td></tr>';
              }
              else if (obsLyr[j].name == 'Waves' && obs['Wave Height'].value != -999999) {
                feature.attributes.obsPopup = '<tr><td style="text-align:center" colspan=3>' + obs['Wave Height'].time + '</td></tr>' + '<tr><td colspan=3>&nbsp;</td></tr>' + '<tr><td>Wave height</td><td>&nbsp;&nbsp;&nbsp;</td><td style="text-align:right">' + obs['Wave Height'].value + ' ' + obs['Wave Height'].unit + '</td><tr><td>' + 'Wave direction</td><td>&nbsp;&nbsp;&nbsp;</td><td style="text-align:right">' + obs['Wave Direction'].value + ' ' + obs['Wave Direction'].unit + '</td></tr>';
              }
              else if (obsLyr[j].name == 'Currents' && obs['Current Speed'].value != -999999) {
                feature.attributes.obsPopup = '<tr><td style="text-align:center" colspan=3>' + obs['Current Speed'].time + '</td></tr>' + '<tr><td colspan=3>&nbsp;</td></tr>' + '<tr><td>Current speed</td><td>&nbsp;&nbsp;&nbsp;</td><td style="text-align:right">' + obs['Current Speed'].value + ' ' + obs['Current Speed'].unit + '</td><tr><td>' + 'Current direction</td><td>&nbsp;&nbsp;&nbsp;</td><td style="text-align:right">' + obs['Current Direction'].value + ' ' + obs['Current Direction'].unit + '</td></tr>';
              }
              else if (obsLyr[j].name == 'Air Temperature' && obs['Air Temperature'].value != -999999) {
                feature.attributes.obsPopup = '<tr><td style="text-align:center" colspan=3>' + obs['Air Temperature'].time + '</td></tr>' + '<tr><td colspan=3>&nbsp;</td></tr>' + '<tr><td>Air temperature</td><td>&nbsp;&nbsp;&nbsp;</td><td style="text-align:right">' + obs['Air Temperature'].value + ' ' + obs['Air Temperature'].unit + '</td></tr>';
              }
              feature.attributes.graphicWidth  = 74;
              feature.attributes.graphicHeight = 75;
              feature.attributes.zIndex        = 1;
              obsLyr[j].addFeatures(feature.clone());
            }
            else {
              feature.attributes.graphicWidth  = 28;
              feature.attributes.graphicHeight = 28;
              feature.attributes.zIndex        = 0;
              feature.attributes.obsPopup      = '';
              obsLyr[j].addFeatures(feature.clone());
            }
          }
        }
      }
    }
  });
}

function setupCams() {
  OpenLayers.ProxyHost = proxyLoc;
  var request = OpenLayers.Request.GET({
     url      : urlXmlCams
    ,callback : function(req) {
      var cam = req.responseXML.getElementsByTagName('record');
      for (var i = 0; i < cam.length; i++) {
        var name,lon,lat,full,thumb;
        var pt = [];
        for (var j = 0; j < cam[i].childNodes.length; j++) {
          if (cam[i].childNodes[j].tagName == 'name') {
            name = OpenLayers.Util.getXmlNodeValue(cam[i].childNodes[j]);
          }
          else if (cam[i].childNodes[j].tagName == 'longitude') {
            lon = OpenLayers.Util.getXmlNodeValue(cam[i].childNodes[j]);
          }
          else if (cam[i].childNodes[j].tagName == 'latitude') {
            lat = OpenLayers.Util.getXmlNodeValue(cam[i].childNodes[j]);
          }
          else if (cam[i].childNodes[j].tagName == 'full') {
            full = OpenLayers.Util.getXmlNodeValue(cam[i].childNodes[j]);
          }
          else if (cam[i].childNodes[j].tagName == 'thumb') {
            thumb = OpenLayers.Util.getXmlNodeValue(cam[i].childNodes[j]);
          }
          else if (cam[i].childNodes[j].tagName == 'points') {
            var p = [];
            for (var k = 0; k < cam[i].childNodes[j].childNodes.length; k++) {
              for (var l = 0; l < cam[i].childNodes[j].childNodes[k].childNodes.length; l++) {
                // pull back lon,lat that might define a camera area
                p[cam[i].childNodes[j].childNodes[k].childNodes[l].tagName] = OpenLayers.Util.getXmlNodeValue(cam[i].childNodes[j].childNodes[k].childNodes[l]);
              }
              if (p['longitude'] && p['latitude']) {
                pt.push(new OpenLayers.Geometry.Point(p['longitude'],p['latitude']));
              }
            }
          }
        }
        pt.push(new OpenLayers.Geometry.Point(lon,lat));
        var f = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lon,lat).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")));
        f.attributes.name = name;
        f.attributes.full = full;
        f.attributes.thumb = thumb;
        if (pt.length > 1) {
          var fPoly = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LinearRing(pt).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")));
          fPoly.attributes.name = name;
          fPoly.attributes.full = full;
          fPoly.attributes.thumb = thumb;
          camsPolyLyr.addFeatures(fPoly);
        }
        camsLyr.addFeatures(f);
      }
      if (showLayer == "Cameras") {
        startupLayers(["Cameras"]);
      }
    }
  });

}

function displayObs(idx,pairIdx) {
  // clear everything
  for (var i = 0; i < map.layers.length; i++) {
    if (!map.layers[i].isBaseLayer && !map.layers[i].format && map.layers[i].visibility && map.layers[i].name !== 'HF RADAR' && map.layers[i].name !== 'Contour 09-10' && i != idx && i != pairIdx) {
      map.layers[i].setVisibility(false);
    }
  }
  if (map.layers[idx].styleMap && map.layers[idx].styleMap.styles['default'].defaultStyle.graphicOpacity < 1) {
    map.layers[idx].styleMap.styles['default'].defaultStyle.graphicOpacity = 1;
    map.layers[idx].redraw();
  }
}

function sensorId(s) {
  var p = s.split('sensor_');
  return p[1].substring(0,p[1].indexOf('.png'));
}

function leftPad(i) {
  if (i.length == 1) {
    return '0' + i;
  }
  return i;
}

function switcherToggle(input,i,legend) {
  document.getElementById(input + '.' + i).checked = !document.getElementById(input + '.' + i).checked;
  map.layers[i].setVisibility(document.getElementById(input + '.' + i).checked);
  if (input == 'pair') {
    map.layers[i-1].setVisibility(document.getElementById(input + '.' + i).checked);
    displayObs(i,i-1);
  }
  else if (input == 'radio') {
    displayObs(i);
  }
  if (document.getElementById(legend)) {
    if (document.getElementById(input + '.' + i).checked) {
      document.getElementById(legend).style.visibility = 'visible';
    }
    else {
      document.getElementById(legend).style.visibility = 'hidden';
    }
  }
  if ($("#data").is(':visible')) {
    $("#data").slideToggle("slow");
    $(".btn-slide").toggleClass("active");
  }
}

function addLayers() {
  map.addLayer(codarOlayLyr);
  lyrName2lyrIdx[codarOlayLyr.name] = map.layers.length - 1;

  for (var i = 0; i < obsTypes.length; i++) {
    map.addLayer(obsLyr[i]);
    lyrName2lyrIdx[obsLyr[i].name] = map.layers.length - 1;
  }

  for (var i = 0; i < kmlTypes.length; i++) {
    map.addLayer(kmlLyr[i]);
    lyrName2lyrIdx[kmlLyr[i].name] = map.layers.length - 1;
  }

  //map.addLayer(bathyOlayLyr);
  //lyrName2lyrIdx[bathyOlayLyr.name] = map.layers.length - 1;

  map.addLayer(camsPolyLyr);
  lyrName2lyrIdx[camsPolyLyr.name] = map.layers.length - 1;
  map.addLayer(camsLyr);
  lyrName2lyrIdx[camsLyr.name] = map.layers.length - 1;
}

function startupLayers(l) {
  // usage:  startupLayers(['Waves','HF Radar','Contour 09-10'])
  // only one obs can be displayed at a time, so if you have 'Wind','Waves', only 'Waves' will appear
  for (var i = 0; i < l.length; i++) {
    var inputType = 'cbox';
    for (var j = 0; j < obsTypes.length; j++) {
      if (obsTypes[j] == l[i]) {
        inputType = 'radio';
      }
    }
    // special case for Cameras
    if (l[i] == 'Cameras') {
      inputType = 'pair';
    }
    // special case for Contour 09-10
    var legend;
    if (l[i] == 'Contour 09-10') {
      legend = 'bathyLegend';
    }
    switcherToggle(inputType,lyrName2lyrIdx[l[i]],legend);
  }
}

if ($(document).ready) {
  $(document).ready(function(){
    $(".btn-slide").click(function() {
      if (!document.getElementById('data').getElementsByTagName('tbody')[0].hasChildNodes()) {
        alert('Please click on a platform first.');
      }
      else {
        $("#data").slideToggle("slow");
        $(this).toggleClass("active");
        return false;
      }
    });
  });
}