window.onload = function() { initialize() };

var map, gmap;
var catText = new Array("","Good","Moderate","USG","Unhealthy","Very Unhealthy","Hazardous");
var cityArray = [];
var features = [];
var markerArray = [];
var index = 0;

function initialize()
{
	var mapOptions = {
	    zoom: 4,
	    center: new google.maps.LatLng(37.09024, -95.712891),
	    mapTypeId: google.maps.MapTypeId.TERRAIN
	  };

	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

	cityArray = getCityPoints();
	
	for (key in cityArray) 
	{
		var marker = new google.maps.Marker({
	        position: new google.maps.LatLng(cityArray[key]["lat"], cityArray[key]["long"]), 
	        map: map, 
	        title:cityArray[key]["name"] + " - " + "Today's Forecast: " + catText[cityArray[key]["cat"]],
	    	icon: "assets/mapIcons/"+cityArray[key]["cat"]+".gif",
	    	uCityID: cityArray[key]["cityid"]
		}); 
		
		markerArray[index] = marker;

	  	index++;
	}
	
	for(var i = 0; i < markerArray.length; i++) 
	{
		var marker = markerArray[i];
		google.maps.event.addListener(marker, 'click', function(){
			getCityForecast(this.uCityID);
		});
	}	
}

function getCityPoints() {	
	var arr = [];
	
	new Ajax.Request('ajax/mapDataFunctions.cfm', 
	{	
		asynchronous: false,
		method: 'post',						
		parameters: { method: 'getCityPoints'},
		onSuccess: function(transport) 
		{
     		arr = transport.responseText.evalJSON();
		},
	    onFailure: function()
	    {		
	    }
  	});
	return arr;
}

function getCityForecast( uCityID ) 
{	
	var cityName = document.getElementById("cityName");
	var currentTable = document.getElementById("currentTable");
	var todayTable = document.getElementById("todayTable");
	var tomorrowTable = document.getElementById("tomorrowTable");
	var cityInfo = document.getElementById("cityInfo");
	var headerContent = "";
	var currentContent = "";
	var todayContent = "";
	var tomorrowContent = "";
	 
	new Ajax.Request('ajax/mapDataFunctions.cfm', 
	{	
		asynchronous: false,
		method: 'post',						
		parameters: {	
			method: 'getCityForecast',
			uCityID: uCityID
		},
		onSuccess: function(transport) 
		{
			var response = transport.responseText.evalJSON();

			if(response.name != "")
			{
				headerContent = "<table cellpadding='0' cellspacing='0'>";
				headerContent += "<tr>";
				headerContent += "<td id='left'>"+response.name + ", " + response.state+"</td>";
				headerContent += "<td id='right'><a href='signup.cfm?uCityID=" + uCityID + "'>Subscribe</a></td>";
				headerContent += "</tr>";
				headerContent += "</table>";
				
			
				if( response.current != undefined)
				{
					currentContent = "<table cellpadding='0' cellspacing='0'>";
					currentContent += "<tr><th colspan='3'>Current Observed - " + response.current.time + "</th></tr>";
					currentContent += "<tr>";
					currentContent += "<td class='aqi_" + response.current.cat + "'>" + catText[response.current.cat] + "</td>";
					currentContent += "<td class='aqi_" + response.current.cat + "'>" + response.current.aqi + " AQI</td>";
					currentContent += "<td class='aqi_" + response.current.cat + "'>" + response.current.param + "</td>";
					currentContent += "</tr>";
					currentContent += "</table>";
				} 
				else 
				{
					currentContent = "<table cellpadding='0' cellspacing='0'>";
					currentContent += "<tr><th colspan='3'>Current Observed</th></tr>";
					currentContent += "<tr><td colspan='3' class='aqi_7'>Unavailable</td></tr>";
					currentContent += "</table>";
				}
				
				if( response.today != undefined) 
				{
					todayContent = "<table cellpadding='0' cellspacing='0'>";
					todayContent += "<tr><th colspan='3'>Today's Forecast</th></tr>";
					todayContent += "<tr><td class='aqi_" + response.today.cat + "'>" + catText[response.today.cat] + "</td>";
					if( response.today.aqi != "")
					{
						todayContent += "<td class='aqi_" + response.today.cat + "'>" + response.today.aqi + " AQI</td>";
					}
					else
					{
						todayContent += "<td class='aqi_" + response.today.cat + "'>&nbsp;</td>";
					}
					todayContent += "<td class='aqi_" + response.today.cat + "'>" + response.today.param + "</td></tr>";
					todayContent += "</table>";
				} 
				else 
				{
					todayContent = "<table cellpadding='0' cellspacing='0'>";
					todayContent += "<tr><th colspan='3'>Today's Forecast</th></tr>";
					todayContent += "<tr><td colspan='3' class='aqi_7'>Unavailable</td></tr>";
					todayContent += "</table>";
				}
				
				
				if( response.tomorrow != undefined) 
				{
					tomorrowContent = "<table cellpadding='0' cellspacing='0'>";
					tomorrowContent += "<tr><th colspan='3'>Tomorrow's Forecast</th></tr>";
					tomorrowContent += "<tr><td class='aqi_" + response.tomorrow.cat + "'>" + catText[response.tomorrow.cat] + "</td>";
					if( response.tomorrow.aqi != "")
					{
						tomorrowContent += "<td class='aqi_" + response.tomorrow.cat + "'>" + response.tomorrow.aqi + " AQI</td>";
					}
					else
					{
						tomorrowContent += "<td class='aqi_" + response.tomorrow.cat + "'>&nbsp;</td>";
					}
					tomorrowContent += "<td class='aqi_" + response.tomorrow.cat + "'>" + response.tomorrow.param + "</td></tr>";
					tomorrowContent += "</table>";
				} 
				else 
				{
					tomorrowContent = "<table cellpadding='0' cellspacing='0'>";
					tomorrowContent += "<tr><th colspan='3'>Tomorrow's Forecast</th></tr>";
					tomorrowContent += "<tr><td colspan='3' class='aqi_7'>Unavailable</td></tr>";
					tomorrowContent += "</table>";
				}
				
				cityName.innerHTML = headerContent;
				currentTable.innerHTML = currentContent;
				todayTable.innerHTML = todayContent;
				tomorrowTable.innerHTML = tomorrowContent;
				
				cityInfo.style.display = "block";
			}
		},
	    onFailure: function()
	    {		
	    	alert( 'getCityForecast failure' );
	    }
  	});
}