function createFilter(tableSearch, tableList , numCol, numRows) {
	this.tablelist = document.getElementById(tableList)
	this.tablelist.className = "filter"
	this.header = this.tablelist.tHead
	this.tablesearch = document.getElementById(tableSearch)
	this.tablesearch.className = "search"
	
	this.listBody = this.tablelist.tBodies[0]
	this.searchBody = this.tablesearch.tBodies[0]

	this.numCol = numCol
	this.maxRows = numRows
	
	this.selectArray = new Array(this.numCol)
	this.optionArray = new Array(this.numCol)
 
	// create an extra tr beneath the header
	this.newTr = document.createElement("tr")
	this.tablesearch.appendChild(this.newTr)

  	sigtogon('SEARCH');
 	sigtogon('JOBS');

	var j = 1
	for (x=0; x<this.numCol; x++) {

		var id = "searchfield" + j++

		this.searchfield = document.getElementById(id)
		// create one select box to each th
		tempSelect = document.createElement("select", id)
		tempSelect.inplay = false
		tempSelect.filterrow = this
		
		tempSelect.onchange = function() { this.filterrow.applyFilter(this) }
		this.selectArray[x] = tempSelect

		this.searchfield.appendChild(tempSelect)
	}
	
	// change the table normal structure to allow the scroll
	tempTr = document.createElement("tr")
	tempTd = document.createElement("td")
	divHolder = document.createElement("div")
	tempTable = document.createElement("table")
	this.newBody = document.createElement("tbody")
 
	for (x=this.listBody.rows.length-1; x>=0; x--) {
		this.newBody.appendChild(this.listBody.rows[x])
	}

	tempTd.colSpan = this.numCol + 1
	divHolder.className = "holder"
 
	this.listBody.appendChild(tempTr)
	tempTr.appendChild(tempTd)
 	tempTd.appendChild(divHolder)
	divHolder.appendChild(tempTable)
	tempTable.appendChild(this.newBody)
	divHolder.style.height = numRows * this.newBody.rows[0].cells[0].offsetHeight + "px"

	this.populateFilters(0)

}
 
createFilter.prototype.populateFilters = function(sw) {
 
	for (x=0; x<this.numCol; x++) {
 		tempOptionArray = new Array()
		count = 0
 
		// clear all the options from the selects
		if (this.selectArray[x].options.length > 0) {
			for (y=this.selectArray[x].options.length-1; y>=1; y--) {
				this.selectArray[x].remove(y)
			}
		}

		// search through all visible rows and populate an array with all the possibilities
		for (y=0; y<this.newBody.rows.length; y++) {
			if (this.newBody.rows[y].style.display !="none") {
				if (this.newBody.rows[y].cells[0].innerHTML == "") {
				} else {
					tempOptionArray[count] = this.newBody.rows[y].cells[x].innerHTML
					count = count + 1
				}
			}
		}
 
		// sort this array
		tempOptionArray.sort()

		// remove all repeated entries
		for (y=tempOptionArray.length-1; y>=1; y--) {
			if (tempOptionArray[y] == tempOptionArray[y-1]) {
				tempOptionArray.splice(y,1)
			}
		}

		if (sw == 0) {
			// create a blank option to remove the filter
			blankOption = document.createElement("option")
			blankOption.innerHTML = "All&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
			blankOption.value = ""
			this.selectArray[x].appendChild(blankOption)
		}
 
		// loop the array and populate the select box
		for (y=0; y<tempOptionArray.length; y++) {
			newOption = document.createElement("option")
			newOption.innerHTML = tempOptionArray[y]
			newOption.value = tempOptionArray[y]
			this.selectArray[x].appendChild(newOption)
			if (this.selectArray[x].inplay) {
				if (navigator.appName.indexOf("Microsoft") > -1) {
				   this.selectArray[x].options[1].setAttribute('selected',true)
				} else {
				   this.selectArray[x].options[1].selected = "selected"
				}		   
			}
		}
	}
 	this.zebraRows()
 	
}

createFilter.prototype.applyFilter = function(filterrow) {
	cellIndex = filterrow.parentNode.cellIndex
	appliedFilter = filterrow.value
	appliedFilter != "" ? filterrow.inplay = true : filterrow.inplay = false
	
	for (y=0; y<this.numCol; y++) {
	//	var id = "searchfield" + y++
	//	this.searchfield = document.getElementById(id)
	//	alert(this.searchfield)
	//	alert(this.searchBody.rows[1].cells[y].innerHTML)
	}

	// loop all rows and compare the innerHTML from the tds with the filter
	// hide the tds that don't match the filter
	for (x=0; x<this.newBody.rows.length; x++) {
		this.newBody.rows[x].flag = false
		for (y=0; y<this.numCol; y++) {
			if (this.newBody.rows[x].cells[1].innerHTML == "") {
				this.newBody.rows[x].flag = false
			} else {
				if (this.newBody.rows[x].cells[y].innerHTML != this.selectArray[y].value && this.selectArray[y].value !="") {
					this.newBody.rows[x].flag = true

				} 
			}
		}
		this.newBody.rows[x].flag ? this.newBody.rows[x].style.display = "none" : this.newBody.rows[x].style.display = ""
	}
	this.zebraRows()

	// this is to reset filters not to show other choices
	this.populateFilters(1)

}

createFilter.prototype.zebraRows = function() {
	var checker = 0
	this.nextClass = "odd"
	var jcheck = this.newBody.rows.length
	for (x=0; x<this.newBody.rows.length; x++) {
		if (this.newBody.rows[x].style.display != "none") {
			if (this.newBody.rows[x].cells[1].innerHTML != "") {
				checker = 1
			}
			if (x == (jcheck-1)) {
				if (this.nextClass == "even")
					this.nextClass = "odd"
			} else {
				this.nextClass == "odd" ? this.nextClass = "even" : this.nextClass = "odd"
			}
			this.newBody.rows[x].className = this.nextClass
		}
	}
	if (checker == 0) {
		this.newBody.rows[jcheck-1].cells[0].innerHTML = "<B>Sorry no jobs match selected filters</B>"
	} else {
		this.newBody.rows[jcheck-1].cells[0].innerHTML = ""
	}
}