// ----------------------------------------------------------
// USA Climate:  climate.js
// Copyright 2007 Sustainable By Design, All Rights Reserved
// Christopher Gronbeck, christopher@susdesign.com
// ----------------------------------------------------------


	/////////////////////////////////////////////////////////
	//
	//  global variables
	//
	/////////////////////////////////////////////////////////
		
		var stateData = new Array ();
	
		var cityData = new Array ();
		
		var currentState;
		
		var currentCity;
		
		var currentDataset;


	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  Initialize
	//
	/////////////////////////////////////////////////////////	
 		
		function Initialize () {
		
			SelectState ('AL');
		}

	
	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  SelectState
	//
	/////////////////////////////////////////////////////////	
 		
		function SelectState (state) {

		// ---------------------------------------------
		// set up
		// ---------------------------------------------
 		
			var f = document.theForm;
	
			currentState = state;
		
			f.city.options.length = 0;
			
			var optionCounter = 0;
			
			var cityOption;
			
			var firstCity = '';

		// ---------------------------------------------
		// get city data
		// ---------------------------------------------
 			
			stateData = data[state];
			
			for (city in stateData) {
			
				if (firstCity == '') {
				
					firstCity = city;
				}
			
				var cityCode = city;
				
				var cityName = city.toString();
				
					// replace spaces
				cityName = cityName.replace(/_S/g, " ");
				
					// replace hyphens
				cityName = cityName.replace(/_H/g, "-");
	
					// replace apostrophes
				cityName = cityName.replace(/_Q/g, "'");
	
					// replace periods and commas
				cityName = cityName.replace(/_P/g, ".");
				cityName = cityName.replace(/_C/g, ",");
				
					// replace slashes
				cityName = cityName.replace(/_D/g, "/");
				
					// replace parentheses
				cityName = cityName.replace(/_B/g, "(");
				cityName = cityName.replace(/_E/g, ")");
	
				cityOption = new Option (cityName, cityCode);
			
				f.city.options[optionCounter] = cityOption;
				
				optionCounter ++;
			}

		// ---------------------------------------------
		// select first city in menu
		// ---------------------------------------------
 			
			SelectCity (firstCity);
		}
		
	
	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  SelectCity
	//
	/////////////////////////////////////////////////////////	
 		
		function SelectCity (city) {

		// ---------------------------------------------
		// set up
		// ---------------------------------------------
 		
			var f = document.theForm;
	
			currentCity = city;
		
			var cityDatasets = data[currentState][city];
			
			f.dataset.options.length = 0;
			
			var optionCounter = 0;
			
			var optionPosition = 0;
			
			var datasetOption;
			
			var firstDataset = -1;

		// ---------------------------------------------
		// get city datasets
		// ---------------------------------------------
 			
			for (optionCounter = 0; optionCounter <= 15; optionCounter ++) {
			
				if (typeof (cityDatasets[optionCounter]) != "undefined") {
				
					if (firstDataset == -1) {
					
						firstDataset = optionPosition;
					}
			
					datasetOption = new Option (climateDatasets[optionCounter]['menuName'], optionCounter);
				
					f.dataset.options[optionPosition] = datasetOption;
					
					optionPosition ++;
				}
			}
			
		// ---------------------------------------------
		// select first dataset
		// ---------------------------------------------
 
			SelectDataset (firstDataset);
		}
	
	
	/////////////////////////////////////////////////////////
	//
	//  FUNCTION:  SelectDataset
	//
	/////////////////////////////////////////////////////////	
 		
		function SelectDataset (datasetNum) {
		
		// ---------------------------------------------
		// data variables
		// ---------------------------------------------
 		
			var graphHTML = '';
			
			var copyAndPasteText = '';

		// ---------------------------------------------
		// get dataset info
		// ---------------------------------------------
 		
			var datasetInfo = climateDatasets[datasetNum];
			
			var displayName = datasetInfo['displayName'];

			var gusts = datasetInfo['gusts'];

			var offsetMonths = datasetInfo['offsetMonths'];

			var colLabels = datasetInfo['colLabels'];

		// ---------------------------------------------
		// get data
		// ---------------------------------------------
 			
			var dataset = data[currentState][currentCity][datasetNum];
			
			var years = dataset[0];

			var annualData = dataset[1];

			var monthlyData = dataset[2];

			var numColumns = annualData.length;

		// ---------------------------------------------
		// constants and arrays
		// ---------------------------------------------
		
			spacer = rootDir + "/common_images/invisible.gif";
			
			if (offsetMonths) {
			
				months = new Array ('JUL','AUG','SEP','OCT','NOV','DEC', 'JAN','FEB','MAR','APR','MAY','JUN');
			}  
			
			else {
			
				months = new Array ('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');
			}
			
			numMonths = 12;
			
			graphColors = new Array ('green', 'blue', 'yellow');
			
			var graphHeight = 200;

		// ---------------------------------------------
		// data scales
		// ---------------------------------------------
  		
  			var minimum = datasetInfo['minimum'];

  			var maximum = datasetInfo['maximum'];
  			
  			var scale = maximum - minimum;

		// ---------------------------------------------
		// write graph HTML
		// ---------------------------------------------
		
			// begin main data table
			
			graphHTML += "<!-- main data table -->\n\n";
			
			graphHTML += "<table cellpadding=0 cellspacing=0 border=0>\n\n";
			
			// begin top line row
			
			graphHTML += "<!-- top line row -->\n\n";
			
			graphHTML += "<tr>\n\n";

			// top line left spacer
			
			graphHTML += "<!-- top line left spacer -->\n\n";
			
			graphHTML += "<td><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=1></td>\n\n";

			// top line
			
			graphHTML += "<!-- top line -->\n\n";
			
			graphHTML += "<td width=505 height=1 class='lightGreenBackground' colspan=14><IMG SRC='" + spacer + "' WIDTH=505 HEIGHT=1></td>\n\n";

			// end top line row
			
			graphHTML += "<!-- end top line row -->\n\n";
			
			graphHTML += "</tr>\n\n";

			// begin graph row
			
			graphHTML += "<!-- begin graph row -->\n\n";
			
			graphHTML += "<tr>\n\n";

			// top data scale label
			
			graphHTML += "<!-- top data scale label -->\n\n";
			
			graphHTML += "<td align='right' valign='top' class='dataScaleLabel' height=100><span class='dataScaleLabel'>" + maximum + "&nbsp;</span></td>\n\n";

			// graph left green line
			
			graphHTML += "<!-- graph left green line -->\n\n";
			
			graphHTML += "<td width=1 height=200 class='lightGreenBackground' rowspan=2><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=200></td>\n\n";

			// graph cells
			
			graphHTML += "<!-- graph cells -->\n\n";
			
			for (month = 0; month < numMonths; month ++) {
			
				// begin graph cell
				
				graphHTML += "<!-- begin graph cell -->\n\n";
				
				graphHTML += "<td height=200 width=42 rowspan=2 align='center' valign='bottom' class='graph'>\n\n";
				
				// begin graph cell table
				
				graphHTML += "<!-- begin graph cell table -->\n\n";
				
				graphHTML += "<table cellpadding=0 cellspacing=0 border=0>\n\n";
	
				// begin graph cell row
				
				graphHTML += "<!-- begin graph cell row -->\n\n";
				
				graphHTML += "<tr>\n\n";
	
				// graph cell left spacer
				
				graphHTML += "<!-- graph cell left spacer -->\n\n";
				
				graphHTML += "<td width=3><IMG SRC='" + spacer + "' WIDTH=3 HEIGHT=200></td>\n\n";
	
				// data bars
				
				for (col = 0; col < numColumns; col ++) {
				
					// bar height
					
					var barHeight = Math.round (graphHeight * ((monthlyData[col][month] - minimum) / (maximum - minimum)));
				
					// data bar
					
					graphHTML += "<!-- data bar -->\n\n";
					
					graphHTML += "<td width=12 height=200 valign='bottom'><IMG SRC='images/" + graphColors[col] + ".gif' WIDTH=12 HEIGHT=" + barHeight + "></td>\n\n";
				}

				// graph cell right spacer
				
				graphHTML += "<!-- graph cell right spacer -->\n\n";
				
				graphHTML += "<td width=3><IMG SRC='" + spacer + "' WIDTH=3 HEIGHT=200></td>\n\n";
	
				// end graph cell row
				
				graphHTML += "<!-- end graph cell row -->\n\n";
				
				graphHTML += "</tr>\n\n";
	
				// end graph cell table
				
				graphHTML += "<!-- end graph cell table -->\n\n";
				
				graphHTML += "</table>\n\n";
	
				// end graph cell
				
				graphHTML += "<!-- end graph cell -->\n\n";
				
				graphHTML += "</td>\n\n";
			}

			// graph right green line
			
			graphHTML += "<!-- graph right green line -->\n\n";
			
			graphHTML += "<td width=1 height=200 class='lightGreenBackground' rowspan=2><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=200></td>\n\n";

			// end graph row
			
			graphHTML += "<!-- end graph row -->\n\n";
			
			graphHTML += "</tr>\n\n";

			// begin bottom data scale label row
			
			graphHTML += "<!-- begin bottom data scale label row -->\n\n";
			
			graphHTML += "<tr>\n\n";

			// bottom data scale label
			
			graphHTML += "<!-- bottom data scale label -->\n\n";
			
			graphHTML += "<td align='right' valign='bottom' class='dataScaleLabel' height=100><span class='dataScaleLabel'>" + minimum + "&nbsp;</span></td>\n\n";

			// end bottom data scale label row
			
			graphHTML += "<!-- end bottom data scale label row -->\n\n";
			
			graphHTML += "</tr>\n\n";

			// begin bottom graph line row
			
			graphHTML += "<!-- begin bottom graph line row -->\n\n";
			
			graphHTML += "<tr>\n\n";

			// left spacer
			
			graphHTML += "<!-- left spacer -->\n\n";
			
			graphHTML += "<td><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=1></td>\n\n";

			// bottom graph green line
			
			graphHTML += "<!-- bottom graph green line -->\n\n";
			
			graphHTML += "<td width=505 height=1 class='lightGreenBackground' colspan=14><IMG SRC='" + spacer + "' WIDTH=505 HEIGHT=1></td>\n\n";

			// end bottom graph line row
			
			graphHTML += "<!-- end bottom graph line row -->\n\n";
			
			graphHTML += "</tr>\n\n";

			// begin month row
			
			graphHTML += "<!-- begin month row -->\n\n";
			
			graphHTML += "<tr>\n\n";

			// month row left spacers
			
			graphHTML += "<!-- month row left spacers -->\n\n";
			
			graphHTML += "<td><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=1></td>\n\n";
			graphHTML += "<td><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=1></td>\n\n";

			// month labels

			for (month = 0; month < numMonths; month ++) {
			
				graphHTML += "<td class='monthLabel'>" + months[month] + "</td>\n\n";
			}
			
			// month row right spacer
			
			graphHTML += "<!-- month row right spacer -->\n\n";
			
			graphHTML += "<td><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=1></td>\n\n";

			// end month row
			
			graphHTML += "<!-- end month row -->\n\n";
			
			graphHTML += "</tr>\n\n";

			// data value rows
			
			for (col = 0; col < numColumns; col ++) {

				// begin data value row
				
				graphHTML += "<!-- begin data value row -->\n\n";
				
				graphHTML += "<tr>\n\n";	

				// data label
				
				graphHTML += "<!-- data label -->\n\n";
				
				graphHTML += "<td class='dataLabel " + graphColors[col] + "'>" + datasetInfo['colLabels'][col] + "&nbsp;</td>\n\n";	

				// spacer
				
				graphHTML += "<!-- spacer -->\n\n";
				
				graphHTML += "<td><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=1></td>\n\n";	

				// data values
				
				for (month = 0; month < numMonths; month ++) {
				
					graphHTML += "<td class='data " + graphColors[col] + "'>" + monthlyData[col][month] + "</td>\n\n";
				}
	
				// spacer
				
				graphHTML += "<!-- spacer -->\n\n";
				
				graphHTML += "<td><IMG SRC='" + spacer + "' WIDTH=1 HEIGHT=1></td>\n\n";	

				// end data value row
				
				graphHTML += "<!-- end data value row -->\n\n";
				
				graphHTML += "</tr>\n\n";	
			}
			
			// end main table
			
			graphHTML += "<!-- end main table -->\n\n";
			
			graphHTML += "</table>\n\n";
			
			// set data div content
			
			SetDivContent ('data', graphHTML);

		// ---------------------------------------------
		// copy and paste field text
		// ---------------------------------------------
		
			copyAndPasteText = "<textarea rows=12 cols=60 wrap='virtual'>\n";
 
			for (month = 0; month < numMonths; month ++) {
			
				copyAndPasteText += months[month];

				for (col = 0; col < numColumns; col ++) {
			
					copyAndPasteText += "\t" + monthlyData[col][month];
				}
				
				copyAndPasteText += "\n";
			}
			
			copyAndPasteText += "</textarea><br><a href='javascript:HideDiv(\"copyAndPasteText\");'>hide this data</a><br><br>\n";

			SetDivContent ('copyAndPasteText', copyAndPasteText);
		}