// for any changes to this file, you need to update the js file version in map_functions.php (variable $additional_head_text at the top)
var DEFAULT_LOCATION_MESSAGE = 'Enter your location or mark it on the map...';
var search_map = null;
var display_map = null;
var geocoder = null;
var coordinates = null;
var marker = null;
var markers = [];
var city = '';
var region = '';
var country = '';

// load both search and display map
function initialize_maps() {
	initialize_location_finder();
	initialize_multi_location_display();
}

function initialize_maps_single() {
	initialize_location_finder();
	initialize_location_display();
}

// search map functions
function initialize_location_finder() {
	var zoom = 3; // zoom level 3 = country view
	var latlng = new google.maps.LatLng(37.4419, -100.1419); // default location = center of US
	
	// try to set user's location based on IP address (if 
	if (google.loader.ClientLocation && !($('location') && $('location').value)) {
		zoom = 9; // zoom level = city view
		latlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
		
		$('location').value = google.loader.ClientLocation.address.city;
		if (google.loader.ClientLocation.address.region) {
			if (google.loader.ClientLocation.address.city) $('location').value += ', ';
			if (google.loader.ClientLocation.address.country_code == 'US') {
				$('location').value += google.loader.ClientLocation.address.region.toUpperCase();
			} else {
				$('location').value += google.loader.ClientLocation.address.region;
			}
		}
		if (google.loader.ClientLocation.address.country) {
			if ($('location').value) $('location').value += ', ';
			$('location').value += ', ' + google.loader.ClientLocation.address.country;
		}
	}
	
	if ($('search_map')) {
		// create map
		search_map = new google.maps.Map2($('search_map'));
		
		// redefine min and max zoom levels
		defineZoomLevels(search_map, 3, 9);
		
		// set map options
	    search_map.setCenter(latlng, zoom);
	    search_map.addControl(new GLargeMapControl());
	    search_map.enableScrollWheelZoom();
	    
	    // add event listener
	    GEvent.addListener(search_map, "click", addLocationToSearchMap);
	    
	    // create geocoder to get location info from coordinates and vice versa
	    if (geocoder == null) {
	    	geocoder = new GClientGeocoder();
	    	geocoder.setBaseCountryCode('US');
	    }
	    
	    // mark default location
	    markSearchLocation();
	}
}

// event handler - called when user clicks on the map 
function addLocationToSearchMap(overlay, point) {
	if (point) { 
  		search_map.clearOverlays();
  		clearMapError();
  		search_map.setCenter(point, 9);
		createNewMarker(search_map, point, '');
  		$('latitude').value = point.lat();
  		$('longitude').value = point.lng();
  		geocoder.getLocations(point, getSearchLocationInfo);
	}
}

// takes the user location input and marks the point on the map
function markSearchLocation() {
	var location = $('location').value;
	if (geocoder && location && location !== DEFAULT_LOCATION_MESSAGE) {
		geocoder.getLatLng(location, getSearchLocation);
	}
}

// receiver function for markSearchLocation()
function getSearchLocation(point) {
	if (point) {
  		search_map.clearOverlays();
  		clearMapError();
  		search_map.setCenter(point, 9);
		createNewMarker(search_map, point, '');
  		$('latitude').value = point.lat();
  		$('longitude').value = point.lng();
  		geocoder.getLocations(point, getSearchLocationInfo);
	} else {
		mapError();
	}
}

// receiver function for search map geocoder getLocations()
function getSearchLocationInfo(response) {
	getLocationInfo(search_map, response);
}

// receiver function when user drags point on map
function getNewMarkerLocation()  {
	addLocationToSearchMap(null, marker.getLatLng());
}

function openSearchInfoWindow() {
	var infoHTML = '<div style="padding:5px;margin-top:5px;font-weight:bold;text-align:left;">' + $('location').value + '</div>';
	search_map.openInfoWindowHtml(coordinates, infoHTML);
}

function checkLocation(location) {
	if (location == DEFAULT_LOCATION_MESSAGE) {
		$('location').value = '';
		$('location').style.color = '#000000';
	}
}

function checkEnter(event) {
	var key;
	if (window.event) key = window.event.keyCode; else key = event.which;
	if (key == 13 && $('location').value) { // enter pressed
		markSearchLocation();
		return false;
	}
}

