window.onload = init;
var vacancyStatus = "";
var availabilityStatusField = "";
var availabilityStatus = "";
var availabilityDateField = "";
var showField = "";

function init() {
	if(document.getElementById('RoomVacancyStatus')) {
		vacancyStatus = document.getElementById('RoomVacancyStatus'); 
		if(vacancyStatus.addEventListener) {
			vacancyStatus.addEventListener('change',updateRoomStatus,false);
		}
		availabilityStatusField = document.getElementById('availabilityStatusField');
		availabilityStatus = document.getElementById('RoomAvailabilityStatus');
		if(availabilityStatus.addEventListener) {
			availabilityStatus.addEventListener('change',updateRoomStatus,false);
		}
		availabilityDateField = document.getElementById('availabilityDateField');
		showField = document.getElementById('showField');
		updateRoomStatus();
	}
	if(document.getElementById('map_canvas')) {
		initializeMap();
	} 
}

function updateRoomStatus() {
	if(vacancyStatus.value == "Vacant") {
		availabilityStatusField.style.display="block";
		showField.style.display="none";
		if(availabilityStatus.value=="Available Soon") {
			availabilityDateField.style.display="block";
		} else {
			availabilityDateField.style.display="none";
		}
	} else {
		showField.style.display="block";
		availabilityStatusField.style.display="none";
		availabilityDateField.style.display="none";	
	}
}

function initializeMap() {			
		if (GBrowserIsCompatible()) {
     	getCoordinates();
		} else {
			document.getElementById('map_canvas').innerHTML = "<p>Sorry.  Your browser does not support Google Maps.</p>";	
		}
}

var myUrls = new Array();
function createMap() {
	var map = new GMap2(document.getElementById("map_canvas"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(47.625,-122.305298), 11);

	var blueIcon = new GIcon(G_DEFAULT_ICON);
	blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
	blueIcon.iconSize = new GSize(32, 32)              

	for (var i=0;i<icons.length;i++) {
    
    if(icons[i].buildingType=="House") {
    	var point = new GLatLng(icons[i].lat,icons[i].lng);
  
    	eval('var this'+i+'Marker = new GMarker(point, { icon:blueIcon, title:i });');
    	
    	GEvent.addListener(eval('this'+i+'Marker'), "click", function() {
     			window.location=icons[this.getTitle()].url;
     	});
    
    	map.addOverlay(eval('this'+i+'Marker'));
    }
  } 
  
  var redIcon = new GIcon(G_DEFAULT_ICON);
	redIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";              
	redIcon.iconSize = new GSize(32, 32)
		
	for (var i=0;i<icons.length;i++) {
    if(icons[i].buildingType=="Apartment") {
    	var point = new GLatLng(icons[i].lat,icons[i].lng);
    
    	eval('var this'+i+'Marker = new GMarker(point, { icon:redIcon, title:i });');
    	GEvent.addListener(eval('this'+i+'Marker'), "click", function() {
     			window.location=icons[this.getTitle()].url;
     	});
    	
    	map.addOverlay(eval('this'+i+'Marker'));
    }
  }  
}

var icons = new Array();
function getCoordinates() {
	var client = new HttpClient();
	client.callback = function(result) {
		result = eval(result)

		for(var i=0;i<result.length;i++) {
			icons.push(new Icon(result[i][0],result[i][1],result[i][2],result[i][3],result[i][4]));
		}
		
		createMap();
	}

	client.makeRequest('buildings/getCoordinates',null);
}

function Icon(buildingType,lat,lng,id,address) {
	this.buildingType = buildingType;
	this.lat = lat;
	this.lng = lng;
	this.url = 'pages/listRooms/'+id;
	this.address = address;
}