Options = new Class({
	initialize: function(attachto, name, width) {
		this.name=name;
		this.width=width;
		
		// Create div
		this.selfdiv = attachto;
		this.selfdiv.style.position = 'absolute';
		this.selfdiv.style.width=this.width;
		this.selfdiv.style.border='1px solid black';
		this.selfdiv.className='droplist';
		this.selfdiv.style.display='none';
		
	},
	
	hide: function() {
		//alert('hide');
		if (this.selfdiv.style.display != 'none') {
			this.selfdiv.style.display='none';
		}
	},
	show: function() {
		//alert('show');
		if (this.selfdiv.style.display != 'block') {
			if ((this.selfdiv.innerHTML+"").trim() != '') {
				this.selfdiv.style.display='block';
			}
		}
	}
	
	
});

DropWidget = new Class({
	setOptions: function(options) {
		// Default options
		this.options = {
			width: '200px',
			emptyMessage: null,
			onBlur: null,
			defaultValue: '',
			loadingImage: null
		};
		Object.extend(this.options, options || {});
	},
	
	
	initialize: function(name, loadurl, options) {
		this.setOptions(options);
		this.name = name;
		this.loadurl = loadurl;
		
		// Document.write the textarea
		document.write('<div><input type="text" id="'+this.name+'_holder_id" value=""></div><div id="'+this.name+'_div_id"></div><input type="hidden" id="'+this.name+'_id" name="'+this.name+'" value="">');
		this.inputbox = $(this.name+'_holder_id');
		this.valuebox = $(this.name+'_id');
		this.divholder = $(this.name+'_div_id');
		
		this.valuebox.value = this.options.defaultValue;
		
		//dbgr.printObject(this.inputbox.style.properties);
		//var teststr="test1";
		//dbgr.printObject(teststr);
		
		// Set the input boxes width
		this.inputbox.style.width=this.options.width;
		this.inputbox.setAttribute("autocomplete", "off");
		
		this.optionsdiv = new Options(
			this.divholder,
			this.name,  
			this.options.width
		);
		
		this.inputvalue=this.inputbox.value;

		
		this.usedkeys = false;
		this.checkInput.periodical(.2, this);
		
		this.inwidget = false;
		
		
		
		// Show the widget
		this.inputbox.addEvent('mouseup', this.focusInput.bind(this));
		
		// Don't let it hide on a document click if we are in the widget
		this.inputbox.addEvent('mouseover', function() {this.inwidget=true;}.bind(this));
		this.optionsdiv.selfdiv.addEvent('mouseover', function() {this.inwidget=true;}.bind(this));
		this.inputbox.addEvent('mouseout', function() {this.inwidget=false;}.bind(this));
		this.optionsdiv.selfdiv.addEvent('mouseout', function() {this.inwidget=false;}.bind(this));
		
		// Focus blank, show emptyMessage
		if (this.options.emptyMessage != null) {
			this.inputbox.addEvent('focus', function() {
				if (this.inputbox.value.trim() == '') {
					this.optionsdiv.selfdiv.innerHTML = this.options.emptyMessage;
					this.optionsdiv.show();
				}
				this.focusInput();
				
			}.bind(this));
			
		}
		if (this.options.onBlur != null) {
			this.inputbox.addEvent('blur', this.blurInput.bind(this));
		}
		
	},
	focusInput: function() {
		this.optionsdiv.show();
		
		// Here we register an event that hides the options window when we click anywhere else
		// TODO: what happends if this gets called before the page is done loading?
		document.onmousedown = function() {
			// Only hide if we aren't in the widget box
			if (!this.inwidget) {
				this.optionsdiv.hide();
				this.inputbox.onkeypress = null;
				this.inputbox.onkeydown = null;
				//this.inputbox.removeEvent('keypress', this.keyDown);
			}
		}.bind(this);
		//this.inputbox.onkeypress = this.keyDown.bind(this);
		//this.inputbox.addEvent('keypress', this.keyDown.bind(this));
		//this.inputbox.onkeydown = this.keyDown.bindAsEventListener(this);
		if (document.all) {
			this.inputbox.onkeydown = function (evnt) {this.keyDown(evnt);}.bind(this);
			//this.inputbox.onkeydown = this.keyDown.bindAsEventListener(this);
		} else {
			this.inputbox.onkeypress = this.keyDown.bind(this);
		}
	},
	blurInput: function() {
		if (!this.inwidget) {
			// If we are in the widget, then this will get taken care of in the clickOption event
			this.options.onBlur();
		}
	},
	keyDown: function(evnt) {
		
		if (window.event) {
			var keyCode = window.event.keyCode;
		} else {
			var keyCode = evnt.keyCode;
		}
		
		//dbgr.alert(keyCode);
		
		if (keyCode == 40 || keyCode == 38) {
			this.usedkeys = true;
			// 40 = Down, 38 = Up
			var currentSel = $E('li.selected', this.optionsdiv.selfdiv);
			
			
			//dbgr.alert(currentSel.childNodes[0].childNodes[0].nodeValue);
			if (keyCode == 38) {
				// Up
				if (currentSel && currentSel.previousSibling) {
					currentSel.removeClassName('selected');
					currentSel.previousSibling.addClassName('selected');
				} else if (!currentSel) {
					var tempSel = $ES('li', this.optionsdiv.selfdiv);
					if (tempSel && tempSel.length > 0) {
						tempSel[tempSel.length-1].addClassName('selected');
					}
				}
			} else if (keyCode == 40) {
				// Down
				if (currentSel && currentSel.nextSibling) {
					currentSel.removeClassName('selected');
					currentSel.nextSibling.addClassName('selected');
				} else if (!currentSel)  {
					var tempSel = $E('li', this.optionsdiv.selfdiv);
					if (tempSel) {
						tempSel.addClassName('selected');
					}
				}
			}
			
			return false;
		}
		if (keyCode ==  13) {
			// Press Enter
			var currentSel = $E('li.selected', this.optionsdiv.selfdiv);
			if (!currentSel) {
				var currentSel = $E('li', this.optionsdiv.selfdiv);
			}
			if (currentSel) {
				this.clickOption(currentSel);
			}
			return false;
		}
		//dbgr.printObject(evnt);
	//	dbgr.alert(this.name+": "+this.inputbox.value+" - "+evnt.keyCode);
		return true;
	},
	checkInput: function() {
		var currentinput = this.inputbox.value;
		if (currentinput.length == 0) {
			if (this.options.emptyMessage == null) {
				this.optionsdiv.hide();
			} else {
				this.optionsdiv.selfdiv.innerHTML = this.options.emptyMessage;
			}
		} else if (this.inputvalue != currentinput) {
			this.inputvalue=this.inputbox.value;
			
			if (this.options.loadingImage != null) {
				// Show loading icon
				this.inputbox.style.background = '#FFF url(\''+this.options.loadingImage+'\') no-repeat bottom right';
			}
			
			// We have a changed character, so lets update
			this.request = new Ajax(this.loadurl+this.inputvalue, {
				onComplete: function(req) {
					// Clear loader
					if (this.options.loadingImage != null) {
						this.inputbox.style.background = '#FFF';
					}
					
					if (req.responseText.trim() == '') {
						if (this.options.emptyMessage == null) {
							this.optionsdiv.hide();
						} else {
							this.optionsdiv.selfdiv.innerHTML = this.options.emptyMessage;
							this.optionsdiv.show();
						}
					} else {
						this.optionsdiv.selfdiv.innerHTML=req.responseText;
						this.optionsdiv.show();
					}
					// After the Ajax call, we need to use moodom to register the mouseover events for each li
					$ES('li', this.optionsdiv.selfdiv).each(function(elemnt, i) {
						elemnt.addEvent('mouseover', function() {
							if (this.usedkeys) {
								$ES('li.selected', this.optionsdiv.selfdiv).each(function (el) {
								
									// Take all of them off incase we used the UP and DOWN keys
									el.removeClassName('selected');
								});
							}
							this.usedkeys = false;
							elemnt.addClassName('selected');
						}.bind(this));
						elemnt.addEvent('mouseout', function() {
							elemnt.removeClassName('selected');
						});
						elemnt.addEvent('click', function() {this.clickOption(elemnt);}.bind(this));
					}.bind(this));
				}.bind(this)
			});
		}
	},
	clickOption: function(elemnt) {
		this.inputbox.value=elemnt.childNodes[0].childNodes[0].nodeValue+' - '+elemnt.childNodes[1].childNodes[0].nodeValue;
		this.inputvalue = this.inputbox.value;
		// Save the value of the school
		this.valuebox.value=elemnt.childNodes[0].getAttribute('v');
		this.optionsdiv.hide();
		this.options.onBlur();
		
	}
});