/**
 * Occasions.js - Occasions live search
 * 
 * @author  Webstores <info at webstores dot nl>
 *           Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 */

WS.DOM.ready(function() {
	
	var optionTogglers = WS.DOM.getElementsByClass('expand-toggler');
	optionTogglers.forEach(function(el) { optionToggle(el); });
	
	var occasionSearch = new OccasionSearchForm('occasions-search-form');
	occasionSearch.initialize();
	
	var occasionFilter = new OccasionFilterForm('filters');
	occasionFilter.initialize();
});


/**
 * Toggle filter containers
 * 
 * @param {String} togglerId The ID of the toggler element
 * @param {String} containerId The ID of the container element 
 * @param {Boolean} hide Initially hide the container
 */
function filterToggle(filterId, hide) {
	
	var filter = $(filterId);
	var toggler = $(filterId + '-toggler');
	
	if(hide) {
		WS.addClass(filter, 'collapsed');
	}
	
	WS.Event.addEvent(toggler, 'click', function(e) {
		WS.Event.stopEvent(e);
		WS.toggleClass(filter, 'collapsed');
	});
};


function setPageTitle(msg) {
	document.title = 'Occasions overzicht | ' + msg + ' | Huiskes-Kokkeler';
}

/**
 * Toggles more filter options
 * 
 * @param {Object} toggler The toggler element
 */
function optionToggle(toggler) {
	
	var parent = toggler.parentNode;
	WS.addClass(parent, 'hide-options');
	
	WS.Event.addEvent(toggler, 'click', function(e) {
		WS.Event.stopEvent(e);
		WS.toggleClass(parent, 'hide-options');
	});
};


/**
 * Occasion search form
 * 
 * @param {Object} formId
 */
var OccasionSearchForm = function(formId) {
	this.formId = formId;
	this.form;
};

OccasionSearchForm.prototype = {
	initialize: function(){
		this.form = $(this.formId);
		
		if(!this.form) {
			return;
		}
		
		this.addFormEventHandlers();
	},
	addFormEventHandlers: function() {
		var brandCheckboxes = document.getElementsByName('brand[]');
		var self = this;
		
		for(var i = 0; i < brandCheckboxes.length; i++) {
			WS.Event.addEvent(brandCheckboxes[i], 'click', function(){
				self.sendModelRequest();
			});
		}
	},
	sendModelRequest: function() {
		$('model-loading-overlay').show();
		
		var brands = this.getCheckboxValuesByName('brand[]');
		var self = this;
		
		var postData = 'brand=' + brands;
		
		WS.Ajax.request('/occasions/models', function(response) {
			self.handleModelRequest(response);
		}, postData);
	},
	handleModelRequest: function(response) {
		var data = WS.Util.parseJSON(response);
		
		this.updateModels(data['modelHtml']);
		
		$('model-loading-overlay').hide();
	},
	updateModels: function(html) {
		$('model-field-wrapper').innerHTML = html;
		$('model-loading-overlay').hide();
	},
	getCheckboxValuesByName: function(name) {
		var values = [];
		var checkboxes = document.getElementsByName(name);
		
		for(var i = 0; i < checkboxes.length; i++) {
			if(checkboxes[i].checked) {
				values.push(checkboxes[i].value);
			}
		}
		
		return values;
	}
};


/**
 * Occasion live search/filtering
 * 
 * @param {Object} formId
 */
var OccasionFilterForm = function(formId) {
	this.formId = formId;
	this.form;
};

