YHA.Page.Hostels.MapPopupOverall = YHA.Page.Hostels.MapPopup.extend
({
	constructor: function(lat, lng, hostels)
	{
		this.base(lat, lng, '', false);
		this.hostels = hostels;
		this.point = new GLatLng(lat,lng);
		Event.observe(window, 'resize', this.windowOnResize.bind(this));
		
		this.markerGroups = { "InGroup": [], "NotInGroup": []};
	},
	
	windowOnLoad: function()
	{
		this.base();

		this.hostelMap.map.setZoom(4);
		this.hostelMap.defaultIcon = G_YHA_ICON_SMALL;
		this.hostelMap.map.savePosition();

		// add the markers
		this.hostels.each
		(
		 	function(hostel)
			{
				var marker = this.hostelMap.addMarker(new GLatLng(hostel[0], hostel[1]));
				
				marker.yhaInfo = 
				{
					name: hostel[2],
					address: hostel[3],
					suburb: hostel[4],
					postcode: hostel[5],
					hostelId: hostel[6],
					phone: hostel[7],
					nearbyhostel1: hostel[10],
					nearbyhostel2: hostel[11],
					nearbyhostel1ID: hostel[12],
					nearbyhostel2ID: hostel[13],
					hostelUrl: hostel[14]
				};
				
				GEvent.addListener
				(
					marker, 
					"click", 
					this.hostelMarkerOnClick
				);
				
				this.markerGroups["InGroup"].push(marker);
				
			}
			.bind(this)
		);
		
		if (navigator.appName !="Microsoft Internet Explorer")
			GEvent.addListener(this.hostelMap.map, "moveend", this.storePoint.bind(this));
	},
	
	/* Event hndler is overridden to show the info window for this specific hostel */
	
	hostelMarkerOnClick: function(event)
	{
		page.showMarkerInfoWindow(this);
	},
	
	showMarkerInfoWindow: function(marker)
	{
		
		if ( typeof( this.langcode ) == "undefined" ) {
		   this.langcode = ""
		   } 
		
		marker.openInfoWindow
		(
		 	"<p><a style='font-size:14px;font-weight:bold;' href=\"" + this.langcode + marker.yhaInfo.hostelUrl + "\">" + marker.yhaInfo.name + "</a></p>" + 
			"<p>" + marker.yhaInfo.address + "<br />" + marker.yhaInfo.suburb + ", " + marker.yhaInfo.postcode + "<br /><br />" + marker.yhaInfo.phone + "</p>" +
			"<p>Nearby hostels: <a href=\"javascript: page.moveToHostel(" + marker.yhaInfo.nearbyhostel1ID + ");\">" + marker.yhaInfo.nearbyhostel1 + "</a>, <a href=\"javascript: page.moveToHostel(" + marker.yhaInfo.nearbyhostel2ID + ");\">" + marker.yhaInfo.nearbyhostel2 + "</a></p>"
		);
	},
	
	moveToHostel: function(hostelID)
	{
		this.hostels.each(
			function(hostel)
			{
				if(hostel[6] == hostelID)
				{
					page.clickMarker( new GLatLng(hostel[0], hostel[1]) );
				}
			}
		);
	},
	
	clickMarker: function(point)
	{
		this.markerGroups["InGroup"].each(
			function(marker)
			{
				if(marker.getPoint().equals(point) )
				{
					
					//page.hostelMap.map.panTo(point);
					//
					page.showMarkerInfoWindow(marker);
					if( page.hostelMap.map.getZoom() < 15)
						page.hostelMap.map.setZoom(page.hostelMap.map.getZoom()+3);
					
					return;
				}
			}
		);
		
		/*this.markerGroups["NotInGroup"].each(
			function(marker)
			{
				if(marker.getPoint().equals(point) )
				{
					//page.hostelMap.map.panTo(point);
					//page.hostelMap.map.setZoom(page.zoom+3);
					page.showMarkerInfoWindow(marker);
					page.hostelMap.map.setZoom(page.zoom+3);
					
					return;
				}
			}
		);*/
	},
	
	
	/*hostelMarkerOnClick: function(event)
	{
		this.openInfoWindow
		(
		 	"<h2><a href=\"details.cfm?hostelid=" + this.yhaInfo.hostelId + "\">" + this.yhaInfo.name + "</a></h2>" + 
			"<p>" + this.yhaInfo.address + "<br />" + this.yhaInfo.suburb + ", " + this.yhaInfo.postcode + "<br /><br />" + this.yhaInfo.phone + "</p>"
		);
	},*/
	
	windowOnResize: function(event)
	{
		this.resizeMap();
		if (navigator.appName !="Microsoft Internet Explorer")
			this.hostelMap.map.setCenter(this.point);	
	},
	
	storePoint: function()
	{
		this.point = this.hostelMap.map.getCenter();
	}
});