var menuboxsize;		//the variable used to store the proper menuboxsize, so that if the menubox is changed via outerhtml, its size can be restored
		var menuboxmultiple;		//ditto
		var daysbuttons;	//pointer used to identify the currently displayed set of days buttons (checkboxes or radio buttons)
		var station; //pointer used to identify the currently displayed set of station buttons (checkboxes or radio buttons)
		var outerhtml; //global variable for outerhtml support. true=supported, false=not supported. tested when body loads
		//global variables holding default text strings to assign to the menu box, which is dynamically changed
		var seasonSelectText=getData();
		var monthSelectText='<select name="monthselect" onChange="checkMonth()"><option value="0">All (Entire Season)</option><option value="11">November</option><option value="12">December</option><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4" selected>April</option><option value="5">May</option></select>';
		var extraSeasonOptions='<option value="1">Mean</option><option value="2">Minimum</option><option value="3">Maximum</option>';
		var avgOnly = '<option value="0">Avg/Max/Min Only</option>';
		
		function updateimg()  //updates the image
		{
			//checks what type of graph is called for (chosen by the user with the top set of radio buttons)
			var graphtype = checkRadioButtons(document.theform.graphtype);
			//finds "days," a single variable that tells the php script which days to include.
			//1 means only the first, 2 means only the fifteenth, and anything else is assumed to mean both
			var days=parseDays(checkCheckBoxes(daysbuttons));
			//Check the ENSO radio buttons, and assign the selected one's value to the 'enso' variable
			var enso=checkRadioButtons(document.theform.enso);
			//check what month is selected
			var month=checkSingleSelect(document.theform.monthselect);
			//type of average
			var avgType = checkRadioButtons(document.theform.avgType);	//check what station is selected
			
			if (avgType == 4 || avgType == 5 || avgType == 6) {
				var ensoStrength = '&ensoStrength='  + checkRadioButtons(document.theform.ensoStrength);
			} else {
				var ensoStrength = '';
			}
			
			if(enso!=0 && graphtype==2 && month!=0)
				document.getElementById('ensokey').innerHTML="<p><img src=\"elninokey.gif\">&nbsp\; El Ni&ntilde\;o &nbsp\;&nbsp\; <img src=\"laninakey.gif\">&nbsp\; La Ni&ntilde\;a</p>";
			else
				document.getElementById('ensokey').innerHTML="";
			
			//Do different things depending on the type of graph
			switch (graphtype)
			{
				case "1":	
				  if (month == 0) { //Single Season, Multiple Sites
					var stn=checkCheckBoxes(station);	//check what stations are selected (returns an array)
					var year=checkSingleSelect(document.theform.menubox);	//check what year is selected
					var stnquery="";
					for (var i=0; i<stn.length; i++)			//construct a part of a query string that passes off the stations in the form of stnx=<station>
						stnquery+="stn"+i+"="+stn[i]+"&";
					document.getElementById('graph').src="graph.php?type=1&"+stnquery+"year="+year+"&days="+days+"&enso="+enso+"&avgType="+avgType+ensoStrength; //assemble the entire query, and change the source of the graph image
				  } else if (month != 0) {	//Compare Single Date Across Multiple Stations
					var stn=checkCheckBoxes(station);		//check what stations are selected
					var year=checkSingleSelect(document.theform.menubox);		//check what year is selected
		
					var stnquery="";
					for (var i=0; i<stn.length; i++)				//build a query out of the station data
						stnquery+="stn"+i+"="+stn[i]+"&";
		
					var dayquery="";
					if(days==2)							//check what day is selected, and create a query out of that
						dayquery="day=15";
					else
						dayquery="day=1";
					document.getElementById('graph').src="graph.php?type=4&"+stnquery+dayquery+"&year="+year+"&month="+month+"&enso="+enso+"&avgType="+avgType+ensoStrength;	//Assemble the entire query, and change the source of the graph image
				  }
					break;
					
				case "2":	
					var avgs = checkCheckBoxes(document.theform.averages);
				  if (month == 0) {   //Single Site, Multiple Seasons
					var stn=checkRadioButtons(station);	//check what station is selected
					var year=checkMultipleSelect(document.theform.menubox);	//check what seasons are selected
					
					//concat averages and year arrays to conform with old code when average use to be same array
					year = avgs.concat(year);
					
		
					var yearquery="";
					for (var i=0; i<year.length; i++) {		//construct a part of a query string that passes off the selected years in the form of yearx=<year>
						yearquery+="year"+i+"="+year[i]+"&";
					}
					document.getElementById('graph').src="graph.php?type=2&"+yearquery+"stn="+stn+"&days="+days+"&avgType="+avgType+ensoStrength;	//Assemble the entire query, and change the source of the graph image
				  } else if (month !=0) {  //Compare Single Date Across Multiple Seasons
					var stn=checkRadioButtons(station);	//check what station is selected
					var year=checkMultipleSelect(document.theform.menubox);	//check what year is selected
					
					//concat averages and year arrays to conform with old code when average use to be same array
					year = avgs.concat(year);
					
					var barOrLine=checkRadioButtons(document.theform.barorline);
					
					if(enso == undefined)	//check the "no enso" button if none of them are checked
					{
						enso=0;
						document.getElementById('noenso').checked=true;
					}
		
					var yearquery="";
					for (var i=0; i<year.length; i++)			//construct a part of a query string that passes off the selected years in the form of yearx=<year>
						yearquery+="year"+i+"="+year[i]+"&";
		
					var dayquery="";					//check whether the first or the fifteenth is selected, and make a query string accordingly
					if(days==2)
						dayquery="day=15";
					else
						dayquery="day=1";
					document.getElementById('graph').src="graph.php?type=3&"+yearquery+dayquery+"&stn="+stn+"&month="+month+"&barorline="+barOrLine+"&enso="+enso+"&avgType="+avgType+ensoStrength;	//Assemble the entire query, and change the source of the graph image
				  }
					break;
			}
		}
		function checkRadioButtons(radiobuttons)	//returns the value of the selected radio button, if any
		{
			for (i=0; i<radiobuttons.length; i++)
			{
				if (radiobuttons[i].checked)
					return(radiobuttons[i].value);
			}
		}
		function checkCheckBoxes(checkboxes)		//returns an array with the selected check boxes, if any
		{
			var arraycounter=0;
			var values=[];
			for (i=0; i<checkboxes.length; i++)
			{
				if (checkboxes[i].checked)
					values[arraycounter++]=checkboxes[i].value;
			}
			return(values);
		}
		function checkSingleSelect(select)		//returns the value of the selected element in a drop-down box
		{
			return(select.options[select.selectedIndex].value);
		}
		function checkMultipleSelect(select)		//returns an array with the values of the selected elements in a multiple select box
		{
			var arraycounter=0;
			var values=[];
			for (i=0; i<select.length; i++)
			{
				if(select[i].selected)
					values[arraycounter++]=select[i].value;
			}
			return(values);
		}
		function parseDays(days)			//parses the array returned when checking the "days" checkbox/radio buttons, and returns 0 for neither, 1 for only the first, 2 for only the fifteenth, and 3 for both.
		{
			if(days[0]==null)
				days[0]=0;
			if(days[1]==null)
				days[1]=0;
			return(parseInt(days[0])+parseInt(days[1]));
		}
		function getEnsoArray()
		{
			if(checkRadioButtons(document.theform.enso)==2)
				return(checkCheckBoxes(document.theform.chooseENSO));
			else
				return("");
		} 
		function updateMenu()				//updates the various options that need to change when a different type of graph is selected
		{
			var menubox=document.getElementById('menubox');			//the menubox object
			var value = checkRadioButtons(document.theform.graphtype);	//the value that indicates which type of graph is selected
			switch(value)
			{
				//case "4":
				case "1":		//if it's 4 or 1
					menubox.multiple=null;	//the menubox can't have multiple items selected
					menuboxmultiple=null;
					menubox.size=null;	//the menubox is a dropdown box
					menuboxsize=null;

						menubox.innerHTML=seasonSelectText;	//the menubox is assigned the default season options
					document.getElementById('stnselectradio').style.display="none";		//the station list becomes checkboxes
					document.getElementById('stnselectcheckbox').style.display="inline";
					station=document.theform.stations0;
					break;
				//case "3":
				case "2":		//if it's 3 or 2
					menubox.multiple="yes";	//the menubox can have multiple items selected
					menuboxmultiple="yes";
					menubox.size=5;		//the menubox becomes an option box with room for 5 lines
					menuboxsize=5;
					document.getElementById('stnselectcheckbox').style.display="none";	//the station list becomes radio buttons
					document.getElementById('stnselectradio').style.display="inline";
					station=document.theform.stations1;
					break;
			}
			updateMenuBox();	//the menubox text is updated to only include seasons that have data for the currently selected station
		} 
		
		function checkMonth() {
			var value = checkRadioButtons(document.theform.graphtype);	//the value that indicates which type of graph is selected
			var month = checkSingleSelect(document.theform.monthselect) ;
			
			//defaults
			document.theform.enso[0].disabled=false;
			document.getElementById('showenso').style.color="#000000";
			
			if (value == 2 ) {
				if (month !=0) {
					document.theform.avgType[2].disabled=false;
					document.getElementById('avgType2').style.color="#000000"; //name conflict with IE so name avgType2 else it won't work
					
					if (document.theform.menubox[0].value == 0) { //update menubox (year select box) when changing from entire season to month, butt not from month to month
						updateMenuBox();
					}
				} else { 
					updateMenuBox(); //update menubox (year select box) to show avg/max/min options
					if (document.theform.enso[0].checked) { document.theform.enso[1].checked=true; } //if display classification check select Don't display. Else leave as selected
					document.getElementById('avgType2').style.color="#CCCCCC";
					document.theform.avgType[2].disabled=true;
					if (document.theform.avgType[2].checked) { document.theform.avgType[0].checked=true; }
					document.getElementById('barorlineShow').style.color="#CCCCCC";
					for (i = 0; i <document.theform.barorline.length; i++) {
						document.theform.barorline[i].disabled=true;
					}
				}
				document.getElementById('avgCheckBoxes').style.color="#000000";
				for (i = 0; i <document.theform.averages.length; i++) {
					document.theform.averages[i].disabled=false;
					document.theform.averages[i].checked=true;
				}
			} else {
				if (document.theform.avgType[2].checked) { document.theform.avgType[0].checked=true; }
				document.getElementById('avgType2').style.color="#CCCCCC";
				document.theform.avgType[2].disabled=true;
				document.getElementById('avgCheckBoxes').style.color="#CCCCCC";
				for (i = 0; i <document.theform.averages.length; i++) {
					document.theform.averages[i].disabled=true;
				}
			}

			if (month==0) {		
				document.getElementById('daysradio').style.display="none";			//makes the date options into checkboxes
				document.getElementById('dayscheckbox').style.display="inline";
				daysbuttons=document.theform.days0;
				if (value == 2 ) {
					if (document.theform.enso[0].checked==true) {
						document.theform.enso[2].checked=true;
					}
					document.theform.enso[0].disabled=true;
					document.getElementById('showenso').style.color='#CCCCCC'; 
				}
			} else {
				document.getElementById('dayscheckbox').style.display="none";		//makes the date options into radio buttons
				document.getElementById('daysradio').style.display="inline";
				daysbuttons=document.theform.days1;
				
				if (value == 2) {
					document.getElementById('barorlineShow').style.color="#000000";
					document.theform.barorline[0].disabled=false;
					document.theform.barorline[1].disabled=false;
				} else {
					document.getElementById('barorlineShow').style.color="#CCCCCC";
					document.theform.barorline[0].disabled=true;
					document.theform.barorline[1].disabled=true;
				}
			}
		}
		
		function showensoStrength() {
		//type of average
		var avgType = checkRadioButtons(document.theform.avgType);
			if (avgType == 4 || avgType== 5) {            
				//document.getElementById('ensoStrength').style.display="block";
				document.getElementById('ensoStrength').style.visibility="visible";
			} else {
				//document.getElementById('ensoStrength').style.display="inline";
				document.getElementById('ensoStrength').style.visibility="hidden";
			}
		}
		
		function checkAll(checkAllBox, name) {
			if (checkAllBox.checked == true) {
				for (i = 0; i < name.length; i++)
					name[i].checked = true ;
			} else {
				for (i = 0; i < name.length; i++)
					name[i].checked = false ;
				}
			}

		
		function updateMenuBox()		//Updates the menu box so that it only includes seasons for which the selected station has data
		{
			var menubox=document.getElementById('menubox');		//assign the menubox object to a simpler handle
			var type=checkRadioButtons(document.theform.graphtype);	//find out what type of graph the user has selected
			if(type==2)		//only use custom data if it's type 2 or 3
			{
				var stn=checkRadioButtons(station);	//find out what station is selected currently
				var month = checkSingleSelect(document.theform.monthselect) ;
				var ENSO = getEnsoArray();
				if(stn!=null)						//if there is a station selected,
				{
					data=getData(stn, ENSO);				//get the data from the magical land of AJAX (technically not Asynchronous since I modified it to block until the data is available)
					if(data==false)							//If for some reason it could not get the data,
						//changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">', extraSeasonOptions+seasonSelectText, "</select>");	//allow the user to select any season (see changeouterhtmlsafe() comments for details on this method)
						changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">', avgOnlyseasonSelectText, "</select>");	//allow the user to select any season (see changeouterhtmlsafe() comments for details on this method)
					else if (ENSO != "" || month != 0)
						//changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">', extraSeasonOptions+data, "</select>");		//But if it could get the data, stick it in the menubox
						changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">', data, "</select>");		//But if it could get the data, stick it in the menubox
					else 
						changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">', avgOnly+data, "</select>");
				}
				else
					changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">' ,"", '</select>');				//If no station is selected, make the box blank
			}
			else if(type==1)
			{
				data=getData("", getEnsoArray());				//get the data from the magical land of AJAX (technically not Asynchronous since I modified it to block until the data is available)
				if(data==false)							//If for some reason it could not get the data,
					changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">', extraSeasonOptions+seasonSelectText, "</select>");	//allow the user to select any season
				else
					changeouterhtmlsafe(menubox, '<select id="menubox" name="menubox">', extraSeasonOptions+data, "</select>");		//But if it could get the data, stick it in the menubox
			}
			document.getElementById('menubox').multiple=menuboxmultiple;		//update the global variables for the menubox size and multiple properties (see their comments at the top for details)
			document.getElementById('menubox').size=menuboxsize;
		}
		function update()	//Call both the update functions, used for body onload
		{
			updateMenu();
			updateimg();
		}
		function onGraphTypeClick()		//self-explanatory series of buttons, when one is clicked the next set is shown
		{
			checkMonth();
			showENSO();
			updateMenu();
		}
		
		function onStnSelectClick()
		{
			var checkAll = document.theform.checkAllBx;
			var stnCheckBx = document.theform.stations0;
			var j = 0;
			//if check all check and then station unselected, uncheck check all button.
			if (checkAll.checked == true) {
				checkAll.checked = false;
			//else if check all not selected and all station are selected (manually), then select check all box.
			} else {
				for (i = 0; i < stnCheckBx.length; i++) {
					if (stnCheckBx[i].checked == true) { j++; }
				} if (j == stnCheckBx.length) { checkAll.checked = true; }
			}
			
			updateMenuBox();
			//if the station select checkboxes are showing, and not the radio buttons,
			//and if the enso buttons are still hidden, indicating that this is the first
			//click on these buttons, check the first radio button to avoid confusion
			//I don't check the first radio button by default because a click is necessary
			//to show the next set of buttons, so if one is already selected, people might get confused
			//if(document.getElementById('stnselectradio').style.display=="none"&&document.getElementById('ENSO').style.display=="none")
			//	document.getElementById('station10').checked=true;
			//showENSO();
		}
		function showENSO()
		{
			if(document.getElementById('chooseenso').checked) {
				document.getElementById('chooseensochecks').style.color="#000000";
				for (i = 0; i <document.theform.chooseENSO .length; i++) {
					document.theform.chooseENSO[i].disabled=false;
				}
			} else {
				updateMenu();
				
				for (i = 0; i <document.theform.chooseENSO.length; i++) {
					document.theform.chooseENSO[i].checked=false;
					document.theform.chooseENSO[i].disabled=true;
				}
				document.getElementById('chooseensochecks').style.color="#CCCCCC";
			} 
		}
		function onEnsoClick()
		{
			showENSO();
		}
		function showMenuBox()
		{
			document.getElementById('selectbox').style.display="inline";
		}
		function outerhtmltest()
		{
			if(document.getElementById('outerhtmltest').outerHTML==undefined)
				outerhtml=false;
			else
				outerhtml=true;
		}
		function changeouterhtmlsafe(obj, str1, str2, str3)	//this changes the outerhtml of an object, if it is supported in the browser, otherwise it changes the innerhtml
		{							//IE makes this approach necessary, because if innerHTML is used to change a select element, it truncates the first option tag.
			if(outerhtml)					//If outerhtml is available (it is tested when the body loads and the results are placed in this boolean
				obj.outerHTML=str1+str2+str3;		//assign this string to the outerhtml of the object (str1 is the opening tag, str3 is the closing tag, and str2 is the actual information)
			else						//if outerhtml isn't available
				obj.innerHTML=str2;			//assign the content straight to innerhtml
		}
		function bodyonload()					//called when the body loads (using the onload attribute of the body tag)
		{
			outerhtmltest();				//see if outerhtml is available
			document.theform.reset();			//reset the form, in case they are loading the page via refresh
			//document.theform.enso[0].disabled=false;
			checkMonth();
			station=document.theform.stations0;		//see the top of the script where these variables are declared
			daysbuttons=document.theform.days0;
		}