//load and unload the map
var map; var locale = 'com'; var markers = new Array(); var markersHTML = new Array(); var hoverMarkers = new Array();
var directions; var outputDir;
GEvent.addDomListener(window,'load',loadGeoCoder);
GEvent.addDomListener(window,'unload',GUnload);

function standardizeEvent(evt){
	if(!evt) evt = window.event;
	if(evt.srcElement) evt.target = evt.srcElement;
	if(!evt.stopPropagation) evt.stopPropagation = function(){this.cancelBubble = true};
	if(!evt.preventDefault) evt.preventDefault = function(){;this.returnValue = false;};
	return evt;
}		

//check for google maps compatibility, if so, load xml
function loadGeoCoder(){
	if(!GBrowserIsCompatible()){
		alert('Sorry, the Google Maps API is not compatible with this browser.');
		return;
	}else{
		createMap();
	}
}

function zoomAndCenter(response){
	map.setZoom(
		map.getBoundsZoomLevel(
			new GLatLngBounds(
				new GLatLng(directions.getBounds().getSouthWest().lat(),directions.getBounds().getSouthWest().lng()),
				new GLatLng(directions.getBounds().getNorthEast().lat(),directions.getBounds().getNorthEast().lng())
			)
		) - 1
	);
	
	/*map.setCenter(
		new GLatLng(
			(directions.getBounds().getSouthWest().lat() + directions.getBounds().getNorthEast().lat()) / 2,
			(directions.getBounds().getSouthWest().lng() + directions.getBounds().getNorthEast().lng()) / 2
		)
	);*/
	
	$('#dirDiv').css('width','900px');
	$('#dirDiv').css('overflow','auto');
	$('#dirDiv').css('display','block');		
}

//create map icon and sidebar
function createMap(){
	
	map = new GMap2(document.getElementById('map'));
	map.setCenter(new GLatLng(13,-21),2);
	map.addControl(new GMapTypeControl());
	map.addControl(new GLargeMapControl());
	
	var coder = new GClientGeocoder();
	var addressForm = document.getElementById('addressForm');
	var resultDiv = document.getElementById('resultDiv');
	var dirDiv = document.getElementById('dirDiv');
	
	directions = new GDirections();
	GEvent.addListener(directions, "load", zoomAndCenter);
	outputDir = new GDirections(map,dirDiv);
	GEvent.addListener(outputDir, "load", zoomAndCenter);

	GEvent.addDomListener(addressForm,'submit', function(evt){
		var cb = function(response){
			if(response.Status.code != G_GEO_SUCCESS){ alert('failure'); return; }
			var myLat = response.Placemark[0].Point.coordinates[1];
			var myLng = response.Placemark[0].Point.coordinates[0];
			var marker = new GMarker(new GLatLng(myLat,myLng));
			
			map.addOverlay(marker);	
			map.setCenter(marker.getPoint());
			map.setZoom(7);
			
			GEvent.addListener(map,'infowindowclose',function(){
				for ( var i in hoverMarkers ) { hoverMarkers[i].hide(); }
				//map.panTo(marker.getPoint());
			});

			
			$.post( 
				"findClosestUS.php", 
				{ inplat: myLat, inplng: myLng, prodtype: addressForm.producttype.value }, 
				function(jsonData){
	        		showClosestResults(map,jsonData,myLat,myLng,addressForm.addrInput.value);
	    		}, 
	    		"json"
		    );
		}

		evt = standardizeEvent(evt);
		evt.preventDefault();
		map.clearOverlays();
		coder.getLocations(addressForm.addrInput.value,cb);
	});
}
		
function createMarkerPoint(point,html,cnt){
	var icon = new GIcon(G_DEFAULT_ICON);
	icon.image = 'http://www.plastival.com/images/mapicons/darkblue0' + cnt + '.png';
	icon.iconSize = new GSize(27, 27);

	var marker1 = new GMarker(point,icon);
	map.addOverlay(marker1);

	var hoverIcon = new GIcon(G_DEFAULT_ICON);
	hoverIcon.image = 'http://www.plastival.com/images/mapicons/green0' + cnt + '.png';
	hoverIcon.iconSize = new GSize(27, 27);	
	
	var hoverMarker = new GMarker(marker1.getPoint(),{clickable:false, icon:hoverIcon});
	map.addOverlay(hoverMarker); // hover
	hoverMarker.hide();

	GEvent.addListener(marker1,'mouseover',function(){
		marker1.openInfoWindowHtml(html);
		hoverMarker.show();
	});
	
	markers[cnt] = marker1;
	hoverMarkers[cnt] = hoverMarker;
	markersHTML[cnt] = html;
}


