var map;
var geocoder = new GClientGeocoder();
var bounds = new GLatLngBounds();
var directionsPanel;
var directions;
var CITYSEARCH_USA = "citysearch_usa.xml";
var markers = [];

var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(35, 35);
baseIcon.shadowSize = new GSize(53, 35);
baseIcon.iconAnchor = new GPoint(16, 35);
baseIcon.infoWindowAnchor = new GPoint(17, 4);
baseIcon.infoShadowAnchor = new GPoint(17, 25);
baseIcon.shadow = "shadow.png";

var icon = new GIcon(baseIcon);		
var pins = [];
pins = ["csmarker1.png","csmarker2.png","csmarker3.png","csmarker4.png","csmarker5.png","csmarker6.png","csmarker7.png","csmarker8.png","csmarker9.png","csmarker10.png"];


var cityIcon = new GIcon();
	cityIcon.image = "csicon.png";
	cityIcon.shadow = "csshadow.png";
	cityIcon.iconSize = new GSize(35, 35);
	cityIcon.shadowSize = new GSize(59, 35);
	cityIcon.iconAnchor = new GPoint(28, 35);
	cityIcon.infoWindowAnchor = new GPoint(17, 17);
	cityIcon.infoShadowAnchor = new GPoint(35, 35);

function directions_collapse(){
	document.getElementById('div_directions').style.width = '12px';
	document.getElementById('div_directions').style.height = '12px';
	document.getElementById('div_directions').style.overflow = 'hidden';
	document.getElementById("div_search").style.visibility = "visible";
	document.getElementById('icon_collapse').innerHTML = '<a href="#" onclick="directions_expand()"><img src="15_expand.png" border="0" /></a>';
}

function directions_expand(){
	document.getElementById('div_directions').style.width = '310px';
	document.getElementById('div_directions').style.height = '590px';
	document.getElementById('div_directions').style.overflow = 'auto';
	document.getElementById("div_search").style.visibility = "hidden";
	document.getElementById('icon_collapse').innerHTML = '<a href="#" onclick="directions_collapse()"><img src="15_collapse.png" border="0" /></a>';
}

function clearDirections(){
	directions.clear();
	document.getElementById("div_directions").style.visibility = "hidden";
	document.getElementById("div_search").style.visibility = "visible";
}
		
function drawDirections(start_address, stop_address){
	map.closeInfoWindow();
	document.getElementById("div_search").style.visibility = "hidden";
	document.getElementById("div_directions").style.visibility = "visible";
	document.getElementById("div_directions").innerHTML = '<div id="icon_collapse"><a href="#" onclick="directions_collapse()"><img src="15_collapse.png" border="0" /></a></div><P align="center"><input type="button" value="Clear Directions" onclick="clearDirections()"></P>';
	directions.load(start_address+" to "+stop_address);			
}

function toHere(stop_address){
	document.getElementById("directions").innerHTML='<form onsubmit="return false"><input name="from_address" type="text" size="18"><span> to here</span> <input type="button" value="Get Directions" onclick="drawDirections(this.form.from_address.value,\''+stop_address+'\')"></form>';
}

function fromHere(start_address){
	document.getElementById("directions").innerHTML='<form onsubmit="return false"><span>From here to </span><input name="to_address" type="text" size="18"> <input type="button" value="Get Directions" onclick="drawDirections(\''+start_address+'\',this.form.to_address.value)"></form>';
}

function showCity(city_addr) {
  geocoder.getLatLng(city_addr, function(point) {
	  map.setCenter(point,10);
	});
}

function showInfoWin(i, address, title, link, desc, channelTitle, imageUrl){
	markers[i].openInfoWindowHtml('<div style="width: 360px;" align="left"><table align="center" border="0" cellspacing="0" cellpadding="5" width="360"><tr><td colspan="2" align="center"><a href="'+link+'" target="_blank">'+unescape(title)+'</a></td></tr><tr><td><IMG border="0" SRC="'+imageUrl+'"></td><td valign="top"><span>'+unescape(desc)+'</span></td></tr><tr><td colspan="2" align="center"><div id="directions"><span>Get directions: </span><a href="#" onclick="toHere(\''+address+'\')">to here</a> - <a href="#" onclick="fromHere(\''+address+'\')">from here</a></div></td></tr></table></div>');
}

function zoomcenterMap(){
	var center = bounds.getCenter();
	var newZoom = map.getBoundsZoomLevel(bounds);
	if (map.getZoom() != newZoom){
		map.setCenter(center, newZoom);
	}else{
		map.panTo(center);
	}
}

function addCityPin(index,city_addr, city_name, city_data, city_lat, city_lng) {
	if(index != 0) {
		var marker = new GMarker(new GLatLng(city_lat, city_lng), {icon: cityIcon, title: city_name});
		map.addOverlay(marker);
		GEvent.addListener(marker, "click", function() {
			document.getElementById("select_city").selectedIndex = index;
			marker.openInfoWindowHtml('<b>'+city_addr+'</b><br><br><div id="info_category"></div><br><div id="info_type"><br /><br /><br /></div>');
			loadinfo_category(city_data);
		});
	}
}

function load_cityPins(url) {
	map.clearOverlays();
	GDownloadUrl(url, function(data, responseCode) {
	  var xml = GXml.parse(data);
	  var city = xml.documentElement.getElementsByTagName("city");
	  for (var i = 0; i < city.length; i++) {
		var city_name = city[i].getAttribute("name");
		var city_url = city[i].getAttribute("data");
		var city_addr = city[i].getAttribute("address");
		var city_lat = city[i].getAttribute("lat");
		var city_lng = city[i].getAttribute("lng");
		addCityPin(i,city_addr, city_name, city_url, city_lat, city_lng);
	  }
	});	
}

function addFeedPin(i,address, title, link, desc, channelTitle, imageUrl) {
  geocoder.getLatLng(address, function(point) {
	  if (point) {
		icon.image = pins[i];
		markers[i] = new GMarker(point,{icon:icon, title:title});
		map.addOverlay(markers[i]);
		bounds.extend(point);
		zoomcenterMap();
		GEvent.addListener(markers[i], "click", function() {
			markers[i].openInfoWindowHtml('<div style="width: 360px;" align="left"><table align="center" border="0" cellspacing="0" cellpadding="5" width="360"><tr><td colspan="2" align="center"><a href="'+link+'" target="_blank">'+unescape(title)+'</a></td></tr><tr><td><IMG border="0" SRC="'+imageUrl+'"></td><td valign="top"><span>'+unescape(desc)+'</span></td></tr><tr><td colspan="2" align="center"><div id="directions"><span>Get directions: </span><a href="#" onclick="toHere(\''+address+'\')">to here</a> - <a href="#" onclick="fromHere(\''+address+'\')">from here</a></div></td></tr></table></div>');
		});
	  }
	}
  );
}

function load_pins(rssUrl, category_index) {
	document.getElementById('div_ad').innerHTML = "";
	document.getElementById('div_feed').innerHTML="<div style='margin-left:2em'><img src='20_loading_icon.gif' border='0' /> loading...</div>";
	var feed = new google.feeds.Feed(rssUrl);
	feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
	feed.setNumEntries(10);
	feed.load(function(result) {
		map.clearOverlays();
		document.getElementById('div_feed').innerHTML="<div id='div_itemfeed' style='margin-left:2em'></div>";
		document.getElementById('span_type').innerHTML = "";
		if(rssUrl == "") {
		} else
			if (!result.error) {
				var channel = result.xmlDocument.getElementsByTagName("channel");
				var channelTitle = channel[0].getElementsByTagName("title")[0].firstChild.nodeValue;
				var channelLink = channel[0].getElementsByTagName("link")[0].firstChild.nodeValue;
				var imageUrl = channel[0].getElementsByTagName("url")[0].firstChild.nodeValue;
				var items = result.xmlDocument.getElementsByTagName("item");
				var feed_html = '<center><img src="'+imageUrl+'" border="0"><br /><br /><div align="left" style="width:280px;border: 1px solid #eebb44"><div style="padding:10px;align:center;background:#fff0bb"><a href="'+channelLink+'">'+channelTitle+'</a></div>';
				for (var i = 0; i < items.length; i++) {
					var titleElement = items[i].getElementsByTagName("title")[0];
					var title = titleElement.firstChild.nodeValue;
					var linkElement = items[i].getElementsByTagName("link")[0];
					var link = linkElement.firstChild.nodeValue;
					var descElement = items[i].getElementsByTagName("description")[0];
					var desc = descElement.firstChild.nodeValue;
					var desc_length = desc.length;
					var addr_end = 0;
					var c = 0;
					var first_time = 0;
					for (var j=0;j<desc_length;j++){
						if (c == 1 && first_time == 0) {
							addr_end = j+3;
							first_time = 1;
						}	
						if (c < 3) {
							if (desc.charAt(j) == ',') c++;
						}								
						else if (c == 3) {
							c++;
							addr_end = j-1;
						}
					}
					var address = desc.substring(0,addr_end);//document.getElementById('debug').innerHTML += address + '</br>';//alert(address);
					addFeedPin(i,address, title, link, desc, channelTitle, imageUrl);
					bounds = new GLatLngBounds();
					feed_html += '<div style="background:#ffffff;border-top:1px dashed #eebb44;width:100%" onmouseover="this.style.background=\'#B5DCDF\';showInfoWin(\''+i+'\', \''+address+'\', \''+escape(title)+'\', \''+link+'\', \''+escape(desc)+'\', \''+channelTitle+'\', \''+imageUrl+'\');" onmouseout="this.style.background=\'#ffffff\';" onclick="showInfoWin(\''+i+'\', \''+address+'\', \''+escape(title)+'\', \''+link+'\', \''+escape(desc)+'\', \''+channelTitle+'\', \''+imageUrl+'\')"><table><tr><td align="right"><img src="csmarker'+(i+1)+'.png" width="25" height="25"></td><td><a href="#" onclick="showInfoWin(\''+i+'\', \''+address+'\', \''+escape(title)+'\', \''+link+'\', \''+escape(desc)+'\', \''+channelTitle+'\', \''+imageUrl+'\')" title="'+address+'">'+title+'</a></td></tr></table></div>';
				}
				feed_html += '</div></center>';
				document.getElementById('div_feed').innerHTML= feed_html;
				document.getElementById("span_type").innerHTML = "<span class='title'>&nbsp;&gt;&nbsp;</span><A class='title' HREF='"+channelLink+"'>"+channelTitle+"</a>";
			} 
			else {
				document.getElementById('div_feed').innerHTML='<div style="margin-left:2em">Error, Try Again</div>';
			}
	});
}

function load_type(cityUrl,category_index) {
	map.clearOverlays();
	document.getElementById('div_feed').innerHTML="";
	document.getElementById('span_type').innerHTML = "";
	if (category_index == 0) {
		document.getElementById('div_type').innerHTML="";
		document.getElementById("span_category").innerHTML = "";
	} else { 
		GDownloadUrl(cityUrl, function(data, responseCode) {
		  var xml = GXml.parse(data);
		  var feeds = xml.documentElement.getElementsByTagName("a"+category_index);
		  var option_html = '<form name="form_type" action=""><img src="numbers_3.png" border="0" align="center">&nbsp;&nbsp;&nbsp;<select style="width:200px" name="select_type" onchange="load_pins(this.form.select_type.value,'+category_index+')">';
		  for (var i = 0; i < feeds.length; i++) {
			var rss = feeds[i].getAttribute("rss");
			var name = feeds[i].getAttribute("name");
			option_html += '<option value="'+rss+'">'+name+'</option>';
		  }
		 option_html +='</select></form>';
		 document.getElementById("div_type").innerHTML = option_html;
		 document.getElementById("span_category").innerHTML = "<span class='title'>&nbsp;&gt;&nbsp;</span>"+xml.documentElement.getElementsByTagName("feeds")[category_index].getAttribute("category");
		});	
	}
}

