var map;
var lastMarker;

// Set up default values for city field
function cityField() {
  var cityField = $('city');
  cityField.setProperty('value', 'Enter a North Dakota city...');
  cityField.setStyle('color', '#7f7f7f');
  cityField.addEvent('focus', function() {
    if (this.value == 'Enter a North Dakota city...') {
      this.setProperty('value', '');
      this.setStyle('color', '#000');
    }
  });
  cityField.addEvent('blur', function() {
    if (this.value == '') {
      this.setProperty('value', 'Enter a North Dakota city...');
      this.setStyle('color', '#999');
    }
  });
}

function regionMap() {
  map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(47.48, -100.28), 7);
  map.disableDoubleClickZoom();

  red     = '#ff0000';
  green   = '#00bd00';
  yellow  = '#ff7f00';
  blue    = '#0000ff';
  magenta = '#a400a4';
  cyan    = '#00bdff';

  // Draw polygons for each region
  loadRegion('northwest', red);
  loadRegion('southwest', blue);
  loadRegion('west_central', green);
  loadRegion('northeast', cyan);
  loadRegion('southeast', yellow);
  loadRegion('east_central', magenta);
}

function loadRegion(region, color) {
  var xmlHttpObj = GXmlHttp.create();
  xmlHttpObj.onreadystatechange = function() {
    if (xmlHttpObj.readyState == 4) {
      switch(xmlHttpObj.status) {
        case 200:
          var xmlDoc = xmlHttpObj.responseXML;
          var polylines = xmlDoc.documentElement.getElementsByTagName('polyline');
          
          var points = [];
          
          for (var i = 0; i < polylines.length; i++) {
            points.push(new GLatLng(parseFloat(polylines[i].getAttribute('lat')),
                                    parseFloat(polylines[i].getAttribute('lng'))));
          }
          
          var polyRegion = new GPolygon(points, color, 4, 0.25, color, 0.15);

          // Give regions a pointer cursor when moused over
          GEvent.addListener(polyRegion, 'mouseover', function() {
            map.buttonMode = true;
          });
          GEvent.addListener(polyRegion, 'mouseover', function() {
            map.buttonMode = false;
          });

          // Store the region name as a property, we'll need it later
          polyRegion.regionName = region;

          GEvent.addListener(polyRegion, 'click', findRegion);
          map.addOverlay(polyRegion);
        break;
        
        default:
          alert(xmlHttpObj.status + ' error. Something went awry.');
        break;
      }
    }
  };
  xmlHttpObj.open('GET', '/contact/xml/' + region + '.xml', true);
  xmlHttpObj.send(null);
}

function findRegion(point) {
  var xmlHttpObj = GXmlHttp.create();
  xmlHttpObj.onreadystatechange = function() {
    if (xmlHttpObj.readyState == 4) {
      switch(xmlHttpObj.status) {
        case 200:
          var region = eval('(' + xmlHttpObj.responseText + ')');
          
          if (region.regionName != '') {
            if (lastMarker)
              map.removeOverlay(lastMarker);

            map.panTo(point);
                
            map.openInfoWindowHtml(point,
              '<div class="map-contact-img">' +
              '<img src="' + region.repPicture + '" height="87" width="63" />' +
              '</div>' +
              '<div class="map-contact-info">' +
              '<strong>' + region.regionName + ' Region</strong><br />' +
              region.regionRep + '<br />' +
              region.regionName + ' Region Representative<br />' +
              '<a href="' + region.repLink + '">View contact information</a>' +
              '</div>'
            );
          }
        break;

        default:
          alert(xmlHttpObj.status + ' error. Something went awry.');
        break;
      }
    }
  };
  xmlHttpObj.open('GET', '/contact/region.php?region=' + this.regionName, true);
  xmlHttpObj.send(null);
}

function findCity(form) {
  var xmlHttpObj = GXmlHttp.create();
  xmlHttpObj.onreadystatechange = function() {
    if (xmlHttpObj.readyState == 4) {
      switch(xmlHttpObj.status) {
        case 200:
          var region = eval('(' + xmlHttpObj.responseText + ')');
          
          if (region.regionName != '') {
            var geocoder = new GClientGeocoder();
            geocoder.getLatLng(region.reqCity + ', ND',
              function(point) {
                if (lastMarker)
                  map.removeOverlay(lastMarker);

                var marker = new GMarker(point);
                lastMarker = marker;
                
                map.panTo(point);
                
                map.addOverlay(marker);
                GEvent.addListener(marker, 'click',
                  function() {
                    marker.openInfoWindowHtml(
                      '<div class="map-contact-img">' +
                      '<img src="' + region.repPicture + '" height="87" width="63" />' +
                      '</div>' +
                      '<div class="map-contact-info">' +
                      '<strong>' + region.reqCity + ', ND</strong><br />' +
                      region.regionRep + '<br />' +
                      region.regionName + ' Region Representative<br />' +
                      '<a href="' + region.repLink + '">View contact information</a>' +
                      '</div>'
                    );
                  }
                );
                GEvent.trigger(marker, 'click');
              }
            );
          }
        break;

        default:
          alert(xmlHttpObj.status + ' error. Something went awry.');
        break;
      }
    }
  };
  xmlHttpObj.open('GET', '/contact/region.php?city=' + form['city'].value, true);
  xmlHttpObj.send(null);
}

window.onload = function() {
  externalLinks();
  navHoverEffect();
  customSearch();
  cityField();
  regionMap();
}