/* 

	SearchField 
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	please visit http://cssglobe.com/post/1202/style-your-websites-search-field-with-jscss/ for more info
	
 */

var optionsArray = new Array();
var displayOptionsArray = new Array();
var listArray = new Array();
var divArray = new Array();
var minWidthsArray = new Array();
var selectedIndexArray = new Array();

/**
 * Modified by Pascal
 * 
 * @param String
 *            fieldId - The id of the field to use
 * @param String
 *            options - The array of options/suggestions to show in the dropdown
 *            (comma seperated)
 * @param String
 *            defaultText - The default text to show when the field is empty
 */
function createJavaScriptSelectionField(fieldId, options, displayOptions,
		defaultText, minWidth) {
	// this is id of the search field you want to add this script to.
	// You can use your own id just make sure that it matches the search field
	// in your html file.
	var id = fieldId;

	// set to either true or false
	// when set to true it will generate search suggestions list for search
	// field based on content of variable below
	var suggestion = true;

	// static list of suggestion options, separated by comma
	// replace with your own
	if (optionsArray[fieldId]) {
		// Append options to already existing options
		optionsArray[fieldId] = optionsArray[fieldId] + ', ' + options;
	} else {
		optionsArray[fieldId] = options;
	}

	if (displayOptionsArray[fieldId]) {
		// Append displayOptions to already existing options
		displayOptionsArray[fieldId] = displayOptionsArray[fieldId] + ', '
				+ displayOptions;
	} else {
		displayOptionsArray[fieldId] = displayOptions;
	}

	minWidthsArray[fieldId] = minWidth;

	// displayOptionsArray[fieldId] += ', a, b, c, d, e, f, g, h, j, k, l, m';
	// optionsArray[fieldId] += ', a, b, c, d, e, f, g, h, j, k, l, m';

	// END CONFIG (do not edit below this line, well unless you really, really
	// want to change something :) )

	// Peace,
	// Alen

	// Hide the original select boxes and replace them with the javascript/css
	// input selection versions
	var field = document.getElementById(id);
	selectionId = getOriginalID(id) + "IESelectShowHider";
	var selectionField = document.getElementById(selectionId);

	selectionField.style.display = "none";
	field.style.width = minWidthsArray[id] + 'px';
	field.style.display = "block";

	var classInactive = "sf_inactive";
	var classActive = "sf_active";
	var classText = "sf_text";
	var classSuggestion = "sf_suggestion";
	this.safari = ((parseInt(navigator.productSub) >= 20020000) && (navigator.vendor
			.indexOf("Apple Computer") != -1));

	if (field) {
		orgID = getOriginalID(id);
		orgField = document.getElementById(orgID);
		field.c = field.className;

		if (orgField.options[orgField.selectedIndex].value != "") {
			field.value = orgField.options[orgField.selectedIndex].text;
				if (field.c.indexOf(classText) == -1) {
					field.className = field.c + " " + classText;
				}
				if (field.className.indexOf(classInactive) != -1) {
					field.className = field.className.replace(classInactive, '');
				}
		} else {
			field.value = defaultText;
			if (field.c.indexOf(classInactive) == -1) {
					field.className = field.c + " " + classInactive;
			}
			if (field.className.indexOf(classText) != -1) {
					field.className = field.className.replace(classText, '');
			}
		}

		field.onfocus = function() {
			if (this.c.indexOf(classActive) == -1) {
					this.className = this.c + " " + classActive;
			}
			if (this.className.indexOf(classInactive) != -1) {
					this.className = this.className.replace(classInactive, '');
			}
			this.value = (this.value == "" || this.value == defaultText) ? ""
					: this.value;

			// Call the original fields onfocus
			orgID = getOriginalID(this.id);
			orgField = document.getElementById(orgID);

			try {
				orgField.onfocus();
			} catch (err) {
				// do nothing, orgField may not have an onfocus method
			}
			
			var arr = getListItems(field.value, field.id, true);
			createList(arr, field.id);
		};
		field.onblur = function() {
			if (this.value != "" && this.value != defaultText) {
				if (this.className.indexOf(classText) == -1) {
					this.className = this.className + " " + classText
				}
				if (this.className.indexOf(classInactive) != -1) {
					this.className = this.className.replace(classInactive, '');
				}
			} else {
				if (this.className.indexOf(classInactive) == -1) {
					this.className = this.className + " " + classInactive;
				}
				if (this.className.indexOf(classText) != -1) {
					this.className = this.className.replace(classText, '');
				}
				if (this.className.indexOf(classActive) != -1) {
					this.className = this.className.replace(classActive, '');
				}
			}
			
					
			this.value = (this.value != "" && this.value != defaultText) ? this.value
					: defaultText;
			// Problems when trying to scroll on IE are solved in here
			lostFieldId = '';
			IUseBadBrowsers = false;
			// Check if M$ browsers are used
			if (IEBrowser.version() == 6 || IEBrowser.version() == 7) {
				lostFieldId = document.activeElement.id;
				IUseBadBrowsers = true;
			}
			if (IUseBadBrowsers == false) {
				clearList(field.id);  // If no M$ browsers are used the scrolling issue doesn't exist
			} else {
				if (lostFieldId != field.id + '_sugestion') {
					clearList(field.id);
				} else {
					document.activeElement.onfocus = function() {
						field.className = "middlefield select_date sf_text";
					}

					document.activeElement.onblur = function() {
						clearList(field.id);
						field.focus();
						field.blur();
					}
				}
			}
			// Call the original fields onblur (and in case of select, onchange)
			// methods
			orgID = getOriginalID(this.id);
			orgField = document.getElementById(orgID);

			try {
				orgField.onblur();
			} catch (err) {
				// do nothing, orgField may not have an onfocus method
			}

			try {
				orgField.onchange();
			} catch (err) {
				// do nothing, orgField may not have an onchange method
			}
		};

		if (suggestion) {

			selectedIndexArray[fieldId] = 0;

			field.setAttribute("autocomplete", "off");
			divArray[fieldId] = document.createElement("div");
			listArray[fieldId] = document.createElement("ul");

			divArray[fieldId].style.display = "none";
			divArray[fieldId].style.width = "auto";
			listArray[fieldId].style.display = "none";
			listArray[fieldId].style.position = "relative";
			divArray[fieldId].id = fieldId + '_sugestion';
			divArray[fieldId].className = classSuggestion;
			divArray[fieldId].appendChild(listArray[fieldId]);
			field.parentNode.appendChild(divArray[fieldId]);

			field.onkeypress = function(e) {
				var key = getKeyCode(e);
				id = getID(e);

				if (key == 13) { // enter
					selectList(id);
					selectedIndexArray[id] = 0;
					return false;
				}
				;
			};

			field.onclick = function(e) {
				id = getID(e);
				var arr = getListItems(field.value, id, true);
				createList(arr, id);
			}

			field.onkeyup = function(e) {
				id = getID(e);
				var key = getKeyCode(e);

				switch (key) {
				case 13:
					return false;
					break;
				case 27: // esc
					field.value = "";
					selectedIndexArray[id] = 0;
					clearList(id);
					break;
				case 38: // up
					navList("up", id);
					break;
				case 40: // down
					navList("down", id);
					break;
				default:
					startList(id);
					orgID = getOriginalID(id);
					theField = document.getElementById(id);
					selectOrgList(orgID, theField.value);
					break;
				}
				;
			};

			this.startList = function(id) {
				theField = document.getElementById(id);
				var arr = getListItems(theField.value, id, false);
				if (theField.value.length > 0) {
					createList(arr, id);
				} else {
					clearList(id);
				}
				;
			};

			this.getListItems = function(value, fieldId, allListItems) {
				var arr = new Array();

				// First check if we have displayOptions
				var src = displayOptionsArray[fieldId];

				if (src == '') {
					// No display options? use the default options
					src = optionsArray[fieldId];
				}

				var src = src.replace(/, /g, ",");
				var arrSrc = src.split(",");

				if (!allListItems) {
					for (i = 0; i < arrSrc.length; i++) {
						if (arrSrc[i].substring(0, value.length).toLowerCase() == value
								.toLowerCase()) {
							arr.push(arrSrc[i]);
						}
						;
					}
					;
				} else {
					// Just put all in the array
					for (i = 0; i < arrSrc.length; i++) {
						arr.push(arrSrc[i]);
					}
					;
				}
				return arr;
			};

			this.createList = function(arr, id) {
				resetList(id);
				if (arr.length > 0) {
					if (IEBrowser.version() == 6) {
						countdown = 2;
					} else {
						countdown = 1;
					}
					for (i = 0; i < arr.length; i++) {
						if (IEBrowser.version() == 6 && i == 0) {
							// IE6 bugfix, the first LI element doesn't get a blue background
							// when selected, so for IE6 we create a hidden first element, which never
							// gets selected, but because of this, the rest can be selected
							li = document.createElement("li");
							li.style.display = 'none';
							listArray[id].appendChild(li);
						}
						
						li = document.createElement("li");
						a = document.createElement("a");
						a.href = "javascript:void(0);";
						a.i = i + countdown;
						a.innerHTML = arr[i];
						a.style.textDecoration = "none";
						li.i = i + countdown;
						li.onmouseover = function() {
							navListItem(this.i, id);
						};
						a.onmousedown = function() {
							index = this.i;
							if (IEBrowser.version() == 6) {
								index = index - 1;
							}
							selectedIndexArray[id] = index;
							
							selectList(id);
							return false;
						};
						li.appendChild(a);
						listArray[id].setAttribute("tabindex", "-1");
						listArray[id].appendChild(li);
					}
					;
					if (arr.length < 8) {
						if (IEBrowser.version() == 6) {
							listArray[id].style.width = (Number(minWidthsArray[id]) - Number(2))
									+ "px";
						} else if (IEBrowser.version() == 7) {
							listArray[id].style.width = (Number(minWidthsArray[id]) + Number(21))
									+ "px";
						} else {
							listArray[id].style.width = (Number(minWidthsArray[id]) + Number(21))
									+ "px";
						}
						divArray[id].style.overflow = "visible";
					} else {
						if (IEBrowser.version() == 6) {
							listArray[id].style.width = (Number(minWidthsArray[id]) - Number(18))
									+ "px";
							divArray[id].style.height = "150px";
						} else if (IEBrowser.version() == 7) {
							listArray[id].style.width = (Number(minWidthsArray[id]) + Number(21))
									+ "px";
						} else {
							listArray[id].style.width = (Number(minWidthsArray[id]) + Number(5))
									+ "px";
						}

						divArray[id].style.overflowY = "scroll";
					}
					listArray[id].style.display = "block";
					divArray[id].style.display = "block";
				} else {
					clearList(id);
				}
				;
			};

			this.resetList = function(id) {
				var li = listArray[id].getElementsByTagName("li");
				var len = li.length;
				for ( var i = 0; i < len; i++) {
					listArray[id].removeChild(li[0]);
				}
				;
			};

			this.navList = function(dir, id) {
				selectedIndexArray[id] += (dir == "down") ? 1 : -1;
				li = listArray[id].getElementsByTagName("li");
				if (selectedIndexArray[id] < 1)
					selectedIndexArray[id] = li.length;
				if (selectedIndexArray[id] > li.length)
					selectedIndexArray[id] = 1;
				navListItem(selectedIndexArray[id], id);
			};

			this.navListItem = function(index, id) {
				selectedIndexArray[id] = index;
				li = listArray[id].getElementsByTagName("li");
				for ( var i = 0; i < li.length; i++) {
					
					li[i].className = (i == (selectedIndexArray[id] - 1)) ? "selected"
							: "";
				}
				;
			};

			this.selectList = function(id) {
				orgID = getOriginalID(id);
				orgField = document.getElementById(orgID);
				theField = document.getElementById(id);
				li = listArray[id].getElementsByTagName("li");

				if (IEBrowser.version() == 6) {
					a = li[selectedIndexArray[id]].getElementsByTagName("a")[0];
				} else {
					a = li[selectedIndexArray[id] - 1].getElementsByTagName("a")[0];
				}

				// Check if we have a display option
				displayOption = getDisplayOptionValue(id, selectedIndexArray[id] - 1);
				if (displayOption != '') {
					theField.value = displayOption;
				} else {
					theField.value = a.innerHTML;
				}

				// Select orginal list value
				selectOrgList(orgID, theField.value);
				
				// Execute orignal onchange method
				try {
					orgField.onchange();
				} catch (err) {
					// do nothing, orgField may not have an onchange method
				}
				
				clearList(id);
			};

			this.selectOrgList = function(orgID, value) {
				orgField = document.getElementById(orgID);
				displayOptionIndex = getDisplayOptionIndex(orgID + 'I', value);

				if (displayOptionIndex != -1) {
					var src = optionsArray[orgID + 'I'];
					var src = src.replace(/, /g, ",");
					var arrSrc = src.split(",");

					value = arrSrc[displayOptionIndex];
				}

				var optionSelected = false;
				for (count = 0; count < orgField.options.length; count++) {
					if (orgField.options[count].value == value) {
						orgField.options[count].selected = true;
						optionSelected = true;
					}
				}

				if (!optionSelected) {
					// reset the original field
					orgField.options[0].selected = true;
				}
			};

			this.getDisplayOptionValue = function(fieldId, index) {
				var src = displayOptionsArray[fieldId];
				if (src == '') {
					return '';
				}
				var src = src.replace(/, /g, ",");
				var arrSrc = src.split(",");

				if (arrSrc.length > index) {
					return arrSrc[index];
				}
			};

			this.getDisplayOptionIndex = function(fieldId, value) {
				var src = displayOptionsArray[fieldId];
				if (src == '') {
					return -1;
				}
				var src = src.replace(/, /g, ",");
				var arrSrc = src.split(",");

				for (i = 0; i < arrSrc.length; i++) {
					if (arrSrc[i].toLowerCase() == value.toLowerCase()) {
						return i;
					}
					;
				}
				;
				return -1;
			};

		}
		;
	}
	;

	this.clearList = function(id) {
		divArray[id].style.display = "none";
		listArray[id].style.display = "none";
		selectedIndexArray[id] = 0;
	};
	this.getKeyCode = function(e) {
		var code;
		if (!e)
			var e = window.event;
		if (e.keyCode)
			code = e.keyCode;
		return code;
	};
	this.getID = function(e) {
		var id;
		var target;
		if (!e)
			var e = window.event;
		if (!e.target) {
			target = e.srcElement;
		} else {
			target = e.target;
		}

		id = target.id;
		return id;
	};
};

this.getOriginalID = function(inputID) {
	return inputID.substring(0, inputID.length - 1);
};

// script initiates on page load.

this.addEvent = function(obj, type, fn) {
	if (obj.attachEvent) {
		obj['e' + type + fn] = fn;
		obj[type + fn] = function() {
			obj['e' + type + fn](window.event);
		}
		obj.attachEvent('on' + type, obj[type + fn]);
	} else {
		obj.addEventListener(type, fn, false);
	}
	;
};
// addEvent(window,"load",searchfield);