dd_timer		= null;		// Intiates the timer
dd_timer_search = null;		// Intiates the search timer
dd_active		= false;	// Is the mouse over any of the drop downs
dd_height		= 180;		// Max height of the drop down box
dd_current		= "";		// Current active drop down box
dd_default_sel	= 0;		// Default selection
dd_boxes		= "";		// Contains a list of all the id's of open drop down boxes

document.onkeypress = dd_onKeyPress;
document.onclick	= dd_outside_onClick;

String.prototype.dd_trim = function() {
	var x = this;
	x = x.replace(/^\s*(.*)/, "$1");
	x = x.replace(/(.*?)\s*$/, "$1");
	return x;
}

function dd_outside_onClick() {
	var id = dd_current;
	if(id) {
		if(dd_active == false) {
			dd_hideall()
		}
	}
	return true;
}

function dd_onKeyPress(evt) {
	var keycode;
	var match_temp = "";
	var match = "";
	var found = false;
	var i = 0;
	var a = 0;

	if(!evt) {evt = window.event; }
	keycode = evt.keyCode || evt.which;

	var id = dd_current;
	if(id) {
		clearTimeout(dd_timer_search);
		var search_current = document.getElementById("id_" + id + "_search");
		var search_fields = document.getElementById("id_" + id + "_search_fields");
		var current_match = search_current.value + String.fromCharCode(keycode);
		var arr_dd = new Array();
		current_match = current_match.toLowerCase();
		// If this is a new search then create an array with every row in the drop down otherwise only those that contain the start of the search
		if(search_current.value == "") {
			var rowid = "id_row_" + id + "_" + i;			
			while(document.getElementById(rowid)) {	
				if(document.getElementById(rowid).getAttribute("search_start") == current_match) {
					arr_dd[a] = rowid;
					a++;
				}
				i++;
				rowid = "id_row_" + id + "_" + i;
			}
		} else {
			arr_dd = search_fields.value.split("|");
			search_fields.value = "";
		}
		search_current.value = current_match;
		for(i = 0; i < arr_dd.length; i++) {
			if(arr_dd[i]) {
				var div_dd = document.getElementById(arr_dd[i]);
				match_temp = div_dd.getAttribute("search_tag");
				if(match_temp.substring(0, current_match.length) == current_match) {
					if(!found) {
						document.getElementById("id_select_" + id).scrollTop = div_dd.offsetTop;
						found = true;
					}					
					if(div_dd.getAttribute("selected") == "selected") {
						div_dd.className = "dd_mouse_over";			
					} else {
						div_dd.className = "dd_search";	
					}
					search_fields.value += arr_dd[i] + "|";
				} else {
					if(div_dd.getAttribute("selected") == "selected") {
						div_dd.className = "dd_mouse_over";			
					} else {
						div_dd.className = "dd_mouse_out";
					}
				}			
			}
		}
		dd_timer_search = setTimeout("dd_clear_search('" + id + "')", 1000);
	}
	return true 
}

function dd_clear_search(id) {
	var arr_dd = new Array();
	var search_fields = document.getElementById("id_" + id + "_search_fields");

	arr_dd = search_fields.value.split("|");

	for(i = 0; i < arr_dd.length; i++) {
		if(arr_dd[i]) {
			var div_dd = document.getElementById(arr_dd[i]);	
			if(div_dd.getAttribute("selected") == "selected") {
				div_dd.className = "dd_mouse_over";			
			} else {
				div_dd.className = "dd_mouse_out";
			}
		}
	}

	document.getElementById("id_" + id + "_search").value = "";
	document.getElementById("id_" + id + "_search_fields").value = "";
}

function dd_strip_html(text) {
	text = text.replace(/<[^>]+>/gi, "");
	text = text.dd_trim();
	return text;
}

function initSelectBoxes(id) {	
	var id_name = id;
	id = "id_" + id;
	dd_value = document.getElementById("id_row_" + id_name + "_" + dd_default_sel);
	document.getElementById("id_selected_" + id_name).innerHTML = dd_value.innerHTML;
	document.getElementById(id + "_value").value = dd_value.getAttribute("value");
	document.getElementById(id + "_selected_id").value = dd_value.getAttribute("id");
	dd_value.setAttribute("selected", "selected");
	dd_value.className = "dd_mouse_over";
	dd_boxes += id_name + "|";
}

function dd_toggleDropDown(id) {
	dropDown = document.getElementById("id_select_" + id);
	
	if (dropDown.style.visibility == "") {
		dropDown.style.visibility = "hidden";
		dd_hideDropDown(dropDown);
	} else if (dropDown.style.visibility == "hidden") {
		dd_reposition(id);
		dd_showDropDown(dropDown, id);
	} else {
		dd_hideDropDown(dropDown);
	}
}

function dd_hideDropDown(el) {
	dd_current = "";
	el.style.visibility = "hidden";
}

function dd_hideall() {
	var div_boxes = dd_boxes.split("|");

	for(var i = 0; i < div_boxes.length; i++) {
		if(div_boxes[i]) {
			id_tmp = "id_select_" + div_boxes[i];
			dropDown = document.getElementById(id_tmp);	
			dd_hideDropDown(dropDown);
		}
	}
	dd_clear_timer();
}

function dd_showDropDown(el, id) {
	var index = 0;
	var selfound = false;
	var id_tmp = "";
	// Hide all open drop down boxes first
	dd_hideall();

	var current_selected_id = document.getElementById("id_" + id + "_selected_id").value;
	current_selected_id = document.getElementById(current_selected_id);
	document.getElementById("id_select_" + id).scrollTop = current_selected_id.offsetTop;
	dd_current = id;
	el.style.visibility = "visible";
}

function dd_reposition(id) {
	var dd = document.getElementById("id_select_" + id);
	var dd_height_orig = document.getElementById("id_" + id + "_height");
	var newHeight = "";
	var dd_height_tmp = dd_height;

	if(dd.style.height == "") {
		dd_height_tmp = dd.offsetHeight;
	}
	if(dd_height_orig.value == "") dd_height_orig.value = dd_height_tmp;
	if((dd.offsetTop + dd_height_tmp) > document.body.clientHeight) {
		newHeight = dd.offsetTop - dd_height_tmp - 18;
		newHeight = newHeight + "px";
		dd.style.top = newHeight;
	}
	if(dd_height_tmp > dd_height_orig.value) dd_height_tmp = dd_height_orig.value;
	dd.style.height = dd_height_tmp + "px";	
}

function dd_toggleDropDownHide(id) {
	dropDown = document.getElementById("id_select_" + id);	
	dd_hideDropDown(dropDown);
}

function dd_onClick(dd_value, id, id_name) {
	var current_selected_id = document.getElementById(id + "_selected_id").value;	

	document.getElementById("id_selected_" + id_name).innerHTML = dd_value.innerHTML;
	document.getElementById(id + "_value").value = dd_value.getAttribute("value");
	document.getElementById(id + "_selected_id").value = dd_value.getAttribute("id");
	dd_value.setAttribute("selected", "selected");
	dd_value.className = "dd_mouse_over";

	// Deselect the current selection
	if(current_selected_id) {
		var div_selected = document.getElementById(current_selected_id);
		div_selected.setAttribute("selected", "");
		div_selected.className = "dd_mouse_out";
	}

	dd_toggleDropDown(id_name);
}

function dd_mouse_over(dd_value, id) {
	dd_HighlightDDArrow(true, id);
	dd_value.className = "dd_mouse_over";	
	dd_clear_timer();
}

function dd_clear_timer() {
	clearTimeout(dd_timer);
}

function dd_set_timer() {
	dd_timer = setTimeout("dd_hideall()", 2000);
}

function dd_mouse_out(id_name, dd_value) {	
	var dd_selected = document.getElementById("id_" + id_name + "_value").value;
	if(dd_value.value != dd_selected) {		
		dd_value.className = "dd_mouse_out";		
	}
	dd_HighlightDDArrow(false, id_name);
	dd_set_timer();
}

function dd_scroll_event() {
	dd_clear_timer();
}

function dd_select(matrix, id, width, onchange, css) {
	var css = dd_createCSS();
	var s = createIEString(matrix, id, width, onchange);
	document.write(css);
	document.write(s);
	dropDown = document.getElementById("id_select_" + id);
	initSelectBoxes(id)
	dd_hideDropDown(dropDown);	
}

function dd_createCSS() {
	var css = "";

	css += "<style>";
	css += ".dd_table			{ border: 1px solid #7f9db9; }";
	css += ".dd_selected		{ height: 5px; padding: 1px; padding-left: 3px; padding-right: 3px; background-color: #ffffff; }";
	css += ".down_arrow_out		{ width: 15px; height:16; vertical-align: middle; cursor: default; background-color: #b2cffb; border: 1px solid #ddf0fe; }";
	css += ".down_arrow_over	{ width: 15px; height:16; vertical-align: middle; cursor: default; background-color: #ddf0fe; border: 1px solid #b2cffb; }";
	css += ".dd_mouse_over		{ border: 1px solid #587d9c; padding: 1px; border-left: 0px; padding-left: 3px; padding-right: 3px; width: 100%; background-color: #fff963; color: #666666 }";
	css += ".dd_mouse_out		{ border: 1px solid #ffffff; padding: 1px; border-left: 0px; padding-left: 3px; padding-right: 3px; width: 100%; background-color: #ffffff; color: #666666; }";
	css += ".dd_search			{ border: 1px solid #e3bd55; padding: 1px; border-left: 0px; padding-left: 3px; padding-right: 3px; width: 100%; background-color: #fcf8ba; color: #666666; }";
	css += ".select				{ width: 16px; height: 5; padding: 0; font-size: 11px; cursor: pointer; }";
	css += ".dd_dropDown		{ position: absolute; visibility: hidden; width: 100%; border: 1px solid #7f9db9; padding: 0; background: #ffffff; z-index: 1; }";
	css += "</style>";

	return css;
}

function dd_HighlightDDArrow(hover, id) {
	var objArrow = document.getElementById("id_arrow_" + id);
	if(hover) {
		objArrow.className = "down_arrow_over";
		dd_active = true;
	} else {
		objArrow.className = "down_arrow_out";
		dd_active = false;
	}
}

function createIEString(matrix, id, width, onchange) {
	var ie4 = (document.all != null);
	var str = "";
	// Span startTag	
		str += '<span class="select">';
	// form tag that contains the value
		str += '<input type="hidden" id="id_' + id + '_value" name="' + id + '">';
		str += '<input type="hidden" id="id_' + id + '_selected_id">';
		str += '<input type="hidden" id="id_' + id + '_search">';
		str += '<input type="hidden" id="id_' + id + '_search_fields" size="60">';
		str += '<input type="hidden" id="id_' + id + '_height">';
	// Table Tag
		str += '<table cellspacing="0" style="width:' + (width + 15) + 'px;" cellpadding="0" class="dd_table"\n';
		str += ' onClick="dd_toggleDropDown(\'' + id + '\')" onMouseOut="dd_HighlightDDArrow(false, \'' + id + '\');" onMouseOver="dd_HighlightDDArrow(true, \'' + id + '\')">\n';
		str += '<tr>\n';
			str += '<td id="id_selected_' + id + '" style="width:' + width + 'px;" class="dd_selected" onMouseOut="dd_set_timer()" onMouseOver="dd_clear_timer()">&nbsp;</td>\n';
			str += '<td align="center" id="id_arrow_' + id + '" class="down_arrow_out" onMouseOut="dd_set_timer()" onMouseOver="dd_clear_timer()"><img src="/includes/dd_arrow.gif" border="0" width="9" height="6"></td>\n';
		str += '</tr>\n';
		str += '</table>\n';
		
	// DropDown startTag
		str += '<div align="left" type="dd_box" id="id_select_' + id + '" class="dd_dropDown"';
		if(matrix.length > 10) { 
			if(ie4) {
				str += ' style="overflow: auto; width: ' + (width + 15) + 'px; height: 1px;"\n';	
			} else {
				str += ' style="overflow: auto; width: ' + (width + 13) + 'px; height: 1px;"\n';	
			}
		} else {
			if(ie4) {
				str += ' style="overflow: auto; width: ' + (width + 15) + 'px;"\n';	
			} else {
				str += ' style="overflow: auto; width: ' + (width + 13) + 'px;"\n';	
			}
		}
		str += ' onScroll="dd_scroll_event()">\n';

		dd_default_sel = 0;
		var rowcount = 0;
		var search_tag = "";
		for (var i=0; i<matrix.length; i++) {			
			html     = matrix[i].html;
			value    = matrix[i].value;
			heading  = matrix[i].heading;
			selected = matrix[i].selected;
			if(selected == "selected") dd_default_sel = rowcount;
			rowid	= "id_row_" + id + "_" + rowcount;
		// Write option starttag
			if(heading != true) {
				str += '<div id="' + rowid + '" style="width:' + (width - 15) + 'px" type="dd_option_' + id + '" class="dd_mouse_out" onClick="dd_onClick(this, \'id_' + id + '\', \'' + id + '\');';
				if (onchange != null) {
					// this.value works in IE but not firefox so change to get the attribute
					onchange = onchange.replace("this.value", "this.getAttribute('value')");
					str += ' ' + onchange + ';';
				}
				str += '"';
				rowcount++;
			} else {
				str += '<div style="width:' + (width - 15) + 'px" type="dd_heading_' + id + '" class="dd_mouse_out" onClick="return false;"';
			}
			if (value != null)
				str += ' value="' + value + '"';
			str += ' selected="' + selected + '"';
			if(heading != true) {
				str += ' onMouseOver="dd_mouse_over(this, \'' + id + '\');" onMouseOut="dd_mouse_out(\'' + id + '\', this);"\n';
				// Enter the search string				
				search_tag = dd_strip_html(html);
				search_tag = search_tag.toLowerCase();
				search_start = search_tag.substring(0, 1);
				str += 'search_tag="'  + search_tag + '"';
				str += 'search_start="'  + search_start + '"';
			}	
		
			str += '>\n';
			
		// Write HTML contents
			str += html;
		// Write end tag
			str += '</div>\n';
		}
	
	//DropDown endtag
		str += '</div>\n';
		
	// Span endTag
		str += '</span>\n';

	// Place box in a table as center tags put it out of line
		str = '<table cellspacing="0" cellpadding="0" border="0"><tr><td>' + str + '</td></tr></table>';
	return str;
}

function dd_option(html, value, heading, selected) {
	this.html = html;
	this.value = value;
	this.heading = heading;
	this.selected = selected;	
}
