// JavaScript Document

/* 	*****************************************
	*	Javascript page for Cars SNE	
	*	Copyright  2010 Ananke IT Solutions		
	*   http://www.ananke.com 
	*	sales@ananke.com	
	***************************************** */ 
	
 	var map;
    var geocoder;
	//var trafficInfo;
    //var toggleState = 1;

    function initialize() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        //map.addControl(new GSmallMapControl());
        map.addControl(new GLargeMapControl3D());
		map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(41.8, -71.39), 11); 

		
	// traffic overlay
		//map.setUIToDefault();
        //var trafficOptions = {incidents:true};
        //trafficInfo = new GTrafficOverlay(trafficOptions);
        //map.addOverlay(trafficInfo);
	
	// load the search from index page
		searchLocations();
      }
    }

   //function toggleTraffic() {
      //if (toggleState == 1) {
       // map.removeOverlay(trafficInfo);
       // toggleState = 0;
      //} else {
        //map.addOverlay(trafficInfo);
       // toggleState = 1;
      //}
    //}

   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 icon = document.getElementById('iconSelect').value;
     var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&icon=' + icon;
     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 = 'No results found.<br/>Select a larger area.';
         map.setCenter(new GLatLng(41.8, -71.39), 9);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
		 var id = markers[i].getAttribute('id');
         var name = markers[i].getAttribute('name');
         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 distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
         
         var marker = createMarker(point, id, name, address, city, state, zip);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, id, name, address, distance, city, state, zip);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
     });
   }

    function createMarker(point, id, name, address, city, state, zip) {
      var marker = new GMarker(point);
      var html = '<b>' + name + '</b> <br/>' + address + '</b> <br/>' + city + ', ' + state + ' ' + zip + '<br /><a href="profile?id=' + id + '">More Info</a>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createSidebarEntry(marker, id, name, address, distance, city, state, zip) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address + '<br /> ' + city + ' ' + state + ' ' + zip + '<br /><a href="profile?id=' + id + '">More Info</a>';
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.paddingBottom = '10px'; 
	  div.style.paddingTop = '10px';
	  div.style.paddingLeft = '15px';
      GEvent.addDomListener(div, 'mouseover', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }