function initAutoComplete(url)
{
	var input = $('#q');
	input.after('<div id="autocomplete"></div>');
	input.focus(function() {
		if (input.val() == 'Snel zoeken...') {
			input.val('');
			input.removeClass('small');
		}
	});

	var list, optionCount, selectedIndex, typedValue;
	selectedIndex = 0; // input
	input.attr('autocomplete', 'off');
	input.keyup(function(e) {
		switch (e.keyCode) {
			case 13: // enter
				return;
				break;
			case 38: // up
				var childs = list.children();
				childs.removeClass('selected');
				
				selectedIndex = selectedIndex == 0 ? optionCount : (selectedIndex - 1) % (optionCount + 1);
				if (selectedIndex == 0) {
					input.val(typedValue);
				} else {
					childs.eq(selectedIndex - 1).addClass('selected');
					input.val(childs.eq(selectedIndex - 1).text());
				}

				break;
			case 40: // down
				var childs = list.children();
				childs.removeClass('selected');
				
				selectedIndex = (selectedIndex + 1) % (optionCount + 1);
				if (selectedIndex == 0) {
					input.val(typedValue);
				} else {
					childs.eq(selectedIndex - 1).addClass('selected');
					input.val(childs.eq(selectedIndex - 1).text());
				}

				break;
			case 37:
			case 39:
				return;
			default:
				var value = input.val();
				typedValue = value;
				selected = 0;
				if (value.length > 0) {
					$.getJSON(url, {q: value}, function(data){
						list = $('#autocomplete ul');
						if (list.length > 0) {
							list.empty();
						} else {
							list = $('<ul></ul>');
							list.appendTo('#autocomplete');
							list.hide();
						}
						
						optionCount = data.options.length;
						
						if (optionCount > 0) {
							list.show();
							$('body').click(function() {
								list.remove();
							});
						}
						
						for (var i = 0; i < optionCount; i++) {
							list.append('<li>' + match(value, data.options[i]) + '</li>');
						}
						
						list.children().hover(function() {
							$(this).addClass('selected').siblings().removeClass('selected');
							selectedIndex = list.children().index(this) + 1;
						});
						
						list.children().click(function() {
							input.val($(this).text());
							selectedIndex = list.children().index(this) + 1;
							$('#quicksearch').submit();
						});
						
					});
				} else {
					$('#autocomplete').empty();
					selectedIndex = 0;
				}
				break;
		}
		
	});
}

function match(value, string)

{
	var returnValue = '<strong>';
	var index = value.length;
	returnValue += string.substring(0, index);
	returnValue += '</strong>';
	returnValue += string.substring(index, string.length);
	return returnValue;
}

function initAccommodationSearch(url)
{
	$('#submitbutton').click(function() {
		$(this).parent().submit();
	});
	
	var regionSelect = $('#region');
	var areaSelect = $('#area');
	var resortSelect = $('#resort');
	var personsSelect = $('#persons');
	var value, count;
	
	regionSelect.change(function() {
		value = regionSelect.val();
		text = regionSelect.find(':selected').text();
		count = text.match(/(\d)+/);
		$('#accommodation_count').text(count[0]);
		fillSelectsFromRegionValue(url, value);
	});
	
	areaSelect.change(function() {
		value = areaSelect.val();
		text = areaSelect.find(':selected').text();
		count = text.match(/(\d)+/);
		$('#accommodation_count').text(count[0]);
		fillSelectsFromAreaValue(url, value);
	});
	
	resortSelect.change(function() {
		value = resortSelect.val();
		text = resortSelect.find(':selected').text();
		count = text.match(/(\d)+/);
		$('#accommodation_count').text(count[0]);
		fillSelectsFromResortValue(url, value);
	});
	
	personsSelect.change(function() {
		text = personsSelect.find(':selected').text();
		count = text.match(/(\d)+/g);
		$('#accommodation_count').text(count[1]);
	});
}

function fillSelectsFromRegionValue(url, value)
{
	// ajax request
	$.getJSON(url + '/region/' + value, function(data) {
		var selected = $('#area').val();
		$('#area').empty();

		$('#area').html(data.area);
		$('#area').val(selected);
		$('#area').prev().find('span').remove();
		
		var selected = $('#resort').val();
		$('#resort').empty();
		
		$('#resort').html(data.resort);
		$('#resort').val(selected);
		$('#resort').prev().find('span').remove();
		
		var selected = $('#persons').val();
		$('#persons').empty();

		$('#persons').html(data.persons);
		$('#persons').val(selected);
		$('#persons').prev().find('span').remove();
	});
	
	// loading icons
	$('#area').prev().append('<span class="icon right"></span>');
	$('#resort').prev().append('<span class="icon right"></span>');
	$('#persons').prev().append('<span class="icon right"></span>');
}

function fillSelectsFromAreaValue(url, value)
{
	$('#resort').prev().append('<span class="icon right"></span>');
	$('#persons').prev().append('<span class="icon right"></span>');
	$.getJSON(url + '/area/' + value, function(data) {

		var selected = $('#resort').val();
		$('#resort').empty();

		$('#resort').html(data.resort);
		$('#resort').val(selected);
		$('#resort').prev().find('span').remove();
		
		var selected = $('#persons').val();
		$('#persons').empty();

		$('#persons').html(data.persons);
		$('#persons').val(selected);
		$('#persons').prev().find('span').remove();
	});
}

function fillSelectsFromResortValue(url, value)
{
	$('#persons').prev().append('<span class="icon right"></span>');
	$.getJSON(url + '/resort/' + value, function(data) {
		
		var selected = $('#persons').val();
		$('#persons').empty();

		$('#persons').html(data.persons);
		$('#persons').val(selected);
		$('#persons').prev().find('span').remove();
	});
}

function fillSelectsFromPersonsValue(value)
{
	$.getJSON('/chaletsinzwitserland.nl/public_html/search/options-for-select/region/' + value, function(data) {
		var selected = $('#area').val();
		$('#area').empty();
		
		var output = [];
		$.each(data.area, function(key, value) {
		  output.push('<option value="'+ key +'">'+ value +'</option>');
		});

		$('#area').html(output.join(''));
		$('#area').val(selected);
		
		var selected = $('#resort').val();
		$('#resort').empty();
		
		var output = [];
		$.each(data.resort, function(key, value) {
		  output.push('<option value="'+ key +'">'+ value +'</option>');
		});

		$('#resort').html(output.join(''));
		$('#resort').val(selected);
		
		var selected = $('#persons').val();
		$('#persons').empty();
		
		var output = [];
		$.each(data.persons, function(key, value) {
		  output.push('<option value="'+ key +'">'+ value +'</option>');
		});

		$('#persons').html(output.join(''));
		$('#persons').val(selected);
	});
}