function clearLocation() {
	$('location').value = DEFAULT_LOCATION_MESSAGE;
	$('location').style.color = '#676767';
	$('latitude').value = '';
	$('longitude').value = '';
	$('city').value = '';
	$('region').value = '';
	$('country').value = '';
	var latlng = new google.maps.LatLng(37.4419, -100.1419); // default location = center of US
	search_map.setCenter(latlng, 3);
	search_map.clearOverlays();
  	clearMapError();
}

function adjustDetailLevel(level) {
	if ($('latitude').value || $('longitude').value) {
		var latlng = new google.maps.LatLng($('latitude').value, $('longitude').value);	
    	addLocationToSearchMap(null, latlng);
	}
}

function mapError() {
	$('map_msg').innerHTML = 'Sorry, that location was not found. Please try again.';
	if ($('latitude')) $('latitude').value = '';
	if ($('longitude')) $('longitude').value = '';
	if ($('city')) $('city').value = '';
	if ($('region')) $('region').value = '';
	if ($('country')) $('country').value = '';
	if (search_map) search_map.clearOverlays();
}

function clearMapError() {
	if ($('map_msg')) $('map_msg').innerHTML = '';
}

// display map functions
function initialize_location_display() {
	var zoom = 3; // zoom level 3 = country view

	// default location = center of US
	var latitude = $('display_latitude') ? $('display_latitude').value : 37.4419;
	var longitude = $('display_longitude') ? $('display_longitude').value : -100.1419;
	var latlng = new google.maps.LatLng(latitude, longitude);
	
	if ($('display_map')) {
		// create map
		display_map = new google.maps.Map2($('display_map'));
		
		// redefine min and max zoom levels
		defineZoomLevels(display_map, 3, 9);
		
		// set map options
	    display_map.setCenter(latlng, zoom);
	    display_map.addControl(new GLargeMapControl());
	
	    // create geocoder to get location info from coordinates
	    if (geocoder == null) {
	    	geocoder = new GClientGeocoder();
	    	geocoder.setBaseCountryCode('US');
	    }
	    
	    // add location to map
	    coordinates = latlng;
	    addLocationToDisplayMap(latlng);
		// mark locations on map
	    markLocationsOnMap();
	}
}

function addLocationToDisplayMap(point) {
	if (point) { 
  		display_map.clearOverlays();
  		display_map.setCenter(point, 9);
		createNewMarker(display_map, point, $('display_location').value);
  		$('display_latitude').value = point.lat();
  		$('display_longitude').value = point.lng();
  		geocoder.getLocations(point, getDisplayLocationInfo);
	}
}

// receiver function for display map geocoder getLocations()
function getDisplayLocationInfo(response) {
	getLocationInfo(display_map, response);
}

function openDisplayInfoWindow() {
	var infoHTML = '<div style="padding:5px;margin-top:5px;font-weight:bold;text-align:left;">' + $('display_location').value + '</div>';
	display_map.openInfoWindowHtml(coordinates, infoHTML);
}

// multi-location display map
function initialize_multi_location_display() {
	if ($('display_map')) {
		// create map
		display_map = new google.maps.Map2($('display_map'));
		
		// redefine min and max zoom levels
		defineZoomLevels(display_map, 3, 9);
	
		// set map options
	    display_map.addControl(new GLargeMapControl());
	
	    // create geocoder to get location info from coordinates
	    if (geocoder == null) {
	    	geocoder = new GClientGeocoder();
	    	geocoder.setBaseCountryCode('US');
	    }
	    
	    // mark locations on map
	    markLocationsOnMap();
	}
}

// markers is an array of markers to be placed on the map
// location[0] = latitude
// location[1] = longitude
// location[2] = location without links (for alt text)
// location[3] = location with links
// location[4] = marker info (info popup text)
// location[5] = marker type (confession, story, group, etc)
function markLocationsOnMap() {
	if (markers != null) {
		var bounds = null;
		var len = markers.length;
		for (var i = 0; i < len; i++) {
			var location = markers[i];
			var latlng = new google.maps.LatLng(location[0], location[1]);
			var icon = new GIcon(G_DEFAULT_ICON);
			icon.image = getIconImage(location[5]);
			icon.iconSize = new GSize(32, 32);
			icon.iconAnchor = new GPoint(16, 33);
			marker = new GMarker(latlng, { title:location[2], icon:icon });
			display_map.addOverlay(marker); 
			GEvent.addListener(marker, "click", openMultiLocInfoWindow);
			if (bounds == null) {
				bounds = new GLatLngBounds(latlng, latlng);
			} else {
				bounds.extend(latlng);
			}
			// reset center
			var zoom = display_map.getBoundsZoomLevel(bounds);
			if (zoom < 3) { // allow for larger world view
				defineZoomLevels(display_map, zoom, 9);
			}
			display_map.setCenter(bounds.getCenter(), zoom);
		}
	}
}