function load_category(cityUrl) {
	map.clearOverlays();
//			document.getElementById('div_ad').innerHTML = "";			
	document.getElementById('div_feed').innerHTML="";
	document.getElementById('div_type').innerHTML="";
	document.getElementById("span_type").innerHTML = "";
	document.getElementById("span_category").innerHTML = "";
	if(cityUrl == "") {
		document.getElementById('div_feed').innerHTML="<center><img src='citysearchgmap.png' border='0' /><br /><br /><P style='margin:1em;font-size:12pt;'>Lookup locations of best restaurants, hotels, bars, pubs, nightlife, shopping and services in major US cities as voted on Citysearch.com</center>";
		document.getElementById('div_category').innerHTML="";
		document.getElementById("span_location").innerHTML = "";
		map.setCenter(new GLatLng(39.086470,-94.584990), 4);
		load_cityPins(CITYSEARCH_USA);
	} else { 
		GDownloadUrl(cityUrl, function(data, responseCode) {
		  var xml = GXml.parse(data);
		  var categories = xml.documentElement.getElementsByTagName("feeds");
		  var option_html = '<form name="form_category" action=""><img src="numbers_2.png" border="0" align="center" />&nbsp;&nbsp;&nbsp;<select style="width:200px" name="select_category" onchange="load_type(\''+cityUrl+'\',this.form.select_category.value)">';
		  for (var i = 0; i < categories.length; i++) {
			var category = categories[i].getAttribute("category");
			option_html += '<option value="'+i+'">'+category+'</option>';
		  }
		 option_html +='</select></form>';
		 document.getElementById("div_category").innerHTML = option_html;
		 document.getElementById("span_location").innerHTML = '<img src="blank.gif" height="1" width="25" border="0"\/>'+xml.documentElement.getElementsByTagName("city")[0].getAttribute("name");
		 showCity(xml.documentElement.getElementsByTagName("city")[0].getAttribute("name"));
		});	
	}
}

function loadinfo_type(cityUrl,category_index) {
	document.getElementById('div_feed').innerHTML="";
	document.getElementById('span_type').innerHTML = "";
	document.getElementById('select_category').selectedIndex = category_index;
	if (category_index == 0) {
		document.getElementById('div_type').innerHTML="";
		document.getElementById('info_type').innerHTML="";
		document.getElementById("span_category").innerHTML = "";
	} else { 
	GDownloadUrl(cityUrl, function(data, responseCode) {
	  var xml = GXml.parse(data);
	  var feeds = xml.documentElement.getElementsByTagName("a"+category_index);
	  var str ='';
	  for (var i = 0; i < feeds.length; i++) {
		var rss = feeds[i].getAttribute("rss");
		var name = feeds[i].getAttribute("name");
		str += '<option value="'+rss+'">'+name+'</option>';
	  }
	 var str1 = '<form name="form_type" action=""><img src="numbers_3.png" border="0" align="center" />&nbsp;&nbsp;&nbsp;<select style="width:200px" id="select_type" name="select_type" onchange="load_pins(this.form.select_type.value,'+category_index+')">';
	 var str3 = '<form name="form_type" action=""><select style="width:200px" name="select_type" onchange="document.getElementById(\'select_type\').selectedIndex = this.form.select_type.selectedIndex;load_pins(this.form.select_type.value,'+category_index+')">';
	 var str2 ='</select></form>';
	 document.getElementById("info_type").innerHTML = str3 + str + str2;
	 document.getElementById("div_type").innerHTML = str1 + str + str2;
	 document.getElementById("span_category").innerHTML = "<span CLASS='title'>&nbsp;&gt;&nbsp;</span>"+xml.documentElement.getElementsByTagName("feeds")[category_index].getAttribute("category");
	});	
	}
}

