
function initExplore() {
	initExploreMap();
}

function initExploreMap() {
	var ctrlat = 40.747009;
	var ctrlng = -73.989944;
	$('#exploreMap').jmap('init',{ 
                'mapType':'hybrid',
								'mapCenter':[ctrlat,ctrlng], 
								'mapZoom':10, 
                'mapEnableType':true, 
                'mapShowjMapsIcon': false
                }, 
								function(map,element,options) {
									mapObj = map;
	}); // end init function 
	//$('#exploreMap').jmap('CreateMarkerManager', {'markerManager':'MarkerManager'});
	
	$.ajax({
		type: 'GET',
		url: base_url + 'explore/markers',
		data: '',
		dataType: "json",
		success: function(data){
			createExploreMarker(data.markers);
		}
	});
}

function reloadExploreMap() {
	mapObj.clearOverlays();
	
	$.ajax({
		type: 'GET',
		url: base_url + 'explore/markers',
		data: '',
		dataType: "json",
		success: function(data){
			createExploreMarker(data.markers);
		}
	});
}

function createExploreMarker(list) {
	var item, point, html, marker;
	var species_dir = '';
	for (var i = 0; i < list.length; i++) {
		item = list[i];
		species_dir = getSpeciesDir(item.species_name);
		
		point = new GLatLng(item.latitude, item.longitude);
		html = '';
		html += '<div id="hotspot_sighting_box">';
		html += '  <div id="hotspot_sighting_list" class="clearAfter">';
		html += '    <div class="clearAfter">';
		html += '      <div class="species_picture floatLeft">';
		html += '        <a href="' + base_url + 'species/view/' + species_dir + '" target="_blank"><img width="50" height="50" src="' + static_url + 'statics/images/species/' + item.folder + '/st.jpg" /></a>';
		html += '      </div>';
		html += '      <div class="species_desc floatRight">';
		html += '        <div class="species_title">SPECIES NAME:</div>';
		html += '        <div class="species_name"><a href="' + base_url + 'sighting/view/' + item.sighting_id + '" target="_blank">' + item.species_name + '</a></div>';
		html += '      </div>';
		html += '    </div>';
		html += '    <div class="sighting_desc clearAfter">';
		html += '      <p>Quantity: ' + item.number_sighted + '</p>';
		if (item.username != '') {
			html += '      <p>User: <a href="' + base_url + 'profile/' + item.user_id + '" target="_blank">' + item.username + '</a></p>';
		}
		html += '      <p>Time Sighted: ' + item.sighting_time + '</p>';
		html += '    </div>';
		html += '  </div>';
		html += '</div>';

		marker = createMarker(point, html);
		markerArr.push(marker);
	}
	
	if (markerClusterer != null) {
		markerClusterer.clearMarkers();
	}
	markerClusterer = new MarkerClusterer(mapObj, markerArr);
}

function createMarker(point, html) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html);});
	return marker;
}