submitted = false;

global_markers = new Array; // global
global_locations = new Array; // global

function addStore(point, marker_xml, marknum){
	//  Start the Gmaps actions //
	var icon = new GIcon(G_DEFAULT_ICON);
	icon.image = "http://images.apple.com/chde/retail/images/icons/letter_a-black.png";
	icon.iconSize = new GSize(21, 35);
	icon.iconAnchor = new GPoint(6, 21);
	icon.infoWindowAnchor = new GPoint(9, 5);
	var marker = new GMarker(point, icon);
	// Give the marker all of it's information
	marker.tabContent = new Object();
	marker.tabContent.address = "<div class=\"vcard\"><div class=\"hcard\">" + "<h3 class=\"fn n org\">" + unescape(marker_xml.getAttribute("name")) + "</h3>";
	marker.tabContent.address = marker.tabContent.address + "<span class=\"adr\"><span class=\"street-address\">" +  marker_xml.getAttribute("address") + "</span><span class=\"locality\">" + marker_xml.getAttribute("city") + "</span>, <span class=\"region\">" +  marker_xml.getAttribute("state") + "</span> <span class=\"postal-code\">" + marker_xml.getAttribute("zip") + "</span></span><span class=\"tel\">" + marker_xml.getAttribute("phone") + "</span></div></div>";
	marker.tabContent.address = marker.tabContent.address + "<p class='get_directions'><a href=\"#\" onclick=\"$('directions_subtab').style.display = 'block';$('gmap-directions').style.display = 'none';position_window($('overlay'), $('overlay').marker);$('to_addr').focus();\" id=\"gmap-directions\">Route berechnen</a></p>";
	marker.tabContent.address = marker.tabContent.address + "<p id='directions_subtab' style='display:none'>Startadresse:<br ><input id='to_addr' type='text' style='width:95%'><br ><button type='submit' class='cancel' onclick=\"$('directions_subtab').style.display = 'none';$('gmap-directions').style.display = 'inline';position_window($('overlay'), $('overlay').marker);\">Cancel</button><button type='submit' class='directions' onclick=\"submit_gmap_form($('to_addr').value,'" + marker_xml.getAttribute("address") + " , " + marker_xml.getAttribute("city") + ", " +  marker_xml.getAttribute("state") + " " + marker_xml.getAttribute("zip") + "');\">Get Directions</button></p>";

	marker.tabContent.services = "<p>" + marker_xml.getElementsByTagName("services")[0].firstChild.nodeValue + "</p>";
	// Add the click on tabs
	marker.internal_id = marknum;
	
	// use a custom action so that it can be activated through Gmaps or in the page
	GEvent.addListener(marker, "click_action", function() {
		show_custom_info_window(marker);
	});
	
	GEvent.addListener(marker, "click", function() {
		_activate_marker( global_markers[marker.internal_id] );
	});
	
	// Return marker for gmaps
	global_markers[marknum] = marker;
	return marker
}

first_load = true;
map = false; // global
function load_map(xml_location, start) {

	if (GBrowserIsCompatible()) {
	// Initialize the map
		Element.show('gmap', 'map_legend');
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GScaleControl());
		
		// Power the store locations through XML
		//GDownloadUrl(xml_location, 
		(function() {
			var xml = GXml.parse(xml_location);
	
			if(xml.getElementsByTagName("store_xml").length > 0)
			{
				// Set the center of the map
				var default_location = xml.documentElement.getElementsByTagName("default_location")[0];
				map.setCenter(new GLatLng(default_location.getAttribute("lat"), default_location.getAttribute("lng")));
	
				// Set the markers
				var markers = xml.documentElement.getElementsByTagName("store");
				var bounds = new GLatLngBounds;
				
				// Figure out start and end
				// start from function call
				if (markers.length <= 8 || (start + 8) >= markers.length){ end = markers.length; }else{ end = start + 8; }
				var marknum = 0;
				for (var i = start; i < end; i++) {
					var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
					var marker = addStore(point, markers[i], marknum++);
					
					// Add the point & extend the neccecary bounds
					map.addOverlay(marker);
					if(i===0) {
						show_custom_info_window(marker);
					}
					bounds.extend(point);						
				}
														
				// Set the zoom level & center to encompass all
				map.setCenter(new GLatLng( (bounds.getSouthWest().lat() + bounds.getNorthEast().lat())/2, (bounds.getSouthWest().lng() + bounds.getNorthEast().lng())/2));
				map.setZoom(15);
				//Benoit: no tag with id="activity" for now...
				//Effect.Fade('activity',{duration: 0.25, queue: 'front'});						
			}				
			
			submitted = false;
			
		})();
		//); // end GDownloadUrl
		
	} else { // Browser is not compatable
	}
}
		
function load_map_initial() {
	first_load = false;
	if (GBrowserIsCompatible()) {
// Initialize the map
		Element.show('gmap', 'map_legend');
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GScaleControl());
		map.setCenter(new GLatLng(37.926868, -97.294922));
		map.setZoom(3);
	}
}
		
Event.observe (window,'unload',GUnload,false); // Prevent memory leaks
		
/**** Other Functions ****/

selected_location = false;
function highlight_locations(){
	var locations = $('results_list').getElementsByTagName('li');
	for(i=0;i<locations.length;i++){
		var location = locations[i];
		// Hover
		location.onmouseover = function(){ Element.addClassName(this, 'hover') }
		location.onmouseout = function(){ Element.removeClassName(this, 'hover') }
		// Active
		location.onclick = function(){ 
			activate_marker(this);
		}
	}
}

function _activate_marker(marker){
	GEvent.trigger(marker, "click_action");
}
		
function activate_marker(element){
	if (selected_location == element){ return false; }
	Element.addClassName(element, 'selected'); 
	GEvent.trigger(global_markers[element.internal_id], "click_action");
	if (selected_location){ Element.removeClassName(selected_location, 'selected'); } 
	selected_location = element; 
}
		
function deactivate_marker(element){
	Element.removeClassName(element, 'selected');
	selected_location = false;
}
		
		
		
function change_tab(element, type){
	var my_window = $('overlay');
	var my_tab = $('overlay_tab');
	var alltabs = my_window.getElementsByTagName('ul')[0];
	// Unselect tabs
	var tabs = element.parentNode.parentNode.getElementsByTagName("a");
	for(i=0;i<tabs.length;i++){
		tab = tabs[i];
		Element.removeClassName(tab, 'selected');
	}
	// Select tab
	Element.addClassName(element, 'selected');
	
	if (type == 'services'){
		//bring second tab forward
		Element.removeClassName(alltabs,'tabs');
		Element.addClassName(alltabs,'tabs2');
		my_tab.innerHTML = my_window.marker.tabContent.services;
	}else{
		//bring first tab forward
		Element.removeClassName(alltabs,'tabs2');
		Element.addClassName(alltabs,'tabs');
		my_tab.innerHTML = my_window.marker.tabContent.address;
	}
	position_window(my_window, my_window.marker);
	
	return false;
}

function close_window(){
	$('overlay').style.display = 'none';
	deactivate_marker( $("location_" + $('overlay').marker.internal_id) );
	return false;
}
		
function show_custom_info_window(marker){
			
	map_point = map.fromLatLngToDivPixel(marker.getPoint());
	
	if (!$('overlay')){ // need to create the overlay inside the map pane
		var new_obj = document.createElement("div");
		new_obj.style.display = 'none';
		new_obj.innerHTML = $('overlay_temp').innerHTML;
		new_obj.getElementsByTagName('div')[0].id = 'overlay_tab';
		new_obj.id = 'overlay';
		document.body.appendChild(new_obj);
	}
	
	var my_window = $('overlay');
	
	// Attach the marker
	my_window.marker = marker;

	// make sure the first tab is in front
	var alltabs = my_window.getElementsByTagName('ul')[0];
	Element.removeClassName(alltabs,'tabs2');
	Element.addClassName(alltabs,'tabs');

	// Unselect tabs
	var tabs = alltabs.getElementsByTagName("a");
	for(i=0;i<tabs.length;i++){
		tab = tabs[i];
		Element.removeClassName(tab, 'selected');
	}
	// Select tab
	Element.addClassName(tabs[0], 'selected');
	
	// Populate content
	var my_tab = $('overlay_tab');
	my_tab.innerHTML = marker.tabContent.address;
	
	// Stick it to the map
	map.getPane(G_MAP_MARKER_PANE).appendChild(my_window);
	my_window.style.display = 'block';
	
	position_window(my_window, marker);
	
}	
		
function position_window(my_window, marker){
	// Get the positioning right
	var vert_loc = parseInt(map_point.y) - my_window.offsetHeight - 15;
	my_window.style.top = vert_loc  + "px";
	var horiz_loc = parseInt(map_point.x) - 50;
	my_window.style.left = horiz_loc + "px";
	
	var pan_to = new GLatLng( marker.getPoint().lat(), marker.getPoint().lng() )
	map.panTo( pan_to );
	
} 
		
function submit_gmap_form(from_addr, to_addr){
	var query = "from: " + from_addr + " to: " + to_addr;
	$('gmaps_form_query').value = query;
	$('gmaps_form').submit();
	return false;
}