//Ian Brennan
//Dietz & Watson
//Created: 11-20-2007
//Updated: 11-21-2007

submitted = false;
page = false; // global var
first_load = true;
gxml = false; // global for paging

global_markers = new Array; // global
global_locations = new Array; // global

var map; //global map var

//load map
function load_map(gxml,page) {
   if ( GBrowserIsCompatible() ) {		  
		//START GDownloadUrl
		GDownloadUrl(gxml + "&p=" + page, function(data) {  
			map = new GMap2(document.getElementById("map"));
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(0,0),0);
			//define vars for marker manager
			var gmarkersA = [];
			var gmarkersB = [];
			//parse xml data			
			var xml = GXml.parse(data); 
			var markers = xml.documentElement.getElementsByTagName("marker"); 
			var bounds = new GLatLngBounds();			
			//loop over xml file
			
			if  ( markers.length == 0 ) {
				map.setCenter(new GLatLng(37.926868, -97.294922));
				map.setZoom(3);
				$('page_nav').innerHTML = "";
				
				$('results_list_left').innerHTML = "Your search did not return any results, please try again.";
			}
			
			else {
				for (var i = 0; i < markers.length; i++) {
					var type = markers[i].getAttribute("type"); 
					var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); 				
					var marker = createMarker(point, markers[i], i); 
					
					//make different markers depending on type
					if ( type == "supermarket" ) {		
						gmarkersA.push(marker); 
					}
					else if ( type == "deli" ) {
						gmarkersB.push(marker)
					}
					//extend bounds in order to center map
					bounds.extend(point);
				}  //end loop over xml	
				
				// Put in the paging links
				$('page_nav').innerHTML = "";
				
				paging_prev = document.createElement("a");
				paging_prev.appendChild(document.createTextNode("Previous"));
				paging_prev.className = "prev";
				paging_prev.href = "#";
				paging_prev.onclick = function(){ prev_page(); return false; }
				$('page_nav').appendChild(paging_prev)
			
				separator = document.createTextNode(' | ');
				$('page_nav').appendChild(separator);		
			
				paging_next = document.createElement("a");
				paging_next.appendChild(document.createTextNode("Next"));
				paging_next.className = "next";
				paging_next.href = "#";
				paging_next.onclick = function(){ next_page(); return false; }
				$('page_nav').appendChild(paging_next)			
				//set center and zoom to encompass all
				map.setZoom(map.getBoundsZoomLevel(bounds));
				map.setCenter(bounds.getCenter());
				//add markers and refresh marker manager
				var mm = new GMarkerManager(map, {borderPadding:1});
				mm.addMarkers(gmarkersA,0,17);
				mm.addMarkers(gmarkersB,1,17);			
				mm.refresh();			
				//highlight results
				highlight_locations(); 
			}
			
			Effect.Appear('results');
			Effect.Fade('activity',{duration: 0.25, queue: 'end'});			
			submitted = false;
		}); //END GDownloadUrl		  	   
	} //end browser compat
} //end load


//test from apple
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')[1].id = 'overlay_tab';
		new_obj.id = 'overlay';
		document.body.appendChild(new_obj);
	}
	
	var my_window = $('overlay');
	
	// Attach the marker
	my_window.marker = marker;


	
	// Populate content
	var my_tab = $('overlay_tab');
	my_tab.innerHTML = marker.tabContent.address;
	
	//alert(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);
	
}	
//end test from apple






function position_window(my_window, marker){
	// Get the positioning right
	var vert_loc = parseInt(map_point.y) - my_window.offsetHeight - 10;
	my_window.style.top = vert_loc  + "px";
	var horiz_loc = parseInt(map_point.x) - 38;
	my_window.style.left = horiz_loc + "px";
	
	var pan_to = new GLatLng( marker.getPoint().lat(), marker.getPoint().lng() )
	map.panTo( pan_to );
	
} 


function close_window(){
	$('overlay').style.display = 'none';
	deactivate_marker( $("location_" + $('overlay').marker.internal_id) );
	return false;
}


//clear page
function clear_page(){
	//Effect.BlindUp('gmapwrap', {afterFinish: function(){$('gmapwrap').style.display = 'block';$('gmapwrap').style.visibility = 'hidden';}});			
	// Clear the locations list
	$('results_list_left').innerHTML = "";
	//$('results_list_right').innerHTML = "";	
}

// next and prev page
function next_page(){
	//Effect.BlindUp('gmapwrap', {afterFinish: function(){$('gmapwrap').style.display = 'block';$('gmapwrap').style.visibility = 'hidden';}});			
	Effect.Appear('activity',{duration: 0.25, queue: 'front'});
	Effect.Fade('results', {afterFinish: function(){
	// Clear the locations list
	clear_page();
	page++;
	first_load = false;
	load_map(gxml, page);
	}});
}

function prev_page(){
	//Effect.BlindUp('gmapwrap', {afterFinish: function(){$('gmapwrap').style.display = 'block';$('gmapwrap').style.visibility = 'hidden';}});			
	Effect.Appear('activity',{duration: 0.25, queue: 'front'});
	Effect.Fade('results', {afterFinish: function(){	
	// Clear the locations list
	clear_page();
	page--;
	first_load = false;
	load_map(gxml, page);	
	}});
}





//createmarker
function createMarker(point, xml_data, marknum) {
	//custom icons
	var iconBlue = new GIcon();
	iconBlue.image = 'http://www.dietzandwatson.com/v2/wtb/acme.png';
	iconBlue.shadow = 'http://www.dietzandwatson.com/v2/wtb/acme_shadow.png';
	iconBlue.iconSize = new GSize(42, 14);
	iconBlue.shadowSize = new GSize(55, 14);
	iconBlue.iconAnchor = new GPoint(6, 20);
	iconBlue.infoWindowAnchor = new GPoint(5, 1);
	var iconRed = new GIcon();
	iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
	iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
	iconRed.iconSize = new GSize(12, 20);
	iconRed.shadowSize = new GSize(22, 20);
	iconRed.iconAnchor = new GPoint(6, 20);
	iconRed.infoWindowAnchor = new GPoint(5, 1);
	var customIcons = [];
	customIcons["supermarket"] = iconBlue;
	customIcons["deli"] = iconRed;
	//define vars for markers
	var name = xml_data.getAttribute("name"); 
	var address = xml_data.getAttribute("address"); 
	var city = xml_data.getAttribute("city"); 
	var state = xml_data.getAttribute("state"); 
	var zip = xml_data.getAttribute("zip"); 
	var type = xml_data.getAttribute("type"); 
	var distance = xml_data.getAttribute("distance"); 	
	var marker = new GMarker(point, customIcons[type]);
	var html = "<b>" + name + "</b> <br/>" + address + "<br>" + city + ", " + state + " " + zip;	
	marker.internal_id = marknum;
	//add listeners to map
	
	marker.tabContent = new Object();
	marker.tabContent.address = html;
	
	GEvent.addListener(marker, 'do_click', function() { show_custom_info_window(marker); } );
	GEvent.addListener(marker, "click", function() {activate_marker( global_locations[marker.internal_id] ); } );	
	//create li
	var location = document.createElement("li");
	location.internal_id =  marknum;
	location.id = "location_" + marknum;
	var class_names = " "; // Need to create these...	
	// if its the top row
	if (marknum == 0 ){
		class_names += " first";
	}	
	Element.addClassName(location, class_names);	
	//create name
	var title = document.createElement("h4");
	title.appendChild(document.createTextNode(title));
	title.firstChild.nodeValue = unescape(name + " - " + distance + " mi");
	location.appendChild(title);	
	//create address
	var dispaddress = document.createElement("p");
	dispaddress.innerHTML =address + "<br /> " + city + ", " +  state + " " + zip;
	location.appendChild(dispaddress);		
	// if for left cloum
	if (marknum % 2 == 0){ 
		$('results_list_left').appendChild(location);	
	}
	else {
		$('results_list_left').appendChild(location);	
		//$('results_list_right').appendChild(location);	
	}		
	global_locations[location.internal_id] = location;	
	// Return marker for gmaps
	global_markers[marknum] = marker;
	
	return marker;
}

//set form submit
function set_search_form(){
	if (!$('search_form')) return false;
	$('search_form').onsubmit = get_search_results;
}

//do from search form
var get_search_results = function(){	
	if(!submitted) {	
		submitted = true;		
		Effect.Appear('activity',{duration: 0.25, queue: 'front'});		
		Effect.Fade('results', {afterFinish: function(){	
			gxml = $('search_form').getAttribute('remoteaction') + '?' + Form.serialize($('search_form'));
			$('results_list_left').innerHTML = '';
			//$('results_list_right').innerHTML = '';		
			page = 1;			
			load_map(gxml, page);
		}});
		
	}
	return false;
}

Event.observe (window,'load',set_search_form,false);

//load initial
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,'load',load_map_initial,false);		
Event.observe (window,'unload',GUnload,false); // Prevent memory leaks


//highlight li's
selected_location = false;
function highlight_locations(){
	var locations_left = $('results_list_left').getElementsByTagName('li');	
	for(i=0;i<locations_left.length;i++){
		var location = locations_left[i];
		// Hover
		location.onmouseover = function(){ Element.addClassName(this, 'hover') }
		location.onmouseout = function(){ Element.removeClassName(this, 'hover') }
		// Active
		location.onclick = function(){ 
			activate_marker(this);
		}		
	}
	
	/*
	var locations_right = $('results_list_right').getElementsByTagName('li');
	for(i=0;i<locations_right.length;i++){
		var location = locations_right[i];
		// Hover
		location.onmouseover = function(){ Element.addClassName(this, 'hover') }
		location.onmouseout = function(){ Element.removeClassName(this, 'hover') }
		// Active
		location.onclick = function(){ 
			activate_marker(this);
		}		
	}
	*/

}
Event.observe (window,'load',highlight_locations,false);


function activate_marker(element){
	if (selected_location == element){ return false; }
	Element.addClassName(element, 'selected'); 
	//marker.openInfoWindowHtml("test");
	GEvent.trigger(global_markers[element.internal_id], "do_click");
	if (selected_location){ Element.removeClassName(selected_location, 'selected'); } 
	selected_location = element; 
}
		
function deactivate_marker(element){
	Element.removeClassName(element, 'selected');
	selected_location = false;
}