function openMultiLocInfoWindow(point) {
	var len = markers.length;
	for (var i = 0; i < len; i++) {
		var location = markers[i];
		if (point.y == location[0] && point.x == location[1]) {
			var html = '<div class="location"><b>' + location[3] + '</b>';
			html += '<div class="marker_info">' + location[4] + '</div>';
			html += '<div class="smallGreyText">See all ';
			switch (location[5]) {
				case 'confession': html += 'confessions'; break;
				case 'story': html += 'stories'; break;
				case 'group': html += 'groups'; break;
			}
			html += ' from ' + location[3] + '</div>';
			html += '</div>';
			display_map.openInfoWindowHtml(point, html);
		}
	}
}

function refreshViewport() {
	var location = $('search_location').value;
	if (geocoder && location) {
		geocoder.getLatLng(location, getNewViewport);
	}
}

function refreshViewportOnEnter(event) {
	var key;
	if (window.event) key = window.event.keyCode; else key = event.which;
	if (key == 13 && $('search_location').value) {
		refreshViewport();
		return false;
	}
}

function getNewViewport(point) {
	if (point) {
  		geocoder.getLocations(point, setViewport);
		display_map.setCenter(point, 5); // set at region zoom level
	}
}

function setViewport(response) {
	determineCityRegionCountry(response);
	var zoom;
	if (city != '') zoom = 9;
	else if (region != '') zoom = 5;
	else zoom = 3;
	display_map.setZoom(zoom);
	$('search_location').value = city;
	if (region) {
		if (city) $('search_location').value += ', ';
		if (country == 'USA') region = region.toUpperCase();
		$('search_location').value += region;
	}
	if (country) {
		if (city || region) $('search_location').value += ', ';
		$('search_location').value += country;
	}
}

// utility functions used by both search and display maps
function defineZoomLevels(map, min, max) {
	var mt = map.getMapTypes();
	for (var i = 0; i < mt.length; i++) {
		mt[i].getMinimumResolution = function() { return min; }
		mt[i].getMaximumResolution = function() { return max; }
	}
}

function getIconImage(type) {
	switch (type) {
		case 'confession': return '/images/marker_confession.png'; break;
		case 'story': case 'group-story': return '/images/marker_story.png'; break;
		case 'group': return '/images/marker_group.png'; break;
		case 'dream': return '/images/marker_dream.png'; break;
		default: return '/images/marker_red.png';
	}
}

function createNewMarker(map, point, location) {
	if ($('type')) { // determine type of marker to display
		var icon = new GIcon(G_DEFAULT_ICON);
		icon.image = getIconImage($('type').value);
		icon.iconSize = new GSize(32, 32);
		icon.iconAnchor = new GPoint(16, 33);
	}
  	markerOptions = (map == display_map) ? { title:location, icon:icon } : { draggable:true, title:location };
  	marker = new GMarker(point, markerOptions);
  	map.addOverlay(marker);
  	if (map == search_map) {
  		GEvent.addListener(marker, "click", openSearchInfoWindow);
  	} else {
  		GEvent.addListener(marker, "click", openDisplayInfoWindow);
  	}
  	if (map == search_map) GEvent.addListener(marker, "dragend", getNewMarkerLocation);
}

