function subfilterWidget(nameParm){
	// class properties
	this.name = nameParm;
	this.div = null;
	this.table = $E({ tag: "table" });
	this.table.className = "subfilterTable";
	this.tbody = $E({ tag: "tbody" });
	this.spanAsc = null;
	this.spanDesc = null;
	this.seperator = null;
	this.sortOrder = "";
	this.options = [];
	this.code = "";
	this.sortCode = "";
	this.hasContent = false;
	this.maxHeight = 127;

/////////////////////////
// Event handlers
/////////////////////////
	this.windowLoaded=function(){
		this.div = $(this.name + "Select");
		this.table.appendChild(this.tbody);
		this.div.appendChild(this.table);
		
		//save off has content
		var hasContent = this.hasContent;

		
		Event.observe(this.spanDesc, "click", this.clickSortDesc.bindAsEventListener(this));
		Event.observe(this.spanAsc, "click", this.clickSortAsc.bindAsEventListener(this));

		// All option
		this.addOptionFirst("-99999", "All");
		
		//restore has content
		this.hasContent = hasContent;
	}


	this.clickSortAsc = function(event){
		if(this.sortOrder == "ASC"){
			return
		}

		this.sortOrder = "ASC";
		this.spanDesc.parentNode.className = "";
		this.spanAsc.parentNode.className = "selected";
	}

	this.clickSortDesc = function(event){
		if(this.sortOrder == "DESC"){
			return
		}

		this.sortOrder = "DESC";
		this.spanDesc.parentNode.className = "selected";
		this.spanAsc.parentNode.className = "";

	}
	
	this.onChange = function(){
		var imgObj = $$("#" + this.filterButtonId + " img")[0];
		
		if(this.getValue().length>0){
			imgObj.src = imgObj.src.replace("b_filter.jpg", "g_filter.jpg");
		}else{
			imgObj.src = imgObj.src.replace("g_filter.jpg", "b_filter.jpg");
		}
	}

/////////////////////////
// methods
/////////////////////////
	this.addOption = function(codeParm, DescriptionParm){
		var addOpt = new this.subfilterWidgetOption(codeParm, DescriptionParm, this);
		this.tbody.appendChild(addOpt.tr);
		this.options.push (addOpt);
		this.setWidth();
		this.hasContent = true;
	}

	this.addOptionFirst = function(codeParm, DescriptionParm){
		var addOpt = new this.subfilterWidgetOption(codeParm, DescriptionParm, this);
		if(this.seperator.nextSibling != null){
			this.tbody.insertBefore(addOpt.tr, this.seperator.nextSibling);
		}else{
			this.tbody.appendChild(addOpt.tr);
		}
		this.options.unshift (addOpt);
		this.hasContent = true;
	}

	this.getValue = function(){
		var returnValue = "";
		var options = $$("#" + this.name + "Select input");
		for (var i = 0; i < options.length; i++){
			var checkBox = options[i];
			if(checkBox.checked==true){
				returnValue += "|" + checkBox.value;
			}
		}

		// strip off leading pipe
		if(returnValue.length > 0){
			var iLen = returnValue.length;
			returnValue = returnValue.substring(1 );
		}

		return returnValue;

	}
	
	this.setWidth = function(widthParm){
		this.table.clientWidth
		if(this.div != null){
			this.resetWidth();
		}
	}

	this.resetHeight = function(){

		if(this.div.clientHeight < this.maxHeight){
			this.div.style.height = (this.div.clientHeight + 4).toString() + "px";
		}else{		
			this.div.style.height = this.maxHeight.toString() + "px";
		}		
		// Having problem with IE6
		this.div.style.height = this.maxHeight.toString() + "px";
	}

	this.resetWidth = function(){
		this.div.style.width="";
		// 30 px for scroll bar
		this.table.style.width = "auto";
		if(this.div.scrollHeight - this.div.clientHeight > 0){
			this.div.style.width = (this.table.clientWidth + 30).toString() + "px";
		}else{
			this.div.style.width = (this.table.clientWidth + 10).toString() + "px";
		}
		this.table.style.width = "100%";
	}
	
	this.loadContent = function(){
		
		var controller = 'subFilterList.ajax';
		var method = 'get'
		
	    new Ajax.Request(controller, {
	        method: 		method,
	        parameters: 	"subfilterType=" + this.code + "&execution=" + $("execution").value + "&subfilterName=" + this.name + "&noCache=" + new Date(),
			evalJSON:  		false,
			asynchronous:  	false,
			onSuccess: 		this.loadContentAjax.bindAsEventListener(this),
	        onFailure: function(transport){
	           // redirectOnFailure(view);
	        },
	        onException: function(transport, exception){
			//   redirectOnFailure(view);
			}
	    });
	}
	
	this.loadContentAjax = function(transport){
		
		this.div.innerHTML = transport.responseText;
		this.table = this.div.firstChild;
		
		// re-hook up clas properties
		var a = "#" + this.name + "Div span.spanAsc";
		this.spanAsc  = $$("#" + this.name + "Select span.spanAsc")[0];
		this.spanDesc = $$("#" + this.name + "Select span.spanDesc")[0];
		
		Event.observe(this.spanDesc, "click", this.clickSortDesc.bindAsEventListener(this));
		Event.observe(this.spanAsc, "click", this.clickSortAsc.bindAsEventListener(this));
		this.spanAsc.style.cursor= "default";
		this.spanDesc.style.cursor= "default";
		
		this.hasContent = true;
	}

/////////////////////////
// Class Constructor 
/////////////////////////
var divTag = '<div name="' + this.name + '" id="' + this.name + 'Select" class="subfilterDiv"></div>';
	document.write(divTag);
	Event.observe(window, "load", this.windowLoaded.bindAsEventListener(this));
	// needed for early added options
	// <tr><td><span class="spanAsc">Sort Ascending</span></td></tr>
	//
	var TR = $E({ tag: "tr"});
	var TD = $E({ tag: "td" });
	TR.className = "sortOrder";
	this.spanAsc  = $E({tag: "span"});
	this.spanAsc.className  = "spanAsc";
	this.spanAsc.appendChild($E("Sort Ascending"));
	TD.appendChild(this.spanAsc);
	TR.appendChild(TD);
	this.tbody.appendChild(TR);

	// Add Sort orders
	// <tr><td><span class="spanDesc">Sort Descending</span></td></tr>
	//
	TR = $E({tag: "tr"});
	TD = $E({tag: "td"});
	TR.className = "sortOrder";
	this.spanDesc = $E({ tag: "span" });
	this.spanDesc.className  = "spanDesc";
	this.spanDesc.appendChild($E("Sort Descending"));
	TD.appendChild(this.spanDesc);
	TR.appendChild(TD);
	this.tbody.appendChild(TR);


	// Seperator
	// <tr class="seperator"><td> </td></tr>
	//
	this.seperator = $E({tag: "tr"});
	this.seperator.className = "seperator";
	TD = $E({ tag: "td"});
	TD.appendChild($E(" "));
	this.seperator.appendChild(TD);
	this.tbody.appendChild(this.seperator);



/////////////////////////
// Sub Classes 
/////////////////////////
	this.subfilterWidgetOption = function(codeParm,descriptionParm,parentParm){
		// class properties
		//<tr>
		//  <td>
		//    <input type="checkbox" value="codeParm">
		//    <span class="description">descriptionParm</span>
		//  </td>
		//</tr>
		this.tr = $E({ tag: "tr" });
		this.parent = parentParm;
		this.checkBox =$E({ tag: "input",
				type: "checkbox",
				value: codeParm});
				
		Event.observe(this.checkBox, "click", this.parent.onChange.bindAsEventListener(this.parent));


		this.checkBox.className = "checkBox";
		var TD = $E({ tag: "td" });
		var SPAN = $E({ tag: "span" });
		SPAN.clasName  = "description";
		
		/////////////////////////
		// Class Constructor 
		/////////////////////////
		
		//<tr>
		//  <td>
		//    <input type="checkbox" >
		//    <span class="spanDesc"></span>
		//  </td>
		//</tr>
		TD.appendChild(this.checkBox);
		SPAN.appendChild($E(descriptionParm));
		TD.appendChild(SPAN);
		this.tr.appendChild(TD);
	}
}