/**
 * ShowSearchForm.js - Show search form behavior
 * 
 * @param {Object} form The form
 * @param {Object} options Optional parameters
 */
function ShowSearchForm(form, options) {
	this.form = $(form);
	this.options = options;
	this.init();
}

ShowSearchForm.prototype = {
	/**
	 * Initialize
	 */
	init: function() {
		if(this.form.length) {
			this.options = $.extend({
				canvasSelector: '#shows-canvas'
			}, this.options || {});
			
			this.form.find('#show-search-toolbar li:first-child').hide();
			this.form.find('#show-search-toolbar button[type="reset"]').attr('disabled', true);
			$('#search-limit-form button').hide();
			
			this.addEventHandlers();
			this.addFormElementEventHandlers();
			this.addControlEventHandlers();
		}
	},
	
	/**
	 * Add event handlers
	 */
	addEventHandlers: function() {
		var self = this;
		
		this.form.submit(function(e) {
			e.preventDefault();
			self.sendRequest();
		});
		
		this.form.find('#show-search-genre input[type="checkbox"]').click(function() {
			self.genreClickHandler(this);
		});
		
		this.form.find('button[type="reset"]').click(function() {
			self.resetClickHandler();
		});
		
		// Using focus instead of click, because of Mac Webkit not handling <select> click events
		this.form.find('#period-range select').focus(function() {
			$(this).parents('li').find('input[type="radio"]').attr('checked', true);
		});
	},
	
	/**
	 * When a genre checkbox fires onclick
	 * 
	 * @param {Object} el The HTMLInputElement
	 */
	genreClickHandler: function(el) {
		var cb = $(el);
		var cbParent = cb.parents('li');
		
		cb.is(':checked') ? cbParent.addClass('selected') : cbParent.removeClass('selected');
	},
	
	/**
	 * When the reset button fires onclick
	 * 
	 * @param {Object} el The HTMLButtonElement
	 */
	resetClickHandler: function(el) {
		var self = this;
		
		setTimeout(function() {
			self.sendRequest();
		}, 100);
		
		this.resetGenres();
	},
	
	/**
	 * Removes the selected state for all genres
	 */
	resetGenres: function() {
		this.form.find('#show-search-genre .selected').removeClass('selected');
	},
	
	/**
	 * Adds an event handler to all form elements
	 */
	addFormElementEventHandlers: function() {
		var eventType;
		var self = this;
		
		$(':input', this.form).each(function() {
			var eventType = '';
			
			if(this.name) {
				switch(this.nodeName) {
					case 'INPUT':
						switch(this.type) {
							case 'text':
								eventType = 'keyup';
								break;
							case 'radio':
							case 'checkbox':
								eventType = 'click';
								break;
						}
						break;
					case 'TEXTAREA':
						eventType = 'keyup';
						break;
					case 'SELECT':
						eventType = 'change';
						break;
				}
			}
			
			if(eventType) {
				$(this).bind(eventType, function() {
					self.sendRequest();
					self.form.find('#show-search-toolbar button[type="reset"]').attr('disabled', false);
				});
			}
		});
	},
	
	/**
	 * Ajaxify related search links
	 */
	addControlEventHandlers: function() {
		var self = this;
		
		$('.search-control').click(function(e) {
			e.preventDefault();
			self.sendRequest(this.href.split('?')[1]);
		});
	},
	
	/**
	 * Send an HTTP request to get updated list
	 * 
	 * @param {String} params Additional request parameters
	 */
	sendRequest: function(params) {
		var self = this;
		
		$.ajax({
			url: self.form.action,
			cache: false,
			dataType: 'json',
			type: 'POST',
			data: self.form.serialize().replace('Typ+hier+uw+trefwoord(en)...', '') + (params ? '&' + params : ''),
			success: function(data) {
				self.updateView(data);
			}
		});
	},
	
	/**
	 * Update shows
	 * 
	 * @param {Object} data The data in JSON format
	 */
	updateView: function(data) {
		/*
		 * JSON
		 * 
			{
				"html": "HTML for div#content-header, ul.shows and div.pagination"
			}
		 */
		
		$(this.options.canvasSelector).html(data.html);
		this.addControlEventHandlers();
	}
};