function determineCityRegionCountry(response) {
	city = '';
	region = '';
	country = '';
	place = response.Placemark[0];
  	if (place['AddressDetails']['Country']) {
  		country = place['AddressDetails']['Country']['CountryName'];
	  	if (place['AddressDetails']['Country']['AdministrativeArea']) {
	  		region = place['AddressDetails']['Country']['AdministrativeArea']['AdministrativeAreaName'];
		  	if (place['AddressDetails']['Country']['AdministrativeArea']['Locality']) {
		  		city = place['AddressDetails']['Country']['AdministrativeArea']['Locality']['LocalityName'];
		  	} else if (place['AddressDetails']['Country']['AdministrativeArea']['SubAdministrativeArea'] && 
		  			place['AddressDetails']['Country']['AdministrativeArea']['SubAdministrativeArea']['Locality']) {
		  		city = place['AddressDetails']['Country']['AdministrativeArea']['SubAdministrativeArea']['Locality']['LocalityName'];
		  	} else if (place['AddressDetails']['Country']['Locality']) {
		  		city = place['AddressDetails']['Country']['Locality']['LocalityName'];
		  	}
	  	} else if (place['AddressDetails']['Country']['SubAdministrativeArea'] && 
	  			place['AddressDetails']['Country']['SubAdministrativeArea']['Locality']) {
		  	city = place['AddressDetails']['Country']['SubAdministrativeArea']['Locality']['LocalityName'];
		} else if (place['AddressDetails']['Country']['Locality']) {
		  	city = place['AddressDetails']['Country']['Locality']['LocalityName'];
		}
  	} else if (place['AddressDetails']['AdministrativeArea']) {
  		region = place['AddressDetails']['AdministrativeArea']['AdministrativeAreaName'];
  		country = place['address'].substring(place['address'].indexOf(region)+region.length+1, place['address'].length);
  		country = country.replace(/\d/g, ''); // remove postal code
  	}
}

function getLocationInfo(map, response) {
  	determineCityRegionCountry(response);
  	if (city == '' || $('region_level') && $('region_level').checked || (display_map && $('region_level').value == 1)) {
  		city = '';
  		map.setZoom(5);
  	}
  	if (city || region || country) {
		var location = '';
		if (map == search_map) {
		  	location = city;
		  	if (region) {
		  		if (city) location += ', ';
		  		if (country == 'USA') region = region.toUpperCase();
		  		location += region;
		  	}
		  	if (country) {
		  		if (city || region) location += ', ';
		  		location += country;
		  	}
		  	if ($('city')) $('city').value = city;
		  	if ($('region')) $('region').value = region;
		  	if ($('country')) $('country').value = country;
		  	$('location').value = location;
		}
	  	geocoder.getLatLng(location, function (point) {
			if (point) {
		  		map.clearOverlays();
  				clearMapError();
		  		map.setCenter(point);
				createNewMarker(map, point, location);
		  		coordinates = point;
		  		$('latitude').value = point.lat();
		  		$('longitude').value = point.lng();
			}
	  	});
  	} else if (map == search_map) {
  		mapError();
  	}
}


/******************************************************
 ******************************************************
 ******************************************************
 *  MAP WIDGET SPECIFIC FUNCTIONS
 ******************************************************
 ******************************************************
 ******************************************************/
var display_map;
//var markers = []; //gets populated at runtime
var curMapCenter = null;
var curZoomLevel = null;
var curMarker = null; //hold all marker info for the marker we are animating
var curPoint = null;
var curIndex = 0;
var nextPoint = null;
var animating = false; //flag when animating
var intervalId = null;
var intervalAnimiId = null;
var evtAnimationComplete = null;
var gEvent = null;
var ZOOM_DELAY = 2000; //number of milliseconds between each zoom when animating
var ANIMI_DELAY = 5000; //number of milliseconds between each animation
var MAX_ZOOM = 10;
var MIN_ZOOM = 1;
var MAP_WIDTH = 350;
var MAP_HEIGHT = 350;
var GUTTER = 20; //in pixels, within this many pixels from the edge pan map towards middle
var defaultWidgetMapCenter = new Array('41.879536', '-87.624336');
var ajax_url = 'http://localhost/ajax/map_widget_get_content.php';
 
//Palo alto area: 37.4419, -122.1419
//Palo alto area: 37.4569, -122.1578
//SF: 37.775196, -122.419205
//Chi: 41.879536, -87.624336 
//NY: 40.756054, -73.986954 
/*var markers = new Array();
var m1 = new Array(2); //palo alto
    m1[0] = 37.4569;
    m1[1] = -122.1578;
markers.push(m1);
var m2 = new Array(2); //chicago
    m2[0] = 41.879536;
    m2[1] = -87.624336;
markers.push(m2);
var m3 = new Array(2); //nyc
    m3[0] = 40.756054;
    m3[1] = -73.986954;
markers.push(m3);*/
  
function init_widget_map() {
    display_map = new google.maps.Map2(document.getElementById("display_map")); 
    //curMapCenter = new google.maps.LatLng(41.879536, -87.624336);
    curMapCenter = new google.maps.LatLng(defaultWidgetMapCenter[0], defaultWidgetMapCenter[1]);
    curZoomLevel = 3;
    display_map.setCenter(curMapCenter, curZoomLevel);
    defineZoomLevels(display_map, MIN_ZOOM, MAX_ZOOM);
    
    //start animation for map once it is fully loaded
    GEvent.addListener(display_map, "tilesloaded", startContentDisplayLoop());
    
}