function loadinfo_category(cityUrl) {
//			document.getElementById('div_ad').innerHTML = "";		
	document.getElementById('div_feed').innerHTML="";
	document.getElementById('div_type').innerHTML="";
	document.getElementById("span_type").innerHTML = "";
	document.getElementById("span_category").innerHTML = "";
	GDownloadUrl(cityUrl, function(data, responseCode) {
	  var xml = GXml.parse(data);
	  var categories = xml.documentElement.getElementsByTagName("feeds");
	  var str ='';
	  for (var i = 0; i < categories.length; i++) {
		var category = categories[i].getAttribute("category");
		str += '<option value="'+i+'">'+category+'</option>';
	  }
	 var str1 = '<form name="form_category" action=""><img src="numbers_2.png" border="0" align="center" />&nbsp;&nbsp;&nbsp;<select style="width:200px" id="select_category" name="select_category" onchange="load_type(\''+cityUrl+'\',this.form.select_category.value)">';
	 var str3 = '<form name="form_category" action=""><select style="width:200px" name="select_category" onchange="loadinfo_type(\''+cityUrl+'\',this.form.select_category.value)">';
	 var str2 ='</select></form>';
	 document.getElementById("info_category").innerHTML = str3 + str + str2;
	 document.getElementById("div_category").innerHTML = str1 + str + str2;
	 document.getElementById("span_location").innerHTML = '<img src="blank.gif" height="1" width="25" border="0"\/>'+xml.documentElement.getElementsByTagName("city")[0].getAttribute("name");
	});	
	return;
}

function load_city(url) {
	map.clearOverlays();
	document.getElementById('div_type').innerHTML="";
	document.getElementById('div_category').innerHTML="";			

	GDownloadUrl(url, function(data, responseCode) {
	  var xml = GXml.parse(data);
	  var city = xml.documentElement.getElementsByTagName("city");
	  var str ='';
	  for (var i = 0; i < city.length; i++) {
		var city_name = city[i].getAttribute("name");
		var city_url = city[i].getAttribute("data");
		var city_addr = city[i].getAttribute("address");
		var city_lat = city[i].getAttribute("lat");
		var city_lng = city[i].getAttribute("lng");
		addCityPin(i,city_addr, city_name, city_url, city_lat, city_lng);
		str += '<option value="'+city_url+'">'+city_name+'</option>';
	  }
	 var str1 = '<form name="form_city" action=""><img src="numbers_1.png" border="0" align="center" />&nbsp;&nbsp;&nbsp;<select style="width:200px" id="select_city" name="select_cityUrl" onchange="load_category(this.form.select_cityUrl.value)">';
	 var str2 ='</select></form>';
	 document.getElementById("div_location").innerHTML = str1 + str + str2;
	});	
}

function showLat49Ads(){
  Lat49.initAds(19);
  var center = map.getCenter();
  var lat = center.lat();
  var lng = center.lng();
  var zoomlevel = Lat49.Tile.convertGMap2Zoom(map.getZoom());
  Lat49.updateAdByLatLon("lat49ads", lat, lng, zoomlevel);
}

function load() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map")); 
	map.addControl(new GSmallZoomControl());
	map.addControl(new GMenuMapTypeControl(),new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(61,7)));
	map.addMapType(G_PHYSICAL_MAP);
	map.addControl(new GOverviewMapControl());
	var boxStyleOpts = { opacity: .2, border: "2px solid yellow" };			
	var otherOpts = {buttonHTML: "<img src='zoom-control-inactive1.png' title='Drag Zoom' />", buttonZoomingHTML: "<img src='zoom-control-active1.png' title='Drag Zoom: Cancel' />",  buttonStartingStyle: {width: '15px', height: '15px'},  overlayRemoveTime: 0 };
	map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(25,7)));
	map.setCenter(new GLatLng(39.086470,-94.584990), 4); 
	map.enableGoogleBar(); 

	load_city(CITYSEARCH_USA);

	directionspanel = document.getElementById("div_directions");
	directions = new GDirections(map, directionspanel);

	var adsOptions = {maxAdsOnMap:10, minZoomLevel:2, channel:"7771405255"};
	var ads = new GAdsManager(map,"ca-pub-2773616400896769", adsOptions);
	ads.enable();
				
	GEvent.addListener(map, "moveend", showLat49Ads);
	}
}