// JavaScript Document

    var map;
    var geocoder;
	
	var iconBlue = new GIcon(); 
    iconBlue.image = 'http://www.real-estate-appraisers.net/markers/blue-pin.png';
    iconBlue.iconSize = new GSize(25, 25);
    iconBlue.iconAnchor = new GPoint(12, 25);
    iconBlue.infoWindowAnchor = new GPoint(12, 0);
 
    var iconRed = new GIcon(); 
    iconRed.image = 'http://www.real-estate-appraisers.net/markers/red-pushpin.png';
    iconRed.iconSize = new GSize(25, 25);
    iconRed.iconAnchor = new GPoint(12, 25);
    iconRed.infoWindowAnchor = new GPoint(12, 0);
				
    var customIcons = [];
    customIcons["residential"] = iconRed;
    customIcons["general"] = iconBlue;	
				  
	function createMarker(point,html) {   
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
    });
    return marker;    
	}
			
    function load() {
    if (GBrowserIsCompatible()) {
    geocoder = new GClientGeocoder();
    map = new GMap2(document.getElementById('map'));
     
    map.setCenter(new GLatLng(35, -112), 3); 
		
    }
    }

    function searchLocations() {
    var address = document.getElementById('addressInput').value;
    geocoder.getLatLng(address, function(latlng) {
    if (!latlng) {
    alert(address + ' not found');
    } else {
    searchLocationsNear(latlng);
    }
    });
    }

    function searchLocationsNear(center) {
    var radius = document.getElementById('radiusSelect').value;
	var category = document.getElementById('categorySelect').value;
    var searchUrl = 'genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&category=' + category;	   
    GDownloadUrl(searchUrl, function(data) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName('marker');
    map.clearOverlays();	   

    var sidebar = document.getElementById('sidebar');
    sidebar.innerHTML = '';
    if (markers.length == 0) {
    sidebar.innerHTML = '<span style="color:#800000; font-size:90%;">Sorry we do not currently have an appraiser listed in our directory in this area.<br/><br/>Please increase the radius to search the surrounding area.</span>';
    map.setCenter(new GLatLng(37, -112), 3);
	return;
    }

    var bounds = new GLatLngBounds();
    for (var i = 0; i < markers.length; i++) {
    var first = markers[i].getAttribute('first');	
	var last = markers[i].getAttribute('last');	
	var address = markers[i].getAttribute('address');	
	var city = markers[i].getAttribute('city');
    var state = markers[i].getAttribute('state');
	var zip = markers[i].getAttribute('zip');	
	var phone = markers[i].getAttribute('phone');	
	var type = markers[i].getAttribute('type');	
	var category = markers[i].getAttribute('category');	
	var license = markers[i].getAttribute('license');	
	var website = markers[i].getAttribute('website');	
	var rank = markers[i].getAttribute('rank');
	var distance = parseFloat(markers[i].getAttribute('distance'));
    var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                            parseFloat(markers[i].getAttribute('lng')));
         
    var marker = createMarker(point, first, last, phone, type, license, website, category, distance);
        map.addOverlay(marker);
    var sidebarEntry = createSidebarEntry(marker, first, last, city, phone, distance);
        sidebar.appendChild(sidebarEntry);
        bounds.extend(point);
        }
        map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
    });
    }

    function createMarker(point, first, last, phone, type, license, website, category, distance) {
    var marker = new GMarker(point, customIcons[category]);
    var html = '<span style="font-size: 100%; font-weight: bold; color: #800000;">' + first + '&nbsp;' + last + '</span><br/>' + phone + '&nbsp;<span style="color:#ffffff;">' + category + '</span><br/>' + type + '<br/>License #' + license + '<br/>' + website;    
		  
	GEvent.addListener(marker, 'mouseover', function() { 
    marker.openInfoWindowHtml(html);
    });	  	 
			 
    return marker;
    }

    function createSidebarEntry(marker, first, last, city, phone, distance) {
    var div = document.createElement('div');
    var html = '<span style="font-size: 100%; font-weight: bold; color: #800000;">' + first + '&nbsp;' + last + '</span><br/>' + city + '<br/>' + phone + '<br/><hr />';
    div.innerHTML = html;
    div.style.cursor = 'pointer';
    div.style.marginBottom = '10px'; 
    	
	// Highlights marker by mouseover in sidebar
	GEvent.addDomListener(div, 'mouseover', function() {
    GEvent.trigger(marker, 'mouseover' );
    });
	
	// Changes marker back to original color  
	GEvent.addDomListener(div, 'mouseout', function() {
    GEvent.trigger(marker, 'mouseout' );
    });	       
	  
	// Click to open info window
	GEvent.addDomListener(div, 'click', function() {
    GEvent.trigger(marker, 'click' );
    });
	
	// Highlights sidebar results background
    GEvent.addDomListener(div, 'mouseover', function() {
    div.style.backgroundColor = '#ffffff';
    });
    
	// Changes sidebar highlight back to normal
	GEvent.addDomListener(div, 'mouseout', function() {
    div.style.backgroundColor = '#A5BFDD';
    });
    return div;
    }