window.addEvent('domready', function() {
	var daySelector  = $('date'),
	    hostSelector = $('host'),
		 ageSelector  = $('age'),
		 selectorForm = $('date').getParent('form'),
		 selectorValuesRequest = new Request.JSON({
			onSuccess: rebuildSelectors
		 });

	if (!daySelector || !hostSelector || !ageSelector) {
		throw new Error('Not all selectors present');
	}

	$$(daySelector, hostSelector, ageSelector).addEvent('change', function () {
		var selector = $(this),
		    queryString = '';

		queryString += 'date=' + encodeURIComponent(daySelector.getSelected().get('value')) + '&';
		queryString += 'host=' + encodeURIComponent(hostSelector.getSelected().get('value')) + '&';
		queryString += 'age=' + encodeURIComponent(ageSelector.getSelected().get('value'));

		selectorValuesRequest.options.url = selectorForm.get('action') + '?' + queryString;
		selectorValuesRequest.send();
	});

	function rebuildSelectors (responseJSON) {
		var daySelectedValue  = daySelector.getSelected()[0].get('value'),
		    hostSelectedValue = hostSelector.getSelected()[0].get('value'),
			 ageSelectedValue  = ageSelector.getSelected()[0].get('value')

		$$(daySelector, hostSelector, ageSelector).each(function (selector) {
			var selectorOptions = selector.getElements('option');

			for (var i=1; i<selectorOptions.length; i++) {
				selectorOptions[i].destroy();
			}
		});

		Object.each(responseJSON.days, function (value, key) {
			var optionNode;
			
			if (value.value == daySelectedValue) {
				optionNode = new Element('option', {'value': value.value, 'html': value.label, 'selected': 'selected'});
			} else {
				optionNode = new Element('option', {'value': value.value, 'html': value.label});
			}

			daySelector.grab(optionNode);
		});
		
		Object.each(responseJSON.locations, function (value, key) {
			var optionNode = new Element('option', {'value': value.value, 'html': value.label});

			if (value.value == hostSelectedValue) {
				optionNode = new Element('option', {'value': value.value, 'html': value.label, 'selected': 'selected'});
			} else {
				optionNode = new Element('option', {'value': value.value, 'html': value.label});
			}

			hostSelector.grab(optionNode);
		});

		Object.each(responseJSON.ages, function (value, key) {
			var optionNode = new Element('option', {'value': value.value, 'html': value.label});

			if (value.value == ageSelectedValue) {
				optionNode = new Element('option', {'value': value.value, 'html': value.label, 'selected': 'selected'});
			} else {
				optionNode = new Element('option', {'value': value.value, 'html': value.label});
			}

			ageSelector.grab(optionNode);
		});

		if (daySelectedValue == '')
			daySelector.getElements('option')[0].set('selected', 'selected');

		if (hostSelectedValue == '')
			hostSelector.getElements('option')[0].set('selected', 'selected');

		if (ageSelectedValue == '')
			ageSelector.getElements('option')[0].set('selected', 'selected');
	}

	$('event-list').addEvent('click', function (evt) {
		var clickedElm = $(evt.target);

		if (clickedElm.hasClass('meer-informatie')) {
			if (clickedElm.hasClass('open')) {
				clickedElm.removeClass('open');
				clickedElm.getParent().getElements('p').removeClass('open');
			} else {
				clickedElm.addClass('open');
				clickedElm.getParent().getElements('p').addClass('open');
			}

			setWrapperHeight();
		}
	});
});