YHA.Page.Hostels.Map_all_states = Base.extend
({
	constructor: function(lat, lng, zoom, groupId, groupIdIndex, hostels)
	{
		this.lat = lat;
		this.lng = lng;
		
		this.groupId=groupId;
		this.groupIdIndex=groupIdIndex;
		this.hostels = hostels;
		this.zoom = zoom;		
		this.markerGroups = { "InGroup": [], "NotInGroup": []};
		
		Event.observe(window, 'load', this.windowOnLoad.bind(this));
		//Event.observe($('btZoomOnClick'), 'click', this.observers.btZoomOnClick);
		
	},
	
	windowOnLoad: function()
	{
		this.hostelMap = new YHA.Map
		(
			element = $('map'), 
			lat = this.lat, 
			lng = this.lng
		);
		
		this.hostelMap.defaultIcon = G_YHA_ICON_SMALL;
		this.hostelMap.map.setZoom(this.zoom) 
		this.hostelMap.map.savePosition();
		
		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].replace(" ", "")
				};
				
				GEvent.addListener
				(
					marker, 
					"click", 
					this.hostelMarkerOnClick
				);
				
				if (hostel[this.groupIdIndex] == this.groupId)
				{
					this.markerGroups["InGroup"].push(marker);
				}else{
					this.markerGroups["NotInGroup"].push(marker);
				}
				
			}
			.bind(this)
			
		);
		
		/*if (window.opener && window.opener.page.hostelMap)
		{
			this.hostelMap.mirror(window.opener.page.hostelMap.map);
		}*/
		
		this.observers = 
		{
			btResetMapOnClick: this.btResetMapOnClick.bindAsEventListener(this),
			/*hostelMarkerOnClick: this.hostelMarkerOnClick.bindAsEventListener(this),*/
			btShowAllHostels: this.btShowAllHostels.bindAsEventListener(this),
			btShowGroupHostels: this.btShowGroupHostels.bindAsEventListener(this)
		}
		
		Event.observe($('btShowAllHostels'), 'click', this.observers.btShowAllHostels);
		Event.observe($('btShowGroupHostels'), 'click', this.observers.btShowGroupHostels);
		
		// event handler for multiple buttons to zoom into multiple locations
		/*var buttons = $$('div.button');
		for(var i=0; i<buttons.length; i++){
			Event.observe(buttons[i].id, 'click', this.btZoomOnClick.bindAsEventListener(this))
		}*/
		
		
		//if (this.observers.btResetMapOnClick)
			Event.observe($('btResetMap'), 'click', this.observers.btResetMapOnClick);
		
		new RedSquare.PopupBuilder('popup', 'map', 'width=1024,height=768,left=c,top=c,resizable');
		new RedSquare.PopupBuilder('popupprint', 'print', 'width=800,height=600,left=c,top=c,resizable,scrollbars,menubar');
	},
	
	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);
					page.hostelMap.map.setZoom(page.zoom+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;
				}
			}
		);
	},
	
	
	btResetMapOnClick: function(event)
	{	
		this.hostelMap.map.returnToSavedPosition();
		
		Event.stop(event);
		Event.element(event).blur();	
	},
	
	// used for zooming in without page refresh. No longer needed
	/*btZoomOnClick: function(event)
	{
		var element = Event.element(event);
		alert(element.id);
		alert(element.zoom);
		// find the actual link element (in the case of an image or span or something inside the link firing the event)
		
		this.hostelMap.map.setCenter(new GLatLng(element.lat,element.lng),element.zoom);
	},*/
	
	btShowAllHostels: function(event)
	{
		var element = Event.element(event);
		for (var i = 0; i < this.markerGroups['NotInGroup'].length; i++) 
		{
	    	var marker = this.markerGroups['NotInGroup'][i];
			marker.show();
	    }
	    
	    Event.stop(event);
		Event.element(event).blur();
	},
	
	btShowGroupHostels: function(event)
	{
		var element = Event.element(event);
		for (var i = 0; i < this.markerGroups['NotInGroup'].length; i++) 
		{
	    	var marker = this.markerGroups['NotInGroup'][i];
			marker.hide();
	    }		
	    
	    Event.stop(event);
		Event.element(event).blur();
	},

	openInfoWindow: function()
	{
		this.hostelMarker.openInfoWindow(this.description);
	}
});