OccasionFilterForm.prototype = {
	initialize: function() {
		this.form = $(this.formId);
		
		if(!this.form) {
			return;
		}
		
		this.addFormEventHandlers();
		this.addSortEventHandlers();
		this.addPaginationEventHandlers();
		this.addViewModeEventHandlers();
		this.addPhotoSortEventHandlers();
	},
	addFormEventHandlers: function() {
		var el, eventType;
		var self = this;
		
		for(var i = 0; i < this.form.elements.length; i++) {
			el = this.form.elements[i];
			
			if(el.name) {
				switch(el.tagName) {
					case 'INPUT':
						switch(el.type) {
							case 'checkbox':
								eventType = 'click';
							break;
						}
					break;
					case 'SELECT':
						eventType = 'change';
					break;
				}
			}
			
			if(eventType) {
				WS.Event.addEvent(el, eventType, function() {
					self.sendRequest();
					if(this.name == 'brand[]') {
						self.sendModelRequest();
					}
				});
			}
		}
		
		WS.Event.addEvent('per-page', 'change', function() {
			self.sendRequest();
		});
	},
	addSortEventHandlers: function() {
		var anchors = $$('#occasions-table th a');
		
		if(!anchors.length) {
			return;
		}
		
		var self = this;
		
		for(var i = 0; i < anchors.length; i++) {
			WS.Event.addEvent(anchors[i], 'click', function(e) {
				WS.Event.stopEvent(e);
				var field = this.rel.split(':')[0];
				var order = this.rel.split(':')[1];
				self.sendSortRequest(field, order);
			});
		}
	},
	addPaginationEventHandlers: function() {
		var anchors = $$('#occasions-pagination a');
		var self = this;
		
		for(var i = 0; i < anchors.length; i++) {
			WS.Event.addEvent(anchors[i], 'click', function(e) {
				WS.Event.stopEvent(e);
				var page = this.href.split('/').last();
				self.sendPaginationRequest(page);
			});
		}
	},
	addViewModeEventHandlers: function() {
		var anchors = $$('#occasions-view-mode a');
		var self = this;
		
		for(var i = 0; i < anchors.length; i++) {
			WS.Event.addEvent(anchors[i], 'click', function(e) {
				WS.Event.stopEvent(e);
				WS.removeClass(WS.DOM.getElementsByClass('selected', $('occasions-view-mode'))[0], 'selected');
				WS.addClass(this.parentNode, 'selected');
				var mode = this.href.split('/').last();
				self.sendViewModeRequest(mode);
			});
		}
	},
	addPhotoSortEventHandlers: function() {
		var select = $('photo-sort');
		
		if(!select) {
			return;
		}
		
		var self = this;
		
		WS.Event.addEvent(select, 'change', function() {
			var field = this.value.split(':')[0];
			var order = this.value.split(':')[1];
			self.sendSortRequest(field, order);
		});
	},
	sendRequest: function() {
		$('occasions-loading-overlay').show();
		
		var self = this;
		
		var brands = this.getCheckboxValuesByName('brand[]');
		var models = this.getCheckboxValuesByName('model[]');
		var priceMin = $('price-min').value;
		var priceMax = $('price-max').value;
		var yearMin = $('year-min').value;
		var yearMax = $('year-max').value;
		var mileageMin = $('mileage-min').value;
		var mileageMax = $('mileage-max').value;
		var bodyworkTypes = this.getCheckboxValuesByName('bodywork[]');
		var transmissionTypes = this.getCheckboxValuesByName('transmission[]');
		var fuelTypes = this.getCheckboxValuesByName('fuel[]');
		var establishments = this.getCheckboxValuesByName('establishment[]');
		var btw = this.getCheckboxValuesByName('btw[]');
		var cartype = this.getCheckboxValuesByName('cartype[]');
		var perPage = $('per-page').value;
		
		var postData = 'brand=' + brands + '&model=' + models + '&price-min=' + priceMin + '&price-max=' + priceMax + '&year-min=' + yearMin + '&year-max=' + yearMax + '&mileage-min=' + mileageMin + '&mileage-max=' + mileageMax + '&bodywork=' + bodyworkTypes + '&transmission=' + transmissionTypes + '&btw=' + btw + '&cartype=' + cartype + '&fuel=' + fuelTypes + '&establishment=' + establishments + '&per-page=' + perPage;
		
		WS.Ajax.request('/occasions/output', function(response) {
			self.handleRequest(response);
		}, postData);
	},
	handleRequest: function(response) {
		var data = WS.Util.parseJSON(response);
		
		this.updateOccasions(data['occasionHtml'], data['count']);
		this.updatePagination(data['paginationHtml']);
		setPageTitle(data['count'] + ' occasions gevonden');
		
		$('occasions-loading-overlay').hide();
	},
	sendSortRequest: function(field, order) {
		$('occasions-loading-overlay').show();
		
		var postData = 'sortfield=' + field + '&sortorder=' + order;
		var self = this;
		
		WS.Ajax.request('/occasions/output', function(response) {
			self.handleSortRequest(response);
		}, postData);
	},
	handleSortRequest: function(response) {
		var data = WS.Util.parseJSON(response);
		
		this.updateOccasions(data['occasionHtml'], data['count']);
		
		$('occasions-loading-overlay').hide();
	},
	sendPaginationRequest: function(page) {
		$('occasions-loading-overlay').show();
		var self = this;
		
		WS.Ajax.request('/occasions/output', function(response) {
			self.handlePaginationRequest(response);
		}, 'page=' + page);
	},
	handlePaginationRequest: function(response) {
		var data = WS.Util.parseJSON(response);
		
		this.updateOccasions(data['occasionHtml'], data['count']);
		this.updatePagination(data['paginationHtml']);
		
		$('occasions-loading-overlay').hide();
	},
	sendModelRequest: function() {
		$('model-loading-overlay').show();
		
		var brands = this.getCheckboxValuesByName('brand[]');
		var self = this;
		
		var postData = 'brand=' + brands;
		
		WS.Ajax.request('/occasions/models', function(response) {
			self.handleModelRequest(response);
		}, postData);
	},
	handleModelRequest: function(response) {
		var data = WS.Util.parseJSON(response);
		
		this.updateModels(data['modelHtml']);
		
		$('model-loading-overlay').hide();
	},
	sendViewModeRequest: function(mode) {
		$('occasions-loading-overlay').show();
		var self = this;
		
		WS.Ajax.request('/occasions/output', function(response) {
			self.handleRequest(response);
		}, 'view=' + mode);
	},
	getCheckboxValuesByName: function(name) {
		var values = [];
		var checkboxes = document.getElementsByName(name);
		
		for(var i = 0; i < checkboxes.length; i++) {
			if(checkboxes[i].checked) {
				values.push(checkboxes[i].value);
			}
		}
		
		return values;
	},
	updateOccasions: function(occasionHtml, resultCount) {
		$('occasions-block-body').innerHTML = occasionHtml;
		$('result-count').innerHTML = resultCount;
		
		this.addSortEventHandlers();
		this.addPhotoSortEventHandlers();
		
		RowClick.initialize();
		RowHover.initialize();
	},
	updateModels: function(html) {
		$('model-body').innerHTML = html;
		
		var modelCheckboxes = document.getElementsByName('model[]');
		var self = this;
		
		for(var i = 0; i < modelCheckboxes.length; i++) {
			WS.Event.addEvent(modelCheckboxes[i], 'click', function() {
				self.sendRequest();
			});
		}
	},
	updatePagination: function(html) {
		$('occasions-pagination').innerHTML = html;
		this.addPaginationEventHandlers();
	}
};