function showClosestResults(map,jsonData,myLat,myLng,addrInput){
	var htmlContent = '<table id="resultTable" class="resTable"><tr class="resHead"><td class="center">Description</td><td class="center">Address</td><td class="center">City</td><td class="center">State</td><td class="center">Zip Code</td><td class="center">Telephone</td><td class="center">Fax</td><td class="center">Map</td></tr>';
	var ralt = 0;
	var cnt = 1;
	
	for ( var i in jsonData ) {
		clickPrintFunction = 'getPrintDirections("' + addrInput + '","' + jsonData[i].address + ', ' + jsonData[i].zip + '");';

		var mypoint = new GLatLng(jsonData[i].lat,jsonData[i].lng);
		
		var markerHTML  = '<div style="text-align:left;font-size:12px;font-face:tahoma">';
		markerHTML += '<b>' + jsonData[i].description + '</b><br/>';
		markerHTML += jsonData[i].address + '<br/>';
		markerHTML += jsonData[i].city + ',' + jsonData[i].state + ' ' + jsonData[i].zip + '<br/>';
		markerHTML += '<b>Phone:</b> ' + jsonData[i].phone + '<br/>';
		markerHTML += '</div>';
		
		createMarkerPoint(mypoint, markerHTML, cnt);
		
		ralt = (ralt == 0) ? ralt = 1 : ralt = 0;
		
		htmlContent += '<tr class="r' + ralt + '" onMouseOver="this.className=\'highlight\'" onMouseOut="this.className=\'r' + ralt + '\'">';
		htmlContent += '<td title="(click to view on map)" align="left"><img src="http://www.plastival.com/images/mapicons/darkblue0' + cnt + '.png" height="20" widt="20" /> ' + jsonData[i].description + '</td>';
		htmlContent += '<td title="(click to view on map)" align="left">' + jsonData[i].address + '</td>';
		htmlContent += '<td title="(click to view on map)" align="left">' + jsonData[i].city + '</td>';
		htmlContent += '<td title="(click to view on map)" class="center">' + jsonData[i].state + '</td>';
		htmlContent += '<td title="(click to view on map)" class="center">' + jsonData[i].zip + '</td>';
		htmlContent += '<td title="(click to view on map)" class="center">' + jsonData[i].phone + '</td>';
		htmlContent += '<td title="(click to view on map)" class="center">' + jsonData[i].fax + '</td>';
		htmlContent += '<td title="(click to view on map)" class="center" style="width:60px">';
		htmlContent += '<img id="mapimg' + i + '" class="icon" src="images/mapicons/map.png" onclick=\''+clickPrintFunction+'\' />';
		htmlContent += '</td>'; 
		htmlContent += '</tr>';
		
		cnt++;
	}
	htmlContent += '</table>';

	directions.load('from:' + addrInput + ' to:' + jsonData[cnt-2].address + ', ' + jsonData[cnt-2].zip);
	
	$('#resultDiv').html(htmlContent);	
	
	cnt = 1;
	$('#resultTable').find('tr:gt(0)').each(function() { 
		$(this).bind("click", {cnt: cnt}, function(e){
			for ( var i in hoverMarkers ) { hoverMarkers[i].hide(); }
			markers[e.data.cnt].openInfoWindowHtml(markersHTML[e.data.cnt]);
			hoverMarkers[e.data.cnt].show();
		});
		
		cnt++;
	});	
}

function getDirections(addrInput,toAddr) {
	toAddr = toAddr.replace(/\s/g,"+");
	addrInput = addrInput.replace(/\s/g,"+");
	var dirQuery = 'from:' + addrInput + ' to:' + toAddr;
	outputDir.load(dirQuery);
	$('#dirDiv').css('height','200px');
}

function getPrintDirections(addrInput,toAddr) {
	toAddr = toAddr.replace(/\s/g,"+");
	addrInput = addrInput.replace(/\s/g,"+");
	var mapLink = 'http://maps.google.' + locale + '/maps?f=d&source=s_d&saddr=' + addrInput + '&daddr=' + toAddr;
	window.open ( mapLink ); 
}