var map = null;
var geocoder = null;
var points = new Object();
var pointsObj = new Object();
var pointsDetails = new Object();
var icon = null;
var centered = null;
var firstid = null;
var minLat = null;
var maxLat = null;
var minLon = null;
var maxLon = null;
var enableSteetView = false;

function setup()
{
	if( GBrowserIsCompatible() )
	{
		map = new GMap2( document.getElementById( "__map__" ) );
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.enableDoubleClickZoom();
		geocoder = new GClientGeocoder();
		icon = new GIcon();
		icon.image = baseUrl + "assets/images/icons/marker.png";
		icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
		icon.iconSize = new GSize(12, 20);
		icon.shadowSize = new GSize(22, 20);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);
		
		for( var pointID in pointsObj )
		{
			var point = new GLatLng( pointsObj[pointID].lat, pointsObj[pointID].lon );
			
			points[pointID] = point;
		}
	}
}
function addStore( id, lat, lon, details )
{
	if( firstid == null )
	{
		firstid = id;
		minLat = lat;
		maxLat = lat;
		minLon = lon;
		maxLon = lon;
	}
	
	// Check the lats and longs...
	if( lat < minLat ) minLat = lat;
	if( lat > maxLat ) maxLat = lat;
	if( lon < minLon ) minLon = lon;
	if( lon > maxLon ) maxLon = lon;
	
	//if( geocoder )
	//{
		//var point = new GLatLng( lat, lon );
		pointsObj[id] = {lat:lat,lon:lon};
		pointsDetails[id] = {
			details: details
		};
		//point;
		//if( centered == null ) // Only center the first point...
		//{
		//	map.setCenter(point, 13);
		//	centered = 1;
		//}
	//}
}

function onPageLoad()
{
	setup();
	//	pageloaded(); // call the main tpl onload
	// load tips for classname .showtooltip
	/*
	var myTips = new Tips($$('.showtooltip'), {
		maxTitleChars: 25,
		onShow: function(tip){
					tip.effects({duration: 300, transition: Fx.Transitions.quadIn}).custom({'opacity': [0, 1]});
				},
		onHide: function(tip){
					tip.effects({duration: 200, transition: Fx.Transitions.quadOut}).custom({'opacity': [1, 0]});
				},
		offsets: {x :10, y:10}
	});
	*/
	if(stateSearch)
		var zoomLevel = 6;
	else
		var zoomLevel = 11;
	
	//map.setCenter( points[firstid], zoomLevel );
	
	var minLL = new GLatLng(minLat, minLon);
	var maxLL = new GLatLng(maxLat, maxLon);
	var centerLL = new GLatLng( minLat + ( (maxLat - minLat) / 2 ), minLon + ( (maxLon - minLon) / 2 ) );
	var bounds = new GLatLngBounds( minLL, maxLL );
	map.setCenter( centerLL, map.getBoundsZoomLevel( bounds ) );
	for( var pointid in points )
	{
		map.addOverlay( createMarker( pointid, icon ) );
	}
	
}

function createMarker( id, customIcon )
{
	markeroptions = { icon:customIcon };
	var marker = new GMarker( points[id], markeroptions );
	
	GEvent.addListener(marker, "click", function () {
		marker.openInfoWindowHtml( fillInfoWindow( id ) );
	});
	
	return marker;
	
}

function fillInfoWindow( id )
{
	var store = pointsDetails[id].details;
	var html = '<div id="mapInfoWindow" align="left">';
	
	html += '<a href="' + baseUrl + 'My-Mitre10/View/id/' + id + '"><h3>' + store['name'] + '</h3></a>';
	html += store['address1'] + ', ' + store['city'] + ', ' + store['state'] + '<br />';
	html += '<strong>Phone:</strong> ' + store['phone'] + '<br />';
	if( !stateSearch ) html += '<strong>Distance:</strong> ~' + store['distance'] + 'km / ~' + store['travel_time'] + 'min';
	if( store['travel_time'] > 1 )
		html += 's';
	
	html += '<br /><br />';
	
	html += '<a href="#map" onclick="centerOn(' + id + ')">Show on map</a><br />';
	html += '<a href="' + baseUrl + 'My-Mitre-10/SetLocal/id/' + id + '">Set as your local store</a><br />';
	html += '<a href="http://maps.google.com.au/maps?f=d&saddr=' + store['search_term'] + '&daddr=' + pointsObj[id].lat + ', ' + pointsObj[id].lon + '&hl=en" target="_blank"">Get Directions</a><br />';
	if(enableSteetView)
		html += '<a href="javascript:showStreetView(' + id + ');">Street View</a><br />';
	
	html += '</div>';
	
	if(enableSteetView)
		html += '<div id="mapInfoWindowStreetView"></div>';
		
	return html;
}

function showStreetView(id)
{
	
	options = {
		latlng: points[id]
	}
	var streetView = new GStreetviewPanorama($('mapInfoWindowStreetView'), options);
	
	$('mapInfoWindow').setStyle('display','none');
	$('mapInfoWindowStreetView').setStyle('display','block');
}

function centerOn( id )
{
	map.closeInfoWindow();
	map.setZoom( 15 );
	map.panTo( points[id], 1000 );
}