/****** UTILITY FUNCTIONS ********/
function resetZoom(){
    alert('reset zoom');
    display_map.setZoom(MIN_ZOOM);
}
function getNextPoint() {
    //alert("inside getNextPoint: markers length is: "+markers.length);
    //pop off the global markers stack
    if(markers && markers.length > 0 && curIndex < markers.length){
        //curMarker = markers.pop();
        curMarker = markers[curIndex];
        curIndex++;
        var point = new GLatLng(curMarker[0], curMarker[1]);
        return point;
    } else {
        curIndex = 0; //restart from beginning
        //response type will be text\html
        //new Ajax.Request(ajax_url, {method: 'get', evalJS: true });
        return false;
    }
}
function isPointInBounds(point) {
    if(!point){
        alert("Error: point is not valid");
        return false;
    }
    
    var bounds = display_map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lat = point.lat();
    var lng = point.lng();
    if(lat < northEast.lat() && lat > southWest.lat()){
        if(lng < northEast.lng() && lng > southWest.lng()){
            //alert("Point is in bounds!")
            return true;
        }
        else{
            //alert("point is out of bounds by lng: northEast: ("+northEast.lat()+","+northEast.lng()+") southWest: ("+southWest.lat()+", "+southWest.lng()+"), point:("+lat+","+lng+")");
            return false;
        }
    }else {
        //alert("point is out of bounds by lat: northEast: ("+northEast.lat()+","+northEast.lng()+") southWest: ("+southWest.lat()+", "+southWest.lng()+"), point:("+lat+","+lng+")");
        return false;
    }
}

//check if point is on the edge of the map, scroll/animate map appropriately
function isPointInGutter(point) {
    if(!point){
        alert("Error: point is not valid");
        return false;
    }
    
    var gPoint = display_map.fromLatLngToContainerPixel(point);
    if(gPoint.x < GUTTER)
        alert("gPoint.x in GUTTER: "+gPoint.x);
    if(gPoint.x > MAP_WIDTH - GUTTER)
        alert("gPoint.x in GUTTER: "+gPoint.x);
    if(gPoint.y < GUTTER)
        alert("gPoint.y in GUTTER");
    if(gPoint.y > MAP_HEIGHT - GUTTER)
        alert("gPoint.x in GUTTER: "+gPoint.y);
    
    alert("gpoint is: "+gPoint.x+", "+gPoint.y);
}

/******************************************************
  once data is loaded this function pops off points one 
  at a time and shows animation for each one.
******************************************************/
function startContentDisplayLoop() {
    var point;
    if(!intervalAnimiId){ //init timer to call this func repeatedly
        intervalAnimiId = window.setInterval(animateTransition, ANIMI_DELAY);
        //alert("interval timer is set: "+intervalAnimiId);
    }
    
    animateTransition();
    
}
function continueContentDisplayLoop() {
    //alert('inside continueContentDisplayLoop');
    animating = false;
    startContentDisplayLoop();
}


function getPanByGSize(gPoint) {
    if(pixelCoord.x > MAP_WIDTH / 2 && pixelCoord.y < MAP_HEIGHT / 2) { //quadrant I
        panWidth = -20; panHeight = 20; 
    }else if(pixelCoord.x < MAP_WIDTH / 2 && pixelCoord.y < MAP_HEIGHT / 2) {//quadrant II
        panWidth = 20; panHeight = 20; 
    }else if(pixelCoord.x < MAP_WIDTH / 2 && pixelCoord.y > MAP_HEIGHT / 2) {//quadrant III
        panWidth = 20; panHeight = -20; 
    }else if(pixelCoord.x > MAP_WIDTH / 2 && pixelCoord.y > MAP_HEIGHT / 2) {//quadrant IV
        panWidth = -20; panHeight = -20; 
    }
}

/***************************
 * animateTransition - pan map to show new location and pop-up info window 
 * point = the point we want to smoothly animate to (a GLatLng obj)
 * lat = latitude
 * lng = longitude
 ***************************/
function animateTransition() {
    var tmp;
    var point = null;
    
    //point to animate to
    point = getNextPoint();
    
    if(point){
        animating = true;
        //add marker to map check if it is within bounds of current map
        
        var type = (curMarker[5]) ? curMarker[5] : ''; //'confession', 'dream', 'story', etc.
        //display_map.setCenter(point, curZoomLevel);
        
        addLocationToWidgetDisplayMap(point, type);
        //isPointInGutter(point);
        //decide to scroll map up or down depending on whether point is on upper or lower hemisphere of map
        var pixelCoord = display_map.fromLatLngToContainerPixel(point);
        
        //alert("pixelCoord is: "+pixelCoord.x+", "+pixelCoord.y);
            
        //setTimeout("display_map.panBy(new GSize("+panWidth+", "+panHeight+"))", 1000);
        var gEventId = GEvent.addListener(display_map, 'slidemap', function(){
                var MARGIN = 40;
                panWidth = 0; panHeight = 0;
                if(pixelCoord.x > (MAP_WIDTH / 2)+MARGIN && pixelCoord.y < (MAP_HEIGHT / 2) - MARGIN) { //quadrant I
                    panWidth = -20; panHeight = 30;
                    //alert("quad I"); 
                }else if(pixelCoord.x < MAP_WIDTH / 2 && pixelCoord.y < MAP_HEIGHT / 2) {//quadrant II
                    panWidth = 20; panHeight = 30; 
                    //alert("quad II");
                }else if(pixelCoord.x < (MAP_WIDTH / 2) - MARGIN && pixelCoord.y > (MAP_HEIGHT / 2) + MARGIN) {//quadrant III
                    panWidth = 10; panHeight = -10; 
                    //alert("quad III");
                }else if(pixelCoord.x > (MAP_WIDTH / 2) + MARGIN && pixelCoord.y > (MAP_HEIGHT / 2) + MARGIN) {//quadrant IV
                    panWidth = -20; panHeight = -10; 
                    //alert("quad IV");
                }
                
                display_map.panBy(new GSize(panWidth, panHeight));
                //display_map.panBy(new GSize(0, -20));
                if(gEventId)
                    GEvent.removeListener(gEventId);
                });
        setTimeout("GEvent.trigger(display_map, 'slidemap')", 1500);
        curPoint = point;
    }
}

function pauseAnimation() {
    if(intervalAnimiId){ //init timer to call this func repeatedly
        window.clearInterval(intervalAnimiId);
        intervalAnimiId = false;
    }
    document.getElementById('epw_map_statusinfo').innerHTML = 'hover away to resume animation';
    //alert('paused');
}

function resumeAnimation() {
    intervalAnimiId = window.setInterval(animateTransition, ANIMI_DELAY);
    document.getElementById('epw_map_statusinfo').innerHTML = '';
    //alert('resume');
}
                             

/*******************************************************
 * animateZoom - callback to zoom the map ever interval
 ******************************************************/
 function animateZoomIn(){
     //alert('current zoom level is: '+curZoomLevel);
    if(curZoomLevel < MAX_ZOOM){
        display_map.zoomIn();
        curZoomLevel = curZoomLevel + 1;
    }else {
        window.clearInterval(intervalZoomId);
        //alert('zoom finished, clear interval');
        //fire event that animation has completed
        if(evtAnimationComplete)
            evtAnimationComplete.fire();
    }
    return true;
 }

/*******************************************************
 * add marker to widget map
 *
 * NOTE: trying to use addLocationToDisplayMap() from maps.js
 * causes entire map to refresh/reload which is resetting the 
 * map back to initial center position?
 ******************************************************/
function addLocationToWidgetDisplayMap(point, type) {
    display_map.clearOverlays();
    //display_map.setCenter(point, curZoomLevel);
    
    var icon = new GIcon(G_DEFAULT_ICON);
    icon.image = getIconImage(type);
    icon.iconSize = new GSize(32, 32);
    icon.iconAnchor = new GPoint(16, 33);
    
    markerOptions = { icon:icon };
    marker = new GMarker(point, markerOptions);
    display_map.addOverlay(marker);
    
    //show pop-up info window about the content
    //TODO: add info for the content to show
    infoText = (curMarker[4]) ? curMarker[4] : 'Visit <a href="http://www.experienceproject.com">Experience Project</a> to view this Story';
    openWidgetDisplayInfoWindow(point, infoText);
    
}

function openWidgetDisplayInfoWindow(point, text) {
    if(text) {
        var infoHTML = '<div style="width:200px; overflow:auto; padding:5px;margin-top:5px;font-weight:bold;text-align:left;">' + text + '</div>';
        display_map.openInfoWindowHtml(point, infoHTML);
    }
}