var businesses = [
{
name: 'Alcone Marketing Group - Irvine, CA',
street: '4 Studebaker',
city: 'Irvine',
state: 'CA',
zip: '92618',
country: 'USA',
phone: '(949) 770-4400',
lat: 33.653393, lng: -117.713085
},
{
name: 'Alcone Marketing Group - San Francisco, CA',
street: '1596 Howard Street',
city: 'San Francisco',
state: 'CA',
zip: '94103',
country: 'USA',
phone: '(415) 856-8120',
lat: 37.771897, lng: -122.416943
},
{
name: 'Alcone Marketing Group - Darien, CT',
street: '320 Post Road',
city: 'Darien',
state: 'CT',
zip: '06820',
country: 'USA',
phone: '(203) 656-3555',
lat: 41.086789, lng: -73.459471
}
];

/**
* The map object, null until script loads in.
* @type {GMap2}
*/
var map = null;	 

/**
* The bounds of the markers once loaded in.
* @type {GLatLngBounds}
*/
var bounds = null;

/**
* The marker with currently opened info window.
* @type {GMarker}
*/
var currentMarker = null;

/**
* The dom element that the map is loaded into
* @type {Element}
*/
var mapDiv = null;

/**
* The dom element that everything is a child of.
* @type {Element}
*/
var containerDiv = null;

/**
* Position of mouse click (clientX) on map div when in static mode.
* @type {Number}
*/
var clickedX = 0;

/**
* Position of mouse click (clientY) on map div when in static mode.
* @type {Number}
*/
var clickedY = 0;

/**
* Indicates whether we've created a script tag with Maps API yet
* @type {Boolean}
*/
var isLoaded = false;

/**
* Called after script is asynchronously loaded in.
* Creates the GMap2, GMarker objects and performs actions according to 
* what the user did to trigger the map load (search, zoom, click etc).
*/
function loadMap() {
	if (GBrowserIsCompatible()) {
		mapDiv.style.background = '#fff';
		mapDiv.style.cursor = '';
		map = new GMap2(mapDiv, {logoPassive: true});
		bounds = new GLatLngBounds();
		for (var i = 0; i < businesses.length; i++) {
			bounds.extend(new GLatLng(businesses[i].lat, businesses[i].lng));
		}

	var latSpan = bounds.toSpan().lat();
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

	// The static map server gives markers more space when calculating
	// bounds and zoom level, so sometimes the API will give a higher
	// zoom level than was used by the static map server.
	// The .98 value is just a guess right now, may need tweaking.

	var newBounds = map.getBounds();
	var newLatSpan = newBounds.toSpan().lat();

	if (latSpan/newLatSpan > .90) {
		map.zoomOut();
	}

	for (var i = 0; i < businesses.length; i++) {
		var marker = createMarker(i);
		var latlng = marker.getLatLng();
		var pixel = map.fromLatLngToDivPixel(latlng);
		if (Math.abs(pixel.x - clickedX) < 12 && Math.abs(pixel.y - clickedY) < 20) {
		//GEvent.trigger(marker, 'click');
		}
		map.addOverlay(marker);

		// Add map controls
		map.addControl(new GLargeMapControl());
 
		var mapControl = new GMapTypeControl();
		map.addControl(mapControl);
		}
	}
}

/**
* Zooms to the viewport that fits all the markers.
*/
function zoomToAll() {
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}

/**
* Creates a marker for the given business.
* @param {Number} ind
* @return {GMarker}
*/
function createMarker(ind) {
	var business = businesses[ind];
	var marker = new GMarker(new GLatLng(business.lat, business.lng));
	GEvent.addListener(marker, 'click', function() {
		marker.html = ['<b>', business.name, '<\/b><br>', business.street, '<br> ', business.city, ',', business.state, ' ', business.zip, '<br>', business.phone, '<br><br>', 'Get directions: ', '<a target="_blank" ', 'href="http://maps.google.com/maps?saddr=&daddr=', formatAddressForMaps(business), '">to here<\/a> - ', '<a target="_blank" ', 'href="http://maps.google.com/maps?saddr=', formatAddressForMaps(business), '&daddr=', '"> from here <br> ', '<a href="javascript:zoomToAll()">View all locations<\/a>'].join('');
		currentMarker = marker;
		marker.openInfoWindowHtml(marker.html);
});

return marker;
}

/**
* Formats business info into a URL-friendly version for maps url.
* @param {Object} business
* @return {String}
*/
function formatAddressForMaps(business) {
	var address = business.street + ' ' + business.city + ' ' + business.state + ' ' + business.zip;
	return escape(address.replace(' ', '+'));
}

/**
* Convenience function for creating an element and assigning an id to it.
* @param {String} elementType
* @param {String} id
* @return {Element} 
*/
function _cel(elementType, id) {
	var element = document.createElement(elementType);
	element.id = id;
	return element;
}

/**
* Loads in the Maps API script. This is called after some sort of user interaction.
* The script loads asynchronously and calls loadMap once it's in.
*/
function loadScript() {
	if (!isLoaded) {
		isLoaded = true;
		var div = document.createElement('div');
		div.className = 'message';
		div.innerHTML = 'Loading...';
		div.style.left = (500/2 - 53) + 'px';
		div.style.top = 500/2 + 'px';
		mapDiv.appendChild(div);
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = 'http://maps.google.com/maps?file=api&v=2' + '&async=2&callback=loadMap&key=ABQIAAAAqwMosIOdjFScy1DYbKAfIBSqt7d1Oc8YJnfk9IalKZ7IjvqBABQILLx75qewRr-BkNecxtSi1H3xhg';
		document.body.appendChild(script);
	}
}

/**
* Sets up the gadget by setting CSS and click events.
*/
function loadMapGadget() {
	containerDiv = document.getElementById('container');
	mapDiv = document.getElementById('map_canvas');

	mapDiv.onclick = function (e) {
		clickedX = (window.event && window.event.offsetX) || e.clientX;
		clickedY = (window.event && window.event.offsetY) || e.clientY;
		loadScript();
	};

	mapDiv.style.cursor = 'pointer';

	var urlString = ['http://maps.google.com/staticmap?markers='];
	var markerString = [];
	for (var i = 0; i < businesses.length; i++) {
		markerString.push(businesses[i].lat + ',' + businesses[i].lng + ',red');
	}
	urlString.push(markerString.join('|'));
	urlString.push('&size=500x340');
	urlString.push('&key=ABQIAAAAqwMosIOdjFScy1DYbKAfIBSqt7d1Oc8YJnfk9IalKZ7IjvqBABQILLx75qewRr-BkNecxtSi1H3xhg');
	mapDiv.style.background = 'url(\'' + urlString.join('') + '\')';
}