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

var fs;

WS.Event.addEvent(window, 'load', function() {
	if(get('filters')) {
		fs = new FilterSet('filters');
		fs.initialize();
	}

	if(get('sort')) {
		WS.Event.addEvent('sort', 'change', function(e){
			WS.Event.stopEvent(e);
			filterTable(this);
		});
	}
});


/**
 * FilterSet.js - Live search filters
 * 
 * @param {Object} el The element containing all filter buttons
 * @return {Object} Public functions
 */
var FilterSet = function(el) {
	
	var btnWrap;
	var btns;
	var activeFilter;
	var activeCls = arguments[1] || 'active';
	var highlightCls = arguments[2] || 'highlight';
	var defaultMsg = arguments[3] || '(kiezen)';
	
	return {
		initialize: function() {
			btnWrap = get(el);
			btns = WS.DOM.getElementsByClass('button', btnWrap, 'a');
			this.initEvents();
		},
		
		initEvents: function() {
			var self = this;
			
			for(var i = 0; i < btns.length; i++) {
				WS.Event.addEvent(btns[i], 'click', function(e) {
					WS.Event.stopEvent(e);
					WS.hasClass(this.parentNode, activeCls) ? self.hideFilter(this.parentNode) : self.showFilter(this.parentNode);
				});
				
				WS.Event.addEvent(get(btns[i].rel + '-submit'), 'click', function(e) {
					WS.Event.stopEvent(e);
					filterTable(WS.DOM.getParent(this, 1));
					self.hideFilter(WS.DOM.getParent(this, 2));
				});
				
				WS.Event.addEvent(get(btns[i].rel + '-cancel'), 'click', function(e) {
					WS.Event.stopEvent(e);
					self.hideFilter(WS.DOM.getParent(this, 2));
				});
			}
			
			WS.Event.addEvent(document.body, 'click', function(e) {
				if(activeFilter) {
					var target = WS.Event.getTarget(e);
					while(target) {
						if(WS.hasClass(target, 'filter-wrap')) {
							return false;
						}
						target = target.parentNode;
					}
					self.hideFilter(activeFilter);
				}
			});
		},
		
		showFilter: function(el) {
			if(el == activeFilter)
				return;
			
			if(activeFilter)
				WS.removeClass(activeFilter, activeCls);
			
			WS.addClass(el, activeCls);
			activeFilter = el;
		},
		
		hideFilter: function(el) {
			WS.removeClass(el, activeCls);
			activeFilter = null;
		},
		
		setMessage: function(id, msg) {
			get(id + '-selected').innerHTML = msg;
		},
		
		activate: function(id) {
			WS.addClass(get(id).parentNode, highlightCls);
		},
		
		deactivate: function(id) {
			if(WS.hasClass(get(id).parentNode, highlightCls)) {
				WS.removeClass(get(id).parentNode, highlightCls);
				this.setMessage(id, defaultMsg);
			}
		}
	}
}

/**
 * Retrieves filter values and does the actual AJAX request
 * 
 * @param {Object} el The element containing the filter's form controls
 */
function filterTable(el) {
	
	var postBody = '';

	switch(el.id) {
		case 'sort':
			postBody += 'sort=' + get('sort').value;
		break;
		/*case 'keywds':
			var value = get('keywds-field').value;
			
			postBody += 'keywords=';
			
			if(value) {
				postBody += value;
				fs.activate('keywds');
				fs.setMessage('keywds', '(' + value + ')');
			}
			else {
				fs.deactivate('keywds');
			}
		break;*/
		case 'keywds':
			var elements = WS.DOM.getElementsByClass( "keyword" );

			var count = 0;
			var post = [];
			for( var i = 0; i < elements.length; i++ ) {
				if ( elements[i].checked ) {
					var temp = [];
					temp[0] = elements[i].value;
					post[count] = temp;
					count++;
				}
			}
			if (post.length) {
				fs.activate('keywds');
				fs.setMessage('keywds', '(' + post.join(', ') + ')');
			} else {
				fs.deactivate('keywds');
			}
			postBody += 'keywords=' + post.join(',');
		break;
		case 'period':
			var fromDay = get('period-day-from').value;
			var fromMonth = get('period-month-from').value;
			var fromYear = get('period-year-from').value;
			var toDay = get('period-day-to').value;
			var toMonth = get('period-month-to').value;
			var toYear = get('period-year-to').value;
			
			if(fromDay != '-1' && fromMonth != '-1' && fromYear != '-1' && toDay != '-1' && toMonth != '-1' && toYear != '-1') {
				fs.setMessage('period', '(van ' + fromDay + '-' + fromMonth + '-' + fromYear + ' tot ' + toDay + '-' + toMonth + '-' + toYear + ')');
			}
			else if(fromDay != '-1' && fromMonth != '-1' && fromYear != '-1') {
				fs.setMessage('period', '(vanaf ' + fromDay + '-' + fromMonth + '-' + fromYear + ')');
			}
			else if(toDay != '-1' && toMonth != '-1' && toYear != '-1') {
				fs.setMessage('period', '(tot ' + toDay + '-' + toMonth + '-' + toYear + ')');
			}
			
			postBody += 'fromday=' + fromDay + '&frommonth=' + fromMonth + '&fromyear=' + fromYear + '&today=' + toDay + '&tomonth=' + toMonth + '&toyear=' + toYear;
			((fromDay != '-1' && fromMonth != '-1' && fromYear != '-1') || (toDay != '-1' && toMonth != '-1' && toYear != '-1')) ? fs.activate('period') : fs.deactivate('period');
		break;
		case 'days':
			var daysFrom = get('days-from-field').value;
			var daysTo = get('days-to-field').value;
			
			if(daysFrom || daysTo) {
				fs.setMessage('days', '(' + daysFrom + ' - ' + daysTo + ')');
			}
			
			postBody += 'daysmin=' + daysFrom + '&daysmax=' + daysTo;
			(daysFrom || daysTo) ? fs.activate('days') : fs.deactivate('days');
		break;
		case 'budget':
			var budgetFrom = get('budget-from-field').value;
			var budgetTo = get('budget-to-field').value;
			
			if(budgetFrom || budgetTo) {
				fs.setMessage('budget', '(&euro; ' + WS.Util.number_format(budgetFrom, 0, ',', '.') + ' - &euro; ' + WS.Util.number_format(budgetTo, 0, ',', '.') + ')');
			}
			
			postBody += 'budgetmin=' + budgetFrom + '&budgetmax=' + budgetTo;
			(budgetFrom || budgetTo) ? fs.activate('budget') : fs.deactivate('budget');
		break;
	}
	
	// DEBUG
	/*var postVars = postBody.split('&');
	for(var i = 0; i < postVars.length; i++) {
		WS.log((i + 1) + ': ' + postVars[i]);
	}*/
	
	WS.Ajax.request('/filter.json', function(response) {
		parseResponse(response);
	}, postBody);
}

/**
 * Renders the new arrangement list from AJAX response
 * 
 * @param {Object} json The JSON object containing the matching arrangements
 *
function parseResponse(json) {
	
	var html = [];
	var paginationHtml = [];
	var perPage = 9;
	var occasions = WS.Util.parseJSON(json);
	
	for(var i = 0; i < perPage; i++) {
		html.push('<a class="occasion" href="http://www.occasionoutlettwente.nl/occasions/car/' + occasions[i].o_id + '" title="' + occasions[i].o_merk + ' ' + occasions[i].o_model + ' ' + occasions[i].o_uitvoering + '">\n');
		html.push('<img src="/resources/occ/thumb/' + occasions[i].o_rdc_nr + '-a.jpg" alt="' + occasions[i].o_merk + ' ' + occasions[i].o_model + ' ' + occasions[i].o_uitvoering + '" width="200" height="134">\n');
		html.push('<span class="title">' + occasions[i].o_merk + ' ' + occasions[i].o_model + '</span>\n');
		html.push('<span class="specs">' + occasions[i].o_uitvoering + '</span>\n');
		html.push('<span class="price">&euro; ' + WS.Util.number_format(occasions[i].o_prijs1, 0, ',', '.') + '</span>\n');
		html.push('</a>\n');
	}
	
	var pageCount = Math.ceil(occasions.length / perPage);
	
	for(var i = 1; i <= pageCount; i++) {
		paginationHtml.push('<li class="' + (i == 1 ? 'selected' : '') + '">\n');
		paginationHtml.push('<a href="occasions/page/' + i + '" title="Pagina ' + i + '">' + i + '</a>\n');
		paginationHtml.push('</li>\n');
	}
	
	get('inner-content').innerHTML = html.join('');
	get('pagination').innerHTML = paginationHtml.join('');
	
	if(!WS.hasClass(get('prev'), 'hidden')) WS.addClass(get('prev'), 'hidden');
	(occasions.length > 9) ? get('next').href = 'occasions/page/2' : WS.addClass(get('next'), 'hidden');
}

/**
 * Renders the new arrangement list from AJAX response
 * 
 * @param {Object} json The JSON object containing the matching arrangements
 */
function parseResponse(json) {
	var html = [];
	var arrangementen = WS.Util.parseJSON(json);

	html.push('<table class="arrangement-table wshover wsclick">');
	if( arrangementen != null ) {
		for( var i = 0; i < arrangementen.length; i++) {
			var label = '';
			if (arrangementen[i].label == 'actie') {
				label = '<span class="table-label">Actie</span>';
			} else if (arrangementen[i].label == 'nieuw') {
				label = '<span class="table-label new">Nieuw</span>';
			}
			html.push('<tr>');
			html.push('<td><a href="' + arrangementen[i].link + '" title="' + arrangementen[i].title + '">' + arrangementen[i].title + label + '</a></td>');
			html.push('<td class="unit">v.a.</td>');
			html.push('<td class="price">&euro; ' + WS.Util.number_format(arrangementen[i].prijs, 2, ',', '.') + '</td>');
			html.push('<td class="info">');
			html.push('<a class="arrow" href="' + arrangementen[i].link + '" title="Meer informatie">Meer informatie</a>');
			html.push('</td>');
			html.push('</tr>');
		}
	}
	html.push('</table>');

	get('inner-content').innerHTML = html.join('');
	get('result-count').innerHTML = arrangementen.length;

	RowHover.initialize();
	RowClick.initialize();
}