var map;
var geocoder;
var imageDir = SITE_HTTP + '/assets/images/storelocator/';
var iconpngDir = imageDir + "icon.png";
var iconshadowDir = imageDir + "icon_shadow.png";
var icongifDir = imageDir + "icon.gif";
var iconmozDir = imageDir + "icon_moz.gif";

document.getElementById("storelocator").style.display = "block";

load();

//detect enter key and submit call search
$("input").keypress(function (e) {
    if (e.which == 13) {
    	searchLocations();
    }
  });
$("select").keypress(function (e) {
	if (e.which == 13) {
		searchLocations();
	}
});

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(-25.335448, 135.745076), 4);
  }
}


function searchLocations() {
	document.getElementById("mapsidebar").style.display = "block";
	
	var address = document.getElementById('addressInput').value;
	

	if (address.search(/Wau/i) > -1) {
		address.sub((/Wau/i), "australia", 1);    
    }
    else if (address.search(/australia/i) == -1) {
        address += ", Australia";
    }
	
	
	geocoder.getLatLng(address, function(latlng) {
		if (!latlng) {
			alert(address + ' not found');
		} else {
			searchLocationsNear(latlng);
			
		}
	});	
}

function searchLocationsNear(center) {
	var radius = document.getElementById('radiusSelect').value;
	var searchUrl = 'xml.php?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('mapsidebar');
		sidebar.innerHTML = '';
		if (markers.length == 0) {
			sidebar.innerHTML = '<div><span>No results found.</span></div>';
			map.setCenter(new GLatLng(-25.335448, 135.745076), 4);
			return;
		}
		
		var bounds = new GLatLngBounds();
		for (var i = 0; i < markers.length; i++) {
		     var name = markers[i].getAttribute('name');
		     var chain = markers[i].getAttribute('chain');
		     var logo = markers[i].getAttribute('logo');
		     var address = markers[i].getAttribute('address');
		     var suburb = markers[i].getAttribute('suburb');
		     var telephone = markers[i].getAttribute('telephone');
		     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, chain, logo, name,address, suburb, telephone, distance);
		     map.addOverlay(marker,markerOptions);
		     var sidebarEntry = createSidebarEntry(marker, chain, logo, name, address,suburb, telephone, distance);
		     sidebar.appendChild(sidebarEntry);
		     bounds.extend(point);  
		}
		
		map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
	});
}

function createMarker(point, chain, logo, name, address,suburb, telephone, distance) {    
	var tinyIcon = new GIcon();
	tinyIcon.image = iconpngDir;
	tinyIcon.shadow = iconshadowDir;
	tinyIcon.printImage = icongifDir;
	tinyIcon.mozPrintImage = iconmozDir;
	tinyIcon.iconSize = new GSize(39, 36);
	tinyIcon.shadowSize = new GSize(39, 36);
	tinyIcon.iconAnchor = new GPoint(4, 13);
	tinyIcon.infoWindowAnchor = new GPoint(24, 12);
	markerOptions = { icon:tinyIcon };
	      
	var marker = new GMarker(point, markerOptions); 
	var html = '<img src="'+logo+'"><br/>' + '<b>' + chain + '</b> | ' + name + '<br/>' + address + '<br/>' +telephone;
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html);
	});
	return marker;
}

function createSidebarEntry(marker, chain, logo, name, address, suburb, telephone, distance) {
	var div = document.createElement('div');
	var html = '<strong>' + chain + '</strong><br />' + suburb + ' (' + distance.toFixed(1) + ' km)';
	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;
}