map = mgr = clusterIcon = markerIcon = smallIcon =  currentMarker = null;
function updateLatLng(latlng) {
  $("#clat")[0].innerHTML = latlng.lat();
  $("#clng")[0].innerHTML = latlng.lng();
}

function initicons() {
  // icons
  clusterIcon = new MapIconMaker.createFlatIcon({width: 30, height: 30, label: "MORE", primaryColor: "#4169FF", labelColor: "#ffffff"});
  markerIcon = new MapIconMaker.createLabeledMarkerIcon({addStar: true, label: "", primaryColor: "#00ff00"});
  smallIcon = new MapIconMaker.createMarkerIcon({width: 22, height: 22, primaryColor: "#6666ff"});
}

function initmap() {
  initicons();
  
	var options = {
	
		showOnLoad : true
	
	};

  var INIT_ZOOM = 2, INIT_LAT = 30, INIT_LNG = -1.7;
  map = new GMap2(document.getElementById("map"), {googleBarOptions: options});
  map.setCenter(new GLatLng(INIT_LAT, INIT_LNG), INIT_ZOOM);
  map.enableGoogleBar();
  mgr = new ClusterMarker(map, {clusterMarkerIcon: clusterIcon});
  map.addControl(new GLargeMapControl());

  // current position marker
  currentMarker = new GMarker(new GLatLng(INIT_LAT, INIT_LNG), {title: "Your current position", draggable: true, icon: markerIcon});
  map.addOverlay(currentMarker);
  currentMarker.hide();


  GEvent.addListener(map, "click", function(overlay, latlng) {
	 if(overlay != null)
		return;
	 currentMarker.setLatLng(latlng);
	 if(currentMarker.isHidden()) {
		currentMarker.show();
	 }
	 updateLatLng(latlng);
  });

  GEvent.addListener(currentMarker, "dragend", function(latlng) {
	 updateLatLng(latlng);
  });
}

$(document).ready(function() {
  initmap();

  // click handling for the submit button
  $("#btn").click(function() {
	 var email = $("#email")[0];
	 var name = $("#name")[0];
	 var location = $("#location")[0];
	 if(currentMarker.isHidden()) {
		alert("Please click the map to pin point your location.");
		return;
	 }
	 else if(!name.value.length) {
		alert("Please supply your name.");
		return;
	 }
	 else if(!email.value.length) {
		alert("Please supply your email address.");
		return;
	 }
	 else if(!location.value.length) {
		alert("Please supply your location.");
		return;
	 }

	 $.post("geoemail.php", {name: name.value, email: email.value, location: location.value, lat: currentMarker.getLatLng().lat(), lng: currentMarker.getLatLng().lng()}, function(json) {
		currentMarker.hide();
		var m = new GMarker(new GLatLng(json.data.lat, json.data.lng), {title: json.data.location, icon: smallIcon});
		GEvent.addListener(m, 'click', function() {
			m.openInfoWindowHtml('<h2 class="balloon">'+json.data.location+'</h2>'); /* <p>'+json.data.email+'</p> */
		});
		mgr.addMarkers([m]);
		mgr.refresh();
		
	 }, "json");
	 
	 name.value = '';
	 email.value = '';
	 location.value = '';
	 
	 alert("You are now on the map!");
	 
  });

  // load the data for the map 
  $.getJSON("geoemail.php", function(json) {
	 var markers = [];
	 $.each(json.data, function(i, v) {
		var m = new GMarker(new GLatLng(v.lat, v.lng), {title: v.location, icon: smallIcon});
		markers.push(m);
		GEvent.addListener(m, 'click', function() {
			m.openInfoWindowHtml('<h2 class="balloon">'+v.location+'</h2>');/* '<p>'+v.email+'</p>' */
		});
	 });
	 mgr.addMarkers(markers);
	 mgr.refresh();
  });
  
});