/**
 * SearchForm.js - Search form functionality
 * 
 * @author  Webstores <info at webstores dot nl>
 *          Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 */
function SearchForm(form) {
	this.form = jQuery(form);
	this.init();
}

SearchForm.prototype = {
	/**
	 * Initialize
	 */
	init: function() {
		if(this.form.length) {
			var self = this;
			var sliderSelects = jQuery('.slider-select');
			
			for(var i = 0; i < sliderSelects.length; i++) {
				if(/Max/.test(sliderSelects[i].name)) {
					continue;
				}
				else if(/Min/.test(sliderSelects[i].name)) {
					this.createRangeSlider(sliderSelects[i], sliderSelects[i + 1]);
				}
				else {
					this.createSlider(sliderSelects[i]);
				}
			}
		}
	},
	
	/**
	 * Create a single value slider
	 * 
	 * @param {Object} select HTMLSelectElement
	 */
	createSlider: function(select) {
		
	},
	
	/**
	 * Create a range slider
	 * 
	 * @param {Object} minSelect HTMLSelectElement
	 * @param {Object} maxSelect HTMLSelectElement
	 */
	createRangeSlider: function(minSelect, maxSelect) {
		var self = this;
		
		var min = parseInt(minSelect.options[0].value, 10);
		var max = parseInt(maxSelect.options[maxSelect.options.length - 1].value, 10);
		var minValue = parseInt(minSelect.options[minSelect.selectedIndex].value, 10);
		var maxValue = parseInt(maxSelect.options[maxSelect.selectedIndex].value, 10);
		var sliderWrap = jQuery('<div class="slider">').insertAfter(maxSelect);
		var sliderInfoText = jQuery('<p class="slider-values">' + jQuery(minSelect).prev('label').text() + ' <strong class="min-value">' + jQuery(minSelect).find('option:selected').text() + '</strong> ' + jQuery(maxSelect).prev('label').text().toLowerCase() + ' <strong class="max-value">' + jQuery(maxSelect).find('option:selected').text() + '</strong></p>').insertBefore(sliderWrap);
		
		sliderWrap.siblings('label, select').hide();
		
		var slider = jQuery('<div>').slider({
			range: true,
			min: min,
			max: max,
			step: parseInt(minSelect.options[1].value, 10) - parseInt(minSelect.options[0].value, 10),
			values: [minValue, maxValue],
			slide: function(e, ui) {
				jQuery(minSelect).val(ui.values[0]);
				jQuery(maxSelect).val(ui.values[1]);
				self.updateSliderInfoText(sliderInfoText, jQuery(minSelect).find('option:selected').text(), jQuery(maxSelect).find('option:selected').text());
			},
			change: function() {
				jQuery(minSelect).trigger('change');
			}
		}).appendTo(sliderWrap);
		
		// Reset slider if form is reset
		this.form.bind('reset', function() {
			var min = slider.slider('option', 'min');
			var max = slider.slider('option', 'max');
			self.updateSliderInfoText(sliderInfoText, min, max);
			slider.slider('option', 'values', [min, max]);
		});
	},
	
	/**
	 * Update the slider's corresponding info text
	 * 
	 * @param {Object} infoText The info text paragraph
	 * @param {Number} minValue The slider's min value
	 * @param {Number} maxValue The slider's max value
	 */
	updateSliderInfoText: function(infoText, minValue, maxValue) {
		infoText.find('.min-value').text(minValue);
		infoText.find('.max-value').text(maxValue);
	}
};


/**
 * Instantiate
 */
jQuery(function() {
	var sf = new SearchForm('.search-form');
});