/*
	tableManipulations.js
	
	This file has functions for manipulating the rainfall
	data table.  It contains functions for removing
	columns from the table.
*/

//	removeCol(col)
//
//	Removes the <td> and <th> elements associated with a column
//	in the rainfall table.  This has the effect of hiding data
//	for a selected time period.

function removeCol(col) {

	// Either use document.all or getElementsByTagName depending on browser support
	var allTD = document.all ? document.all : document.getElementsByTagName('td');
	var allTH = document.all ? document.all : document.getElementsByTagName('th');
	
	// Construct an array of DOM elements that make up the column
	for(i = 0; i < allTD.length; i++) {
	
		if(allTD[i].className == col) {
			allTD[i].style.display = 'none';
		} 
		
		else if(i < allTH.length && allTH[i].className == col) {
			allTH[i].style.display = 'none';
		}
		
	}

}


//	showCol(col)
//
//	Removes the <td> and <th> elements associated with a column
//	in the rainfall table.  This has the effect of showing data
//	for a selected time period.

function showCol(col) {

	// Either use document.all or getElementsByTagName depending on browser support
	var allTD = document.all ? document.all : document.getElementsByTagName('td');
	var allTH = document.all ? document.all : document.getElementsByTagName('th');
	
	// Construct an array of DOM elements that make up the column
	for(i = 0; i < allTD.length; i++) {
	
		if(allTD[i].className == col) {
			allTD[i].style.display = 'block';
		} 
		
		else if(i < allTH.length && allTH[i].className == col) {
			allTH[i].style.display = 'block';
		}
		
	}

}

//	changeCSS
//
//	theClass - the class name to alter
//	element - the attribute of the class to alter
//	value - the value for this attribute
//
//	Taken from http://www.shawnolson.net/a/503/

function changeCSS(theClass,element,value) {
	// This attribute varies by browser
	var cssRules;
	if (document.all) {
		cssRules = 'rules';
	}
	else if (document.getElementById) {
		cssRules = 'cssRules';
	}
	
	// Loop through the document's stylsheets and find this class
	for (var S = 0; S < document.styleSheets.length; S++){
		for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
			if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
				document.styleSheets[S][cssRules][R].style[element] = value;
			}
		}
	}	
}

var map_string = "*MAP* ";
var currCol;
var prevCol = 'total24';

//	highlightCol
//
//	col - the column to highlight
//
//	Highlights a column in the data table.  This has the
//	effect of changing the focus of the table.

function highlightCol(col) {

	// Method 3 - Change the style definitions
	var mysheet=document.styleSheets[0]
	var totalrules=mysheet.cssRules? mysheet.cssRules.length : mysheet.rules.length
	
	if (mysheet.deleteRule){ //if Firefox
		mysheet.insertRule("." + prevCol + "{background-color: #FFFFFF;}", totalrules)
		mysheet.insertRule("." + col + "{background-color: #EEEEEE;}", totalrules+1)
	}
	
	else if (mysheet.removeRule){ //else if IE
		mysheet.addRule("." + prevCol, "background-color: #FFFFFF")
		mysheet.addRule("." + col, "background-color: #EEEEEE")
	}
	
	prevCol = col;

	// Method 2 - Dependent on the number of stylesheets
	/*changeCSS('.' + prevCol, 'background', '#FFFFFF');
	changeCSS('.' + col, 'background', '#EEEEEE');
	prevCol = col;*/


	// Method 1 - Dependent on #table entries (number of gages * number of time periods)
	/*
	// Either use document.all or getElementsByTagName depending on browser support
	//var allTD = document.all ? document.all : document.getElementsByTagName('td');
	//var allTH = document.all ? document.all : document.getElementsByTagName('th');

	var allTD = document.getElementById('side_bar').getElementsByTagName('td');
	var allTH = document.getElementById('side_bar').getElementsByTagName('th');
	currCol = col;

	// Construct an array of DOM elements that make up the column
	for(i = 0; i < allTD.length; i++) {
	
		if(allTD[i].className == col) {
			allTD[i].style.background = '#EEEEEE';
		} else if (prevCol != "" && allTD[i].className == prevCol){
			allTD[i].style.background = '#FFFFFF';
		}
		
		// Update the heading to indicate * MAP *
		if(i < allTH.length && allTH[i].className == col) {
			var headingHTML = allTH[i].innerHTML;
			var idx = headingHTML.indexOf('>');
			var newHeading = headingHTML.substring(0, idx+1) + 
					map_string + 
					headingHTML.substring(idx+1, headingHTML.length);

			allTH[i].innerHTML = newHeading;
		} 

		// Deselect the previous * MAP * if any
		else if(i < allTH.length) {
			var headingHTML = allTH[i].innerHTML;
			var idx = headingHTML.indexOf(map_string);

			if (idx != -1) {
				var newHeading = headingHTML.substring(0, idx) + 
				headingHTML.substring(idx+map_string.length, headingHTML.length);

				allTH[i].innerHTML = newHeading;
			} 
		}
		
	}
	
	// Update the new previous column
	prevCol = col;
	*/

}

// Globally define the marker images
// The images below are old
/*var markerIcons = new Array("markers/216.png",
   "markers/215.png",
   "markers/037.png",
   "markers/053.png",
   "markers/073.png",
   "markers/099.png",
   "markers/111.png",
   "markers/126.png",
   "markers/140.png",
   "markers/161.png",
   "markers/168.png",
   "markers/202.png",
   "markers/011.png",
   "markers/022.png",
   "markers/006.png"
);*/

var markers_base = "markers/";


//	updateMarkers(rain_total)
//
//	This function updates the images for each marker
//	on the Google Map, based on the time period that
//	is to be used.
//
//	rain_total - the time period to use for the marker.
//			this should be one of:
//				rt3hour
//				rt6hour
//				rt12hour
//				rt24hour
//				rt48hour
//				rt7day
//				rt30day

function updateMarkers(rain_total) {
	for (i=0; i < markers.length; i++) {
		// Get the rain total
		var currTotal = markers[i].getAttribute(rain_total);
		
		// Get the missing data total
		var missingKey = "missing" + rain_total.substring(2, rain_total.length);
		var missingData = markers[i].getAttribute(missingKey);
		
		// Round missing data
		var missingRound = Math.round(missingData/10) * 10;

		// Use ceiling to quantize the values (0,10,20,30,40,50,60,70,80,90,100)
		// var missingRound = Math.ceil(missingData/10) * 10;
		
		// Make it two digits if it is zero
		if (missingRound == 0) {
			missingRound = "00";
		}
		
		var currIcon = markers_base;

		// Figure out what base icon to use
		if (missingRound == 100) {
		   currIcon += "00.png";
		} else if (currTotal <= 0.1) {
		   currIcon += "01-" + missingRound + ".png";
		} else if (currTotal <= 0.25) {
		   currIcon += "02-" + missingRound + ".png";
		} else if (currTotal <= 0.5) {
		   currIcon += "03-" + missingRound + ".png";
		} else if (currTotal <= 1) {
		   currIcon += "04-" + missingRound + ".png";
		} else if (currTotal <= 1.5) {
		   currIcon += "05-" + missingRound + ".png";
		} else if (currTotal <= 2) {
		   currIcon += "06-" + missingRound + ".png";
		} else if (currTotal <= 2.5) {
		   currIcon += "07-" + missingRound + ".png";
		} else if (currTotal <= 3) {
		   currIcon += "08-" + missingRound + ".png";
		} else if (currTotal <= 4) {
		   currIcon += "09-" + missingRound + ".png";
		} else if (currTotal <= 5) {
		   currIcon += "10-" + missingRound + ".png";
		} else if (currTotal <= 6) {
		   currIcon += "11-" + missingRound + ".png";
		} else if (currTotal <= 7) {
		   currIcon += "12-" + missingRound + ".png";
		} else if (currTotal <= 8) {
		   currIcon += "13-" + missingRound + ".png";
		} else {
		   currIcon += "14-" + missingRound + ".png";
		}

		// Make the new tooltip
		//    Get the name and last_update time
		var Name = markers[i].getAttribute("name");
//		var Update = markers[i].getAttribute(lastupdate);
//                var currToolTip = Name + " <br><nobr><em>Last Data Update:</em></nobr><br> " + Update;

//      marker.tooltip = '<div class="tooltip"><nobr>'+name+'</nobr><br>'+'<nobr><em>Last Data Update:</em></nobr><br><nobr>'+last_update+' CST</nobr><br><nobr><em>24 Hour Total:</em></nobr><br><nobr>'+total24+' inches</nobr>'+'</div>';
//



		// Update the markers data structure
		markers[i].setAttribute("icon", currIcon);

		markers[i].setAttribute("tooltip", Name);
//		markers[i].setAttribute("tooltip", currToolTip);
	}

		// DEBUG
		//alert('For profiling, this is the before fillinmap and after updating markers');

	// Redisplay the map
	fillinmap(markers);
}

//	changeTime(colname, rain_total)
//
//	Changes the table and Google Map display to
//	be centered around a different time period.
//
//	colname - the class name of the column to be
//			highlighted
//	rain_total - the identifier for which total
//			rainfall amount to use.  This
//			should be one of the types listed
//			in updateMarkers above.
function changeTime(colname, rain_total) {
	updateMarkers(rain_total);
	highlightCol(colname);
	updateDisplayTimeFromToday(colname);
}


//	updateDisplayTime(hours_from_today, today)
//
//	Updates the table heading that describes the time
//	period being displayed in the data table and on
//	the Google Map.  This should be called whenever
//	the Google Map changes.

function updateDisplayTimeFromToday(colname) {
	var el = document.getElementById('display_time');
	var el2 = document.getElementById('map_heading');
	var time = colname.substring(5);
	var hours_from_today = time + " hour";
	
	if (time == 168) {
		hours_from_today = "7 day";
	} else if (time == 720) {
		hours_from_today = "30 day";
	}
	
	el.innerHTML = "Precipitation data collected in the " + 
		hours_from_today + "s before " + monthToString(currMonth) + 
		" " + currDay + ", " + currYear + " " + militaryTo12Time(currHour) + " CST.";
		
	el2.innerHTML = hours_from_today + " Precipitation Total Map";
}

//	updateDisplayTime(stime, etime)
//
//	This also updates the table heading that describes
//	the time period being displayed in the data table
//	and on the Google Map.  This is for when a custom
//	time period is chosen with start time stime, and
//	end time etime.

function updateDisplayTime(stime, etime) {
	var el = document.getElementById('display_time');
	var el2 = document.getElementById('map_heading');
	
	el.innerHTML = "Precipitation data collected between " + 
		stime + " and " + etime + " CST.";
		
	el2.innerHTML = "Custom Precipitation Total Map";
}