//Global variables...
var sortcolumn = -1;
var headingRows;
var newTable;
var newTableBody;

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

function thOver() {
	this.style.backgroundColor = '#333333';
	this.style.color = '#FFFFFF';
	this.style.cursor = 'pointer';
}

function thOff() {
	if (this.className != 'sorted') {
		this.style.backgroundColor = '#DADADA';
		this.style.color = '#000000';
		this.style.curosr = '';
	}
}

function sortTable() {
	//First, get the column index to sort by.
	trTag = this.parentNode;
	
	tdTags = trTag.getElementsByTagName('td');
	
	for (var x = 0; x < tdTags.length; x++) {
		if (tdTags[x] == this) {
			sortcolumn = x;
			break;
		}
	}
	
	//Put the relevant data into its own array.
	var trTags = document.getElementById('statsTable').getElementsByTagName('tr');
	
	var sortArray = new Array();
	var y = 0;
	
	for (var x = 0; x < trTags.length; x++) {
		if (x > headingRows[0] && x < headingRows[1]) {
			
			var tdTags = trTags[x].getElementsByTagName('td');
			
			//Array(DATA, ORIGINAL ARRAY INDEX)
			sortArray[y] = Array(stripHTMLTags(tdTags[sortcolumn].innerHTML), x);
			y++;
		}
	}
	
	if (sortcolumn == 0 || sortcolumn == 12 || sortcolumn == 18) {
		//Do absolutely nothing, these columns are empty.
	}
	else if (sortcolumn == 1) {
		//Just do a regular sort (alphabetically);
		sortArray.sort();
	}
	else {
		//Sort numerically in descending order.
		sortArray.sort(sortNumber);
	}
	
	var newNodes = Array();
	
	for (var x = 0; x < sortArray.length; x++) {
		newNodes[x] = trTags[sortArray[x][1]].cloneNode(true);
	}
	
	var trTags = document.getElementById('statsTable').getElementsByTagName('tr');
	
	//Add the first rows to the new table
	for (var x = 0; x <= headingRows[0]; x++) {
		newChild = trTags[x].cloneNode(true);
		newTableBody.appendChild(newChild);

		if (x == 0) {
			//Loop through each TD tag and highlight the column you're currently sorting by.
			for (var y = 0; y < newChild.getElementsByTagName('td').length; y++) {
				if (y == sortcolumn) {
					newChild.getElementsByTagName('td')[y].style.backgroundColor = '#333';
					newChild.getElementsByTagName('td')[y].style.color = '#FFF';
					newChild.getElementsByTagName('td')[y].className = 'sorted';
				}
				else {
					if (y != 0 && y != 18) {
						newChild.getElementsByTagName('td')[y].style.backgroundColor = '#DADADA';
						newChild.getElementsByTagName('td')[y].style.color = '#000';
						newChild.getElementsByTagName('td')[y].className = '';
					}
				}
			}
		}
	}
	
	//Loop through the 'new nodes' and add them to the new table.
	for (var x = 0; x < newNodes.length; x++) {
		newTableBody.appendChild(newNodes[x]);
		
		//Loop through each TD tag and highlight the column you're currently sorting by.
		for (var y = 0; y < newNodes[x].getElementsByTagName('td').length; y++) {
			if (y == sortcolumn) {
				newNodes[x].getElementsByTagName('td')[y].style.backgroundColor = '#DADADA';
			}
			else {
				newNodes[x].getElementsByTagName('td')[y].style.backgroundColor = '#FFF';
			}
		}
	}
	
	//Add the 'RESERVE PLAYERS' heading back in
	newChild = trTags[parseInt(headingRows[1])].cloneNode(true);
	newTableBody.appendChild(newChild);


	//Put the reserve player data into its own array.
	var sortArray = new Array();
	var y = 0;
	
	for (var x = 0; x < trTags.length; x++) {
		if (x > headingRows[1] && x < (parseInt(headingRows[2]) - 2)) {
			
			var tdTags = trTags[x].getElementsByTagName('td');
			
			//Array(DATA, ORIGINAL ARRAY INDEX)
			sortArray[y] = Array(stripHTMLTags(tdTags[sortcolumn].innerHTML), x);
			y++;
		}
	}
	
	if (sortcolumn == 0 || sortcolumn == 12 || sortcolumn == 18) {
		//Do absolutely nothing, these columns are empty.
	}
	else if (sortcolumn == 1) {
		//Just do a regular sort (alphabetically);
		sortArray.sort();
	}
	else {
		//Sort numerically in descending order.
		sortArray.sort(sortNumber);
	}
	
	var newNodes = Array();
	
	for (var x = 0; x < sortArray.length; x++) {
		newNodes[x] = trTags[sortArray[x][1]].cloneNode(true);
	}
	
	//Loop through the 'new nodes' and add them to the new table.
	for (var x = 0; x < newNodes.length; x++) {
		newTableBody.appendChild(newNodes[x]);

		//Loop through each TD tag and highlight the column you're currently sorting by.
		for (var y = 0; y < newNodes[x].getElementsByTagName('td').length; y++) {
			if (y == sortcolumn) {
				newNodes[x].getElementsByTagName('td')[y].style.backgroundColor = '#DADADA';
			}
			else {
				newNodes[x].getElementsByTagName('td')[y].style.backgroundColor = '#FFF';
			}
		}
	}


	//Add all the rows after the sorted rows
	for (var x = 0; x < trTags.length; x++) {
		if (x >= (parseInt(headingRows[2]) - 2)) {
			newChild = trTags[x].cloneNode(true);
			newTableBody.appendChild(newChild);
		}
	}
	
	document.getElementById('statsTable').parentNode.id = 'newTableContainer';

	document.getElementById('newTableContainer').removeChild(document.getElementById('statsTable'));	
	document.getElementById('newTableContainer').appendChild(newTable);
	
	addEventHandlers();
}

function sortNumber(a, b) {
	return b[0] - a[0];
}

function stripHTMLTags(stringval) {
	var re = /<\S[^><]*>/g
	return stringval.replace(re, "");
}

function addEventHandlers() {
	//Grab the tables in the document.
	var tables = document.getElementsByTagName('table');
	
	newTable = tables[1].cloneNode(false);
	
	newTableBody = document.createElement('tbody');
	newTable.appendChild(newTableBody);
	
	tables[0].id = 'outerTable';
	tables[1].id = 'statsTable';

	//Add event handlers for the table headers
	
	trTags = document.getElementById('statsTable').getElementsByTagName('tr');
	
	tdTags = trTags[0].getElementsByTagName('td');
	
	for (var x = 0; x < tdTags.length; x++) {
		tdTags[x].onmouseover = thOver;
		tdTags[x].onmouseout = thOff;
		tdTags[x].onfocus = thOver;
		tdTags[x].onblur = thOff;
		tdTags[x].onclick = sortTable;
	}
	
	var hRows = '';
	
	for (var x = 0; x < trTags.length; x++) {
		thisRowTDs = trTags[x].getElementsByTagName('td');
		
		if (thisRowTDs.length < 5) {
			hRows += x+', ';
		}
	}
	
	headingRows = hRows.split(',');
}