//-----------------------------------------------------------------------------
// MapBook related functions.
// Needs to be included with js.js as there are supporting functions within js
// that are needed in here.
//-----------------------------------------------------------------------------
var objGMap = null;
var arrMapData = new Array();

//-----------------------------------------------------------------------------
// Create map for My MapBook.
// Set zoom levels and place home marker.
//-----------------------------------------------------------------------------
function CreateMapbook() {
    var objMap = getObj('map');
    if (objMap != null && arrMapData != null) {
        if (objGMap == null) {
            var centreLat = 51.45497;
	        var centreLon = -2.59157;
	        if (getObj('home_lat').value != '') {
	            centreLat = getObj('home_lat').value;
	        }
	        if (getObj('home_lon').value != '') {
	            centreLon = getObj('home_lon').value;
	        }
    	    
	        var centreLatLong = new google.maps.LatLng(centreLat, centreLon);
	        var navigationControlOptions = { style: google.maps.NavigationControlStyle.ZOOM_PAN };
            
            var myOptions = {
                zoom: 12,
                center: centreLatLong,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            objGMap = new google.maps.Map(objMap, myOptions);
        }

		// Draw the home icon
		var homeInfo = getObj('home_info').innerHTML;
		var homeLatLong = new google.maps.LatLng(getObj('home_lat').value, getObj('home_lon').value);
		
		var homeIcon = new google.maps.MarkerImage('/fx/mapmarkers/marker_home.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Size(35, 34),
            // The origin for this image is 0,0.
            new google.maps.Point(0, 0),
            // The anchor for this image is the base of the baloon at (0, 25).
            new google.maps.Point(0, 25));

		var infoWindowOptions = { map: objGMap };
		var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

		AddMarker(infoWindow, homeInfo, homeLatLong, homeIcon, 1);

		objGMap.setCenter(homeLatLong);

		// Make the info window close when clicking anywhere on the map.
		google.maps.event.addListener(objGMap, 'click', function() {
		    infoWindow.close();
		});

        // Run ajax to plot markers		
		var dataType = getObj('data_type').value;
		var display_cat_ids = getObj('display_cat_ids').value;
		
		var params = "data_type=" + dataType + "&display_cat_ids=" + display_cat_ids + "&lat=" + getObj('home_lat').value + "&lon=" + getObj('home_lon').value;
		
        if (getObj('record_id') != null)
		    params += "&record_id=" + getObj('record_id').value;
		
		//RunScript(url, '', '');
		$("#map_listings").html(ajax_load).load("/customscripts/ajax_mfi_map_data.asp", params);
	}
}

//-----------------------------------------------------------------------------
function AddMarker(infoWindow, info, latLng, icon, index) {
    var markerOptions = { map: objGMap, position: latLng, icon: icon, title: 'more info...', zIndex: -index };
    var marker = new google.maps.Marker(markerOptions);

    // Handle the click on an icon to bring up the info window
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(info);
        infoWindow.open(objGMap, marker);
    });

    // Add DOM listener in here for when balloon icon is clicked on
    if (getObj('markericon_' + index)) {
        google.maps.event.addDomListener(getObj('markericon_' + index), 'click', function() {
            infoWindow.open(objGMap, marker);
            infoWindow.setContent(info);
            objGMap.setCenter(latLng);
        });
    }
}

//-----------------------------------------------------------------------------
// Plots results on the map
// Creates icons etc
// Gets data from map_data_item divs
// Loads the data into arrMapData and plots
//-----------------------------------------------------------------------------
function MapPlotPoints(dataType)
{
	var theMap = getObj('map');
	if (theMap != null)
	{
		// Kill any arrMapData points
		for (var i = 0; i < arrMapData.length; i++)
		{
			arrMapData[i] = '';
		}
		
		// Create a base icon for all of our markers that specifies the
		// shadow, icon dimensions, etc.
		var bounds = new google.maps.LatLngBounds();

		var infoWindowOptions = { map: objGMap };
		var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
		
		// Loop through the map_data divs to create the points
		var divs = document.getElementsByTagName('div');
		var dataCount = 0;
		for(var i = 0; i < divs.length; i++)
		{
			if (divs[i].className == 'map_data_item')
			{
				arrMapData[dataCount] = divs[i].innerHTML;
				dataCount++;
			}
	    }

	    // Plot the points
	    if (arrMapData.length > 0) {
	        for (i = 0; i < arrMapData.length; i++) {
	            poundsPos = arrMapData[i].indexOf('??');
	            dollarPos = arrMapData[i].indexOf('$$');

	            var lat = arrMapData[i].substr(0, poundsPos);
	            var lon = arrMapData[i].substr(poundsPos + 2, ((dollarPos - poundsPos) - 2));
	            var info = arrMapData[i].substr(dollarPos + 2);

	            var decodedLat = LatLongDecode(lat);
	            var decodedLon = LatLongDecode(lon);
	            if (decodedLat != 0 && decodedLon != 0) {
	                var letter = String.fromCharCode('A'.charCodeAt(0) + i);

	                var letterIcon = new google.maps.MarkerImage('/fx/mapmarkers/blue_Marker' + letter + '.png',
	                    // This marker is 20 pixels wide by 32 pixels tall.
                        new google.maps.Size(20, 34),
	                    // The origin for this image is 0,0.
                        new google.maps.Point(0, 0),
	                    // The anchor for this image is the base of the baloon at (0, 25).
                        new google.maps.Point(0, 25));

	                var point = new google.maps.LatLng(decodedLat, decodedLon);
                    
	                var marker = AddMarker(infoWindow, info, point, letterIcon, i);
                    
	                bounds.extend(point);
	            }
	        }

	        // Extend also to the home marker
	        if (getObj('home_lat') != null && getObj('home_lon') != null) {
	            var homePoint = new google.maps.LatLng(getObj('home_lat').value, getObj('home_lon').value);
	            bounds.extend(homePoint);
	        }

	        objGMap.fitBounds(bounds);

	        // Make the info window close when clicking anywhere on the map.
	        google.maps.event.addListener(objGMap, 'click', function() {
	            infoWindow.close();
	        });
	    }
	    else {
	        objGMap.setZoom(12);
	    }
	}
}

//-----------------------------------------------------------------------------
// The onclick event calls this
// Eventually runs ajax_mfi_map_data.asp to list the results. This in turn calls MapPlotPoints
//-----------------------------------------------------------------------------
function mapshowme(dataType, pageNum)
{
	// Change the appearance of the option clicked on
	var tds = document.getElementsByTagName('td');
	// map_opt_selected becomes map_opt
	// selected item becomes map_opt_selected
	for(var i = 0; i < tds.length; i++)
	{
		if (tds[i].className == 'map_opt_selected')
		{
			tds[i].className = 'map_opt'
		}
    }
    
    var selectedItem = getObj('map_opt_' + dataType);
    if (selectedItem != null)
    {
		selectedItem.className = 'map_opt_selected';
    }
    
	// Remove any existing plot points.
	if (arrMapData.length > 0)
	{
		arrMapData.length = 0;
	}
	
	// Run the script to plot the points on the map
	var display_cat_ids = getObj('display_cat_ids').value;
	var strCat = '';
	
	var params = "data_type=" + dataType + "&display_cat_ids=" + display_cat_ids + "&lat=" + getObj('home_lat').value + "&lon=" + getObj('home_lon').value + "&strCat=" + strCat + "&pg=" + pageNum;
	
	//RunScript(url, 'map_listings', '');
	$("#map_listings").html(ajax_load).load("/customscripts/ajax_mfi_map_data.asp", params);
}

//-----------------------------------------------------------------------------
function MapSelectPage(dataType)
{
	// Changes the page of a list of pages
	var thePage = '';
	if (getObj('pg') != null)
	{
	    thePage = getObj('pg').value;
	}
	
	MapShowMe(dataType, thePage);
}

//-----------------------------------------------------------------------------