var map;
var geocoder;

var onLoadCallBacks = new Array();

var markerGroups = { "mens_shoes": [], "ladies_shoes": [],"mens_clothes": [], "ladies_clothes": [] };
function load() {
  if (GBrowserIsCompatible()) {
    geocoder = new GClientGeocoder();
    map = new GMap2(document.getElementById('map'));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(51.510925, -0.080599), 15);
	
	for(var i = 0; i<onLoadCallBacks.length; i++) {
		onLoadCallBacks[i]();
	}
	
  }
}

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

function searchLocationsNear(center) {
 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = '/gateway/ajaxGateway.php?mode=locator&_module=maps&lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
 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.';
     map.setCenter(new GLatLng(54.5, -2.5), 5);
     return;
   }

   var bounds = new GLatLngBounds();
   for (var i = 0; i < markers.length; i++) {
     var name = markers[i].getAttribute('name');
     var address = markers[i].getAttribute('address_1')+', ';
     if(markers[i].getAttribute('address_2') != ''){
     	address += markers[i].getAttribute('address_2')+', ';
     }
     address += markers[i].getAttribute('town')+', ';
     address += markers[i].getAttribute('county')+', ';
     address += markers[i].getAttribute('postcode');
     address += "<br />"+markers[i].getAttribute('phone');
     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, name, address);
     map.addOverlay(marker);
     var mGroups = new Array("mens_shoes", "ladies_shoes","mens_clothes", "ladies_clothes");
     for (var g = 0; g < mGroups.length; g++) {
	     if( markers[i].getAttribute(mGroups[g]) == 1 ){      	
	     	markerGroups[ mGroups[g] ].push(marker);
	     }
     }
     var sidebarEntry = createSidebarEntry(marker, name, address, distance);
     sidebar.appendChild(sidebarEntry);
     bounds.extend(point);
   }
   map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
 });
}

function createMarker(point, name, address) {
  var marker = new GMarker(point);
  var html = '<b>' + name + '</b> <br/>' + address;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

function addPoint(lat, long, name, address) {
	var point = new GLatLng(parseFloat(lat),
	                     parseFloat(long));
	
	var marker = createMarker(point, name, address);
	map.addOverlay(marker);
}

function showOnlyGroup(type){
	if(type=="all"){
		for (x in markerGroups){
			toggleGroup(x,"show");
		}
	
	}else{
		for (x in markerGroups){
			toggleGroup(x,"hide");
		}
	toggleGroup(type,"show");
	
	}
}


function toggleGroup(type,state) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (state == "show") {
      marker.show();
    } else {
      marker.hide();
    }
  } 
}


function createSidebarEntry(marker, name, address, distance) {
  var div = document.createElement('div');
  var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
  div.innerHTML = html;
  div.style.cursor = 'pointer';
  div.style.marginBottom = '5px'; 
  GEvent.addDomListener(div, 'click', 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;
}