/**
 * @author ben
 */
Observable = Class.create({
	observe : function(evt,observer)
	{
		if(!this.__observers__)
			this.__observers__ = {};
		if(!this.__observers__[evt])
			this.__observers__[evt] = [];
		this.__observers__[evt].push(observer);
		return this;
	},
	stopObserving : function(evt,observer)
	{
		if(this.__observers__ && this.__observers__[evt])
		{
			var i = this.__observers__[evt].indexOf(observer);
			this.__observers__[evt].splice(i,1);
		};
		return this;
	},
	fire : function(evt)
	{
		if(!this.__observers__ || !this.__observers__[evt.type])
			return this;
		for(var i = 0;i<this.__observers__[evt.type].length;i++)
			this.__observers__[evt.type][i].apply(this,[evt]);
		return this;
	}
});

var AutoSuggest = Class.create(Observable,{
	
	initialize : function(field,options)
	{
		var options = options || {};
		
		this.field = $(field);
		
		this.suggestions = {
			a : ["Amsterdam","Amstelveen"]
		};
		this.observers = {};
		this.visible = false;
		this.selected = null;
		
		this.options = {
			rows : 6,
			boxClass : "autosuggest-box",
			selectFirst : false
		};
		
		this.patternCache = {};
		
		for (var key in options) 
		{
			this.options[key] = options[key];
		};
		
		this.field.setAttribute('autocomplete', 'off');
		this.field.setAttribute('multiline', 'true');
		
		this.box = document.createElement("ul");
		this.box = $(document.body.appendChild(this.box));
		this.positionBox();
		this.hideBox();
		this.box.addClassName(this.options.boxClass);
		
		this.field.observe("keydown",this.preventSubmit.bind(this));
		this.field.observe("keyup",this.delegateKeyEvent.bind(this));
		this.field.observe("blur",this.findMatch.bind(this));
		this.box.observe("click",this.handleSelect.bind(this));
		
		this.box.observe("mousedown",this.stopBubble);
		this.field.observe("mousedown",this.stopBubble);
		document.observe("mousedown",this.hideBox.bind(this));
		
		this.box.observe("scroll",function(){
			//alert("mouseup")
			this.field.focus();
		}.bind(this));
		
		this.box.observe("mouseover",function(e){
			var node = e.target;
			var tag = node.tagName;
			if(/li/i.test(tag))
			{
				$(node).addClassName("hover");
			};
		});
		this.box.observe("mouseout",function(e){
			var node = e.target;
			var tag = node.tagName;
			if(/li/i.test(tag))
			{
				$(node).removeClassName("hover");
			};
		});
		
	},
	
	stopBubble : function(e)
	{
		e.stopPropagation();
	},
	
	delegateKeyEvent : function(e)
	{
		var key = e.keyCode;
		
		if ((key == Event.KEY_RETURN || key == Event.KEY_TAB) && this.visible) 
		{
			return this.handleSelect(e);
		};
		
		if (key == Event.KEY_DOWN || key == Event.KEY_UP) 
		{
			e.stop();
			return this.toggleSelected(key);
		};
		
		if ((key >= 48 && key <= 90) || key == Event.KEY_DELETE || key == Event.KEY_BACKSPACE) 
		{
			this.renderSuggestions();
			e.stopPropagation();
		};
		
		if(this.field.value == "")
		{
			this.hideBox();
		};
		
	},
	
	handleSelect : function(e)
	{
		var eventType = e.type;
		var element = e.target;
		var key = e.keyCode||null;
		
		if(/click/i.test(eventType))
		{
			if(/li/i.test(element.nodeName))
			{
				if(this.selected)
				{
					this.selected.removeClassName("selected");
				};
				this.selected = $(element).addClassName("selected");
			};
		};
		
		if(!this.selected)
		{
			// last attempt.
			this.findMatch(e);
		};
		
		if (this.selected) 
		{
			this.field.value = this.selected.innerHTML;
			this.fire({
				type : "select",
				target : this.field,
				value : this.field.value,
				keyCode : key
			});
			this.field.focus();
		};
		this.hideBox();
	},
	
	findMatch : function(e)
	{
		var key = e.keyCode||null;
		var type = e.type;
		var value = this.field.value.toLowerCase();
		var re = new RegExp("^"+value+"$","i");
		var firstChar = value.charAt(0);
		var list = this.suggestions[firstChar];
		if(list)
			var found = list.grep(re);
		if (found && found.length > 0) 
		{
			this.field.value = found.first();
			if (type != "blur") 
			{
				this.fire({
					type: "match",
					target: this.field,
					value: this.field.value,
					keyCode: key
				});
				return true;
			};
		}
		else 
		{
			this.fire({
				type: "nomatch",
				value: value,
				target: this.field,
				keyCode: key
			});
		};
		return false;
	},
	
	toggleSelected : function(key)
	{
		var sel = this.selected;
		if (sel) 
		{
			sel.removeClassName("selected");
		};
		if(key == Event.KEY_DOWN)
		{
			sel = (sel) ? sel.next("li") || null : this.box.down("li:first-child");
		}
		else if(key == Event.KEY_UP)
		{
			sel = (sel) ? sel.previous("li") || null : this.box.down("li:last-child");
		};
		if (sel)
		{
			sel.addClassName("selected");
			this.adjustScrollView(sel);
		};
		this.selected = sel;
	},
	
	getSuggestions : function(pattern)
	{
		var firstChar = pattern.charAt(0).toLowerCase();
		var list = this.suggestions[firstChar] || [];
		var len = list.length;
		var suggestions = [];
		for(var i=0;i<len;i++)
		{
			if(list[i].toLowerCase().indexOf(pattern) == 0)
				suggestions.push(list[i]);
		}
		return suggestions;
	},
	
	renderSuggestions : function()
	{
		this.box.innerHTML="";
		//this.box.scrollTop = 1;
		var pattern = this.field.value.toLowerCase();
		var cache = this.patternCache[pattern] || null;
		if (!cache) 
		{
			var list = this.getSuggestions(pattern);
			var len = list.length;
			var sc = "";
			for (var i = 0; i < len; i++) 
			{
				var suggestion = list[i];
				var op = document.createElement("li");
				op.innerHTML = suggestion;
				this.box.appendChild(op);
			};
			this.patternCache[pattern] = {
				html : this.box.innerHTML,
				ammount : len
			};
		}
		else
		{
			this.box.innerHTML = cache.html;
			var len = cache.ammount;
		};
		if (this.options.selectFirst) 
		{
			var frst = this.box.down("li");
			if(frst)
				frst.addClassName("selected");
		};
		this.fire({
			type: "suggestions",
			target : this.field,
			value : this.field.value,
			key : null,
			ammount : len
		});
		this.selected = this.box.down("li.selected") || null;
		this.showBox();
		this.updateDimensions(len);
	},
	
	preventSubmit : function(event)
	{
		var key = event.keyCode;
		
		if (key == Event.KEY_RETURN && this.box.visible()) 
		{
			event.stop();
		};
		if (key == Event.KEY_TAB && this.box.visible())
		{
			this.findMatch(event);
			this.hideBox();
		};
	},
	
	adjustScrollView : function(el)
	{
		if(!this.options.rowHeight)
			this.options.rowHeight = this.box.down("li").getHeight();
		var a = el.positionedOffset().top;
		var b = el.getHeight();
		var c = this.options.rows * this.options.rowHeight;
		var diff = Math.max((a+b)-(c-b),0);
		this.box.scrollTop = diff;
	},
	
	positionBox : function()
	{
		var coords = this.coords = this.field.cumulativeOffset();
		var topOffset = this.topOffset = this.field.getHeight();
		this.box.setStyle({
			position: "absolute",
			top: coords.top + topOffset + "px",
			left: coords.left + "px"
		});
	},
	
	updateDimensions : function(ammount)
	{
		var maxRows = this.options.rows;
		var wasHidden = false;
		var ammount = ammount;
		
		if(ammount > 0)
		{
			if(!this.visible)
			{
				wasHidden = true;
				this.showBox();
			};
			
			if(!this.rowHeight)
			{
				this.rowHeight = this.box.scrollHeight / ammount;
			};
			
			var boxHeight = Math.min((this.rowHeight*maxRows),(this.rowHeight*ammount));

			this.box.setStyle({
				height : boxHeight+"px"
			});
			
			if(wasHidden)
			{
				this.hideBox();
			};
		}
		else
		{
			this.hideBox();
		};
	},
	
	showBox : function()
	{
		this.box.show();
		this.visible = true;
	},
	
	hideBox : function()
	{
		this.box.hide();
		this.visible = false;
	}
	
});

LocationSuggest = Class.create(Observable,{
	initialize : function(sourceField,targetField,options)
	{
		var options = options;
		this.sourceField = sourceField;
		this.targetField = targetField;
		
		this.options = {
			url : "suggestions.txt",
			rows : 6,
			selectFirst : false,
			boxClass : "autosuggest-box",
			limitSize : false,
			limitMessage : "Er zijn geen mogelijkheden beschikbaar!"
		};
		
		for (var key in options) 
		{
			this.options[key] = options[key];
		};
		
		this.AutoSuggest = new AutoSuggest(this.sourceField,this.options);
		
		this.locations = [];
		
		var req = new Ajax.Request(this.options.url, {
			method: "get",
			onSuccess: function(transport){
				this.locations = eval(transport.responseText);
				var locations = [];
				this.locations.each(function(hash){
					var firstChar = hash.value.charAt(0).toLowerCase();
					if(!locations[firstChar])
						locations[firstChar] = [];
					locations[firstChar].push(hash.value);
				});
				
				this.AutoSuggest.suggestions = locations;
				
				this.AutoSuggest.observe("select",this.handleSelect.bind(this));
				this.AutoSuggest.observe("match",this.handleSelect.bind(this));
				
				this.AutoSuggest.observe("nomatch",function(){
					this.targetField.value = "";
				}.bind(this));
				
				if (this.options.limitSize) 
				{
					var self = this;
					this.AutoSuggest.observe("suggestions", function(e)
					{
						var field = e.target;
						var value = e.value;
						var msg = $("errorboodschap");

						if(e.ammount)
						{
							field.maxLength = 255;
							if(msg)
								msg.hide();
						}
						else if(value.length > 0)
						{
							field.maxLength = e.value.length;
							if(msg)
								msg.update(this.options.limitMessage).show();
						};
						
					});
				};
			}.bind(this)
		});
	},
	
	handleSelect : function(e)
	{
		var re = new RegExp("^"+this.sourceField.value.strip()+"$","i")
		var zip = this.locations.find(function(hash){
			return re.test(hash.value.strip());
		}).zip || null;
		
		e.target = this;
		if(zip)
		{
			this.targetField.value = zip;
			this.fire(e);
		}
		else
		{
			e.type = "nomatch";
			this.targetField.value = "";
			this.fire(e);
		};
	}
});