var AutoCompleteTextBox = Class.create();
AutoCompleteTextBox.prototype = {
	initialize: function(id, width, height, ajaxHandler, thumbWidth, thumbHeight, onEnter, submitOnSelect) {
		this.id = id;
		this.textboxElement = $(id);
		this.textboxWidth = width;
		this.textboxHeight = height;
		this.ajaxHandler = ajaxHandler;
		this.selectedOption = -1;
		this.divHasFocus = false;
		this.matchingOptions = new Array();
		this.thumbWidth = thumbWidth;
		this.thumbHeight = thumbHeight;
		this.customOptionsVisible = false;
		this.onEnter = onEnter || Prototype.emptyFunction;
		this.submitOnSelect = submitOnSelect || false;
		if (this.textboxElement != null) {
			this.textboxElement.observe('keyup', this.handleKeyPress.bindAsEventListener(this));
			$(this.id + 'Div').observe('mouseover', this.setFocus.bindAsEventListener(this));
			$(this.id + 'Div').observe('mouseout', this.unFocus.bindAsEventListener(this));
			this.textboxElement.observe('blur', this.hideList.bindAsEventListener(this));
			this.setupResultDiv();
		}
	},

	setupResultDiv: function() {
		var elm = $(this.id + 'Div');
		var pos = this.textboxElement.positionedOffset();
		var top = pos.top + this.textboxHeight;
		elm.className = 'borderRightLeftTopBottom';
		elm.setStyle({
			position: 'absolute',
			top: top + 'px',
			left: pos.left + 'px',
			width: this.textboxWidth + 'px',
			zIndex: 9000
		});
	},

	handleKeyPress: function(event) {
		var selectedOptionID = this.getSelectedOption();
		if (selectedOptionID >= 0) {
			this.selectedOption = selectedOptionID;
		}
		if (event.keyCode == 38 || event.keyCode == 40) {
			if (event.keyCode == 40) {
				this.selectedOption = this.selectedOption < this.matchingOptions.length - 1 ? this.selectedOption + 1 : 0;
			} else if (event.keyCode == 38) {
				this.selectedOption = this.selectedOption > 0 ? this.selectedOption - 1 : this.matchingOptions.length - 1;
			}
			for (var i = 0; i < this.matchingOptions.length; i++) {
				var obj = this.matchingOptions[i];
				if (i == this.selectedOption) {
					obj.select();
				} else {
					obj.deselect();
				}
			}
		} else if (event.keyCode == 13) {
			if (this.selectedOption < 0) {
				this.onEnter(this.textboxElement.value);
			} else {
				var value = this.matchingOptions[this.selectedOption].id;
				this.textboxElement.value = value;
				this.matchingOptions[this.selectedOption].deselect();
				this.selectedOption = -1;
				if (this.onEnter != Prototype.emptyFunction && this.submitOnSelect) {
					this.onEnter(value);
				}
			}
			this.hideList();
		} else {
			this.doSearch();
		}
	},

	getSelectedOption: function() {
		for (var i = 0; i < this.matchingOptions.length; i++) {
			var obj = this.matchingOptions[i];
			if (obj.isSelected) {
				return i;
			}
		}
		return -1;
	},

	doSearch: function() {
		var keyword = this.textboxElement.value;
		if (keyword.length >= 3) {
			if (!this.autoCompleteOptions) {
				new Ajax.Request(this.ajaxHandler, { onSuccess: this.handleList.bindAsEventListener(this, keyword) });
			}
			else {
				this.fillDropdown(keyword);
			}
		} else {
			$(this.id + 'Div').hide();
		}
	},

	handleList: function(response, keyword) {
		var results = new Array();
		results = eval('(' + response.responseText + ')');
		this.autoCompleteOptions = new Array();
		for (var i = 0; i < results.length; i++) {
			this.autoCompleteOptions.add(new AutoCompleteOption(results[i].ID, results[i].Value, results[i].Image, results[i].ExtraText, this.id, this.thumbWidth, this.thumbHeight));
		}
		this.fillDropdown(keyword);
	},

	fillDropdown: function(keyword) {
		this.customOptionsVisible = false;
		var matchFound = false;
		var elm = $(this.id + 'Div');
		elm.update();
		this.matchingOptions = new Array();
		for (var i = 0; i < this.autoCompleteOptions.length; i++) {
			var obj = this.autoCompleteOptions[i];
			if (obj.isMatch(keyword)) {
				matchFound = true;
				obj.isSelected = false;
				elm.appendChild(obj.getDOMElement());
				this.matchingOptions.add(obj);
			}
		}
		if (matchFound) {
			$(this.id + 'Div').show();
			this.selectedOption = -1;
		}
	},

	setFocus: function() {
		this.divHasFocus = true;
		if (this.selectedOption >= 0) {
			this.matchingOptions[this.selectedOption].deselect();
			this.selectedOption = -1;
		}
	},

	unFocus: function() {
		this.divHasFocus = false;
	},

	hideList: function(e) {
		if (!this.divHasFocus) {
			$(this.id + 'Div').hide();
		}
	},

	showCustomDropdown: function(options) {
		if (this.customOptionsVisible) {
			this.divHasFocus = false;
			$(this.id + 'Div').hide();
			this.customOptionsVisible = false;
		} else {
			this.customOptionsVisible = true;
			this.matchingOptions = new Array();
			var elm = $(this.id + 'Div');
			elm.update();
			for (var i = 0; i < options.values().length; i++) {
				var obj = options.get(i);
				elm.appendChild(obj.getDOMElement());
				this.matchingOptions.add(obj);
			}
			$(this.id + 'Div').show();
			this.selectedOption = -1;
		}
	}
}

var AutoCompleteOption = Class.create();
AutoCompleteOption.prototype = {
	initialize: function(id, value, image, extraText, textboxID, thumbWidth, thumbHeight) {
		this.id = id;
		this.value = value;
		this.textBoxID = textboxID;
		this.isSelected = false;
		this.imagePath = image;
		this.extraText = extraText;
		this.imageWidth = thumbWidth;
		this.imageHeight = thumbHeight;
	},

	getDOMElement: function() {
		this.elm = new Element('div', { 'class': 'cursorHand' });
		this.elm.appendChild(this.getTable());
		this.elm.observe('mouseover', this.mouseoverEvent.bindAsEventListener(this));
		this.elm.observe('mouseout', this.mouseoutEvent.bindAsEventListener(this));
		this.elm.observe('click', this.clickEvent.bindAsEventListener(this));
		return this.elm;
	},

	getTable: function() {
		var hasImage = this.imagePath != '' && typeof (this.imagePath) != 'undefined' && this.imagePath != null;
		var mainElm = new Element('table', { 'cellspacing': '0', 'cellpadding': '2', 'class': 'borderBottom' });
		mainElm.setStyle({ width: '100%' });
		var tbody = new Element('tbody');
		var row = new Element('tr');
		var imageTD = new Element('td');
		var textTD = new Element('td', { 'valign': 'top' });
		textTD.setStyle({ width: '100%' });
		if (hasImage) {
			var imageElm = new Element('img');
			imageElm.src = this.imagePath;
			imageElm.setStyle({ width: this.imageWidth, height: this.imageHeight, border: '0px' });
			imageTD.appendChild(imageElm);
			row.appendChild(imageTD);
		}
		var textElm = new Element('div');
		textElm.setStyle({ fontWeight: 'bold' });
		textElm.appendChild(document.createTextNode(this.id));
		textTD.appendChild(textElm);
		if (this.extraText != '' && typeof (this.extraText) != 'undefined' && this.extraText != null) {
			var extraTextElm = new Element('div').setStyle({color: 'black', fontWeight: 'normal'});
			extraTextElm.setStyle({ marginTop: '2px' });
			extraTextElm.appendChild(document.createTextNode(this.extraText));
			textTD.appendChild(extraTextElm);
		}
		row.appendChild(textTD);
		tbody.appendChild(row);
		mainElm.appendChild(tbody);
		return mainElm;
	},

	isMatch: function(val) {
		var result = false;
		val = val.toLowerCase();
		var subject = this.value.toString().toLowerCase();
		if (subject.contains(val)) {
			result = true;
		}
		return result;
	},

	select: function() {
		this.mouseoverEvent();
	},

	deselect: function() {
		this.mouseoutEvent();
	},

	mouseoverEvent: function() {
		this.isSelected = true;
		this.elm.className = 'tdSpeciel cursorHand';
		this.elm.setStyle({
			color: 'Black'
		});
	},

	mouseoutEvent: function() {
		this.isSelected = false;
		this.elm.className = 'cursorHand';
		this.elm.setStyle({
			color: 'Black'
		});
	},

	clickEvent: function() {
		$(this.textBoxID).value = this.id;
		$(this.textBoxID + 'Div').hide();
	}
}
try {
} catch (e) {}