jQuery(document).ready(function() {
  // Note: it's important to do this BEFORE the jQuery tabs thing, otherwise
  // there are mysterious NaN errors
  setupMap();
  
  // create tabs (thanks, jQuery!)
  jQuery('#tabs > ul').tabs();
});

function setupMap() {
  // create the map view
  var map = window.map = new SNAMP.OpenLayers.Map('map', {
    eventListeners: {
      'zoomend': OpenLayers.Function.bindAsEventListener(mapZoomEnd, this)
      // 'zoomend': mapZoomEnd
      // zoomend: alert('hey')
    }
  });
  // var map = window.map = new OpenLayers.Map('map');
  
  // Add the annotations
  var dpostLyr = new OpenLayers.Layer.Vector('Annotations', {
    projection: map.projection
  });
  if (DPOST_WKT.length > 0) {
    loadWKT(dpostLyr);
  }
  map.addLayer(dpostLyr);
  
  // Add study site layers
  var KML_URLS = [
    {name: 'Northern Site', url: '/static/kml/northern-site.kml'},
    {name: 'Southern Site', url: '/static/kml/southern-site.kml'}
  ];
  for (var i = KML_URLS.length - 1; i >= 0; i--) {
    var kmlLyr = new OpenLayers.Layer.GML(KML_URLS[i].name, KML_URLS[i].url, {
      format: OpenLayers.Format.KML,
      formatOptions: {
        extractStyles: true,
        extractAttributes: true
      },
      projection: new OpenLayers.Projection("EPSG:4326")
    });
    map.addLayer(kmlLyr);
  };
  
  // Set scale/area dependent visibility for features
  // OpenLayers.Event.observe(map, 'zoomend', function(e) {
  //   console.log("DEBUG: You zoomed...");
  // });
  
  // Add select control for popups
  // Note: the hosted version of OL 2.6 doesn't seem to size popups correctly,
  // so you may need to use a locally hosted trunk version
  var selectCtrl = makeHoverControl(dpostLyr);
  map.addControl(selectCtrl);
  selectCtrl.activate();
  
  map.zoomToExtent(SNAMP.OpenLayers.STUDYSITE_EXTENTS['all']);
};

function mapZoomEnd(e) {
  if (typeof(map) != 'undefined') {
    var annoLyr = map.getLayersByName('Annotations')[0];
    zoomToggleFeatures(annoLyr);
  };
}

// Hide features if they're bigger than the map
function zoomToggleFeatures(lyr) {
  var msg = '';
  for (var i = lyr.features.length - 1; i >= 0; i--){
    var area = lyr.features[i].geometry.getArea();
    if (area == 0) {
      continue;
    }
    var bounds = lyr.features[i].geometry.getBounds();
    var mBounds = map.calculateBounds();
    var xbuff = mBounds.getWidth() * 0.2;
    var ybuff = mBounds.getHeight() * 0.2;
    if (bounds.getHeight() >  mBounds.getHeight() + xbuff || 
        bounds.getWidth() > mBounds.getWidth() + ybuff) {
      lyr.features[i].style = {display: 'none'};
      if (bounds.intersectsBounds(mBounds)) {
        msg = "Some annotations in this area are too large to show at this " + 
              "scale.  Zoom out to see them.";
      }
    } else {
      lyr.features[i].style = null;
    }
  };
  lyr.redraw();
  if (msg != '') map.setMessage(msg);
  else if (map.messageDiv.style.display != 'none') map.clearMessage();
}

function loadWKT(lyr) {
  var wktFmt = new OpenLayers.Format.WKT({
    externalProjection: SNAMP.OpenLayers.PROJECTIONS.GEOG,
    internalProjection: map.projection
  });
  var features = [];
  // for each post...
  for (var i = DPOST_WKT.length - 1; i >= 0; i--) {
    var multigeom = wktFmt.read(DPOST_WKT[i].wkt);
    // for each part of the MULTIGEOMETRY...
    for (var j = multigeom.length - 1; j >= 0; j--){
      multigeom[j].data.dpost_id = DPOST_WKT[i].dpost_id;
      features.push(multigeom[j]);
    };
  };
  // sort features to prevent occlusion
  var comparator = function(a,b) {
    var aclass = a.geometry.CLASS_NAME;
    var bclass = b.geometry.CLASS_NAME;
    // console.log("DEBUG: Comparing %s (%s) with %s (%s)", a.id, aclass, b.id, bclass);
    var classOrder = [
      'OpenLayers.Geometry.MultiPolygon',
      'OpenLayers.Geometry.Polygon',
      'OpenLayers.Geometry.MultiLineString',        
      'OpenLayers.Geometry.LineString',
      'OpenLayers.Geometry.MultiPoint',        
      'OpenLayers.Geometry.Point'
    ];
    if (aclass != bclass) {
        // return classOrder.indexOf(aclass) - classOrder.indexOf(bclass);
	  return jQuery.inArray(aclass, classOrder) - jQuery.inArray(bclass, classOrder);
    } else if (aclass.match('Polygon')) {
      return b.geometry.getArea() - a.geometry.getArea();
    } else {
      return 0;
    }
  };
  features.sort(comparator);
  
  if (features.length > 0) { 
    lyr.addFeatures(features);
  }
}

// Create a new SelectFeature control along with the callbacks to handle
// popups and selecting multiple features belonging to the same post
function makeHoverControl(lyr) {
  var ctrl = new OpenLayers.Control.SelectFeature(lyr, {
    hover: true,
    callbacks: {
      click: function(ftr) {
        map.closePopups();
        if (ftr.popup == null) {
          ftr.popup = makeAnnoPopup(ftr);
          map.addPopup(ftr.popup);
        } else {
          ftr.popup.toggle();
        }
      },
      clickout: function(ftr) {
        ftr.popup.hide();
      },
      over: function(ftr) {
        for (var i = this.layer.features.length - 1; i >= 0; i--){
          if (this.layer.features[i].data.dpost_id == ftr.data.dpost_id) {
            this.select(this.layer.features[i]);
          }
        };
      },
      out: function(ftr) {
        for (var i = this.layer.features.length - 1; i >= 0; i--){
          if (this.layer.features[i].data.dpost_id == ftr.data.dpost_id) {
            this.unselect(this.layer.features[i]);
          }
        };
      }
    }
  });
  
  return ctrl;
}

function makeAnnoPopup(ftr) {
  if (ftr.geometry.CLASS_NAME == 'OpenLayers.Geometry.Point') {
    var lonlat = new OpenLayers.LonLat(ftr.geometry.x, ftr.geometry.y);
  } else {
    var lonlat = ftr.geometry.getBounds().getCenterLonLat();
  };
  var content = discussionPostContent(ftr.data.dpost_id).innerHTML;
  
  var popup = new OpenLayers.Popup.FramedCloud(
    null,     // id
    lonlat,   // lonlat
    null,     // size
    content,  // contentHTML
    null,     // anchor
    true      // closeBox
  );
  popup.minSize = new OpenLayers.Size(400,100);
  popup.maxSize = new OpenLayers.Size(400,450);
  
  return popup;
}

function discussionPostContent(dpost_id) {
  // console.log("DEBUG: Tring to make pop content for dpost ", dpost_id);
  var jDomElt = jQuery('#discussion_post-'+dpost_id+'-content');
  var content = 'testing';
  if (jDomElt.length > 0) {
    // var meta = jDomElt.children('.meta')[0].innerHTML;
    // var comment = jDomElt.children('.comment')[0].innerHTML;
    content = jQuery('<div></div>');
    // content.append(meta).append(comment);
    content.append(jDomElt.clone().addClass('popup discussion_post'));
  };
  return content[0];
}