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

var fs, locale;

WS.Event.addEvent(window, 'load', function() {
	if($('livesearch')) {
		fs = new FilterSet('filters');
		fs.initialize();
	}
	
	locale = (document.body.className != '') ? document.body.className : 'nl';
});


/**
 * FilterSet.js - Live search filters
 * 
 * @param {Object} el The element containing all filter buttons
 * @return {Object} Public functions
 */
var FilterSet = function(el, callback) {
	
	var btnWrap;
	var btns;
	var activeFilter;
	var activeCls = arguments[2] || 'active';
	var highlightCls = arguments[3] || 'highlight';
	var callback;
	
	return {
		initialize: function() {
			btnWrap = $(el);
			btns = WS.DOM.getElementsByClass('filter', btnWrap, 'a');
			this.initEvents();
		},
		
		initEvents: function() {
			var self = this;
			
			if($('measurement-dropdown')){
				WS.Event.addEvent('measurement-dropdown', 'change', function(e) {
					WS.Event.stopEvent(e);
					offerSearch(WS.DOM.getParent(this, 3));
					self.hideFilter(WS.DOM.getParent(this, 4));
				});
			}
			
			if($('inch_measurement-dropdown')){
				WS.Event.addEvent('inch_measurement-dropdown', 'change', function(e) {
					WS.Event.stopEvent(e);
					offerSearch(WS.DOM.getParent(this, 3));
					self.hideFilter(WS.DOM.getParent(this, 4));
				});
			}
			
			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);
				});
				if($(btns[i]).id){
					WS.Event.addEvent($(btns[i].rel + '-submit'), 'click', function(e) {
						WS.Event.stopEvent(e);
						offerSearch(WS.DOM.getParent(this, 2));
						self.hideFilter(WS.DOM.getParent(this, 3));
					});
					
					WS.Event.addEvent($(btns[i].rel + '-cancel'), 'click', function(e) {
						WS.Event.stopEvent(e);
						self.hideFilter(WS.DOM.getParent(this, 3));
					});
				}
			}
			
			WS.Event.addEvent(document.body, 'click', function(e) {
				if(activeFilter) {
					var target = WS.Event.getTarget(e);
					while(target) {
						if(WS.hasClass(target, 'filterwrap')) {
							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) {
			$(id + '-selected').innerHTML = msg;
		},
		
		activate: function(id) {
			WS.addClass($(id).parentNode, highlightCls);
		},
		
		deactivate: function(id) {
			if(WS.hasClass($(id).parentNode, activeCls, highlightCls)) {
				WS.removeClass($(id).parentNode, highlightCls);
				this.setMessage(id, '(kiezen)');
			}
		}
	}
}


function selectOffer(){
	alert("hai");
}


/**
 * Retrieves search values and performs the actual AJAX request
 * 
 * @param {Object} el The element containing the filter's form controls
 */
function offerSearch(el) {
	
	var postBody = '';
	var cases = new Array();
	if(soort == 'doubleair'){
		cases[0] = 'brand';
	} else if(soort == 'usedrims'){
		cases[0] = 'measurement';
		cases[1] = 'inch_measurement';
	} else {
		cases[0] = 'measurement';
		cases[1] = 'inch_measurement';
		cases[2] = 'brand';
	}
	
	for(j=0;j<cases.length;j++){
		
		if(cases[j] == 'brand'){
			var values = [];
			var element = document.getElementById(cases[j]);
			var inputs = element.getElementsByTagName('input');
			
			postBody += cases[j] + '=';
			
			for(var i = 0; i < inputs.length; i++){
				if(inputs[i].checked){
					values.push(inputs[i].value);
				}
			}
		} else {
			var values = [];
			postBody += cases[j] + '=';			
			values[0] = $(cases[j] + '-dropdown').value;
		}
		if(values.length > 0 && values[0] != '-1'){
			postBody += values.join('#');
			fs.activate(cases[j]);
			fs.setMessage(cases[j], '(' + values.join(', ') + ')');
		} else {
			fs.deactivate(cases[j]);
			fs.setMessage(cases[j], '(kiezen)');
		}
		postBody += ' &';
	}
	
	
	if(el.id != 'measurement'){
		WS.Ajax.request('/offer/getmeasurement/' + type + '/' + soort + '/', function(response) {
			parseMeasurement(response, soort);
		}, postBody);
	}
	
	if(el.id != 'inch_measurement'){
		WS.Ajax.request('/offer/getinchmeasurement/' + type + '/' + soort + '/', function(response) {
			parseInchmeasurement(response, soort);
		}, postBody);
	}
	
	if(el.id != 'brand'){
		WS.Ajax.request('/offer/getbrands/' + type + '/' + soort + '/', function(response) {
			parseBrands(response);
		}, postBody);
	}
	
	WS.addClass('search-count', 'spinner');
	WS.Ajax.request('/offer/searchoffer/' + type + '/true/' + soort + '/', function(response) {
		parseOffer(response);
	}, postBody);
}


/**
 * Renders the new data from AJAX response
 * 
 * @param {Object} json The JSON object containing the matching data
 */
function parseOffer(json) {	
	var html = [];
	var paginationHtml = [];
	
	var perPage = 20;
	var maxPages = 30;
	var pageStart = 1;
	
	var result = WS.Util.parseJSON(json);
	var aanbod = result.aanbod;
	var pageCount = Math.ceil(result.count / perPage);
	var maxLoops = (pageCount < maxPages) ? pageCount : maxPages;	
	
	// Create and update table HTML
	if(result.count > 0) {
		var x = 1;
		for(var i = 0; i < aanbod.length; i++) {			
			x = x*-1; 
			if(x == 1){
				html.push('<tr class="odd">\n');
			} else {
				html.push('<tr>\n');
			}
			if(!aanbod[i].Image){
				html.push('<td><img src="/img/no-image-lijst.png" alt="Thumb" width="48" height="48"></td>');
			} else {
				html.push('<td><img src="/content/' + soort + '/' + aanbod[i].id + '/' + aanbod[i].Image.asset.filename + '" alt="Thumb" /></td>');
			}	
			
			if(soort == 'usedtyres'){				
				html.push('<td>' + aanbod[i].number + '</td>\n');
				html.push('<td>' + aanbod[i].measurement + 'R' + aanbod[i].inch_measurement + '</td>\n');
				html.push('<td>' + aanbod[i].brand + '</td>\n');				
				html.push('<td>' + aanbod[i].type + '</td>\n');
				html.push('<td>' + aanbod[i].mm + '</td>\n');
				html.push('<td><a class="icon arrow-light" href="/offer/viewusedtyre/' + aanbod[i].id + '/"></a></td>');				
			}
			if(soort == 'usedrims'){
				html.push('<td>' + aanbod[i].number + '</td>\n');
				html.push('<td>' + aanbod[i].measurement + 'R' + aanbod[i].inch_measurement + '</td>\n');
				html.push('<td>' + aanbod[i].type + '</td>\n');
				html.push('<td>' + aanbod[i].stitch + '</td>\n');
				html.push('<td>' + aanbod[i].ETvalue + '</td>\n');
				html.push('<td><a class="icon arrow-light" href="/offer/viewusedrim/' + aanbod[i].id + '/"></a></td>');
			}
			if(soort == 'doubleair'){
				html.push('<td>' + aanbod[i].articlenumber + '</td>\n');
				html.push('<td>' + aanbod[i].brand + '</td>\n');
				html.push('<td>' + aanbod[i].type + '</td>\n');
				html.push('<td><a class="icon arrow-light" href="/offer/doubleair/' + aanbod[i].id + '/"></a></td>');
			}
			if(soort == 'disassemblytyres'){		
				html.push('<td>' + aanbod[i].amount + '</td>\n');
				html.push('<td>' + aanbod[i].showmeasurement  + '</td>\n');
				html.push('<td>' + aanbod[i].brand + '</td>\n');				
				html.push('<td>' + aanbod[i].type + '</td>\n');
				html.push('<td><a class="icon arrow-light" href="/offer/viewdisassemblytyre/' + aanbod[i].id + '/"></a></td>');				
			}
			if(soort == 'technicaldatatyres'){
				html.push('<td>' + aanbod[i].showmeasurement + '</td>\n');
				html.push('<td>' + aanbod[i].brand + '</td>\n');				
				html.push('<td>' + aanbod[i].type + '</td>\n');
				html.push('<td><a class="icon arrow-light" href="/offer/viewtechnicaldatatyre/' + aanbod[i].id + '/"></a></td>');				
			}			
			
			html.push('</tr>\n');
		}
		
		WS.setText('search-count', result.count);
		WS.browser.IE ? updateTable(html.join(''), $('aanbod-table-body')) : $('aanbod-table-body').innerHTML = html.join('');
	}
	else {
		html.push('<tr>\n');
		html.push('<td colspan="8">Geen resultaten</td>\n');
		html.push('</tr>\n');
		
		WS.setText('search-count', 'geen');
		WS.browser.IE ? updateTable(html.join(''), $('aanbod-table-body')) : $('aanbod-table-body').innerHTML = html.join('');
	}
	
	// Create and update pagination HTML
	for(var i = 1; i < maxLoops; i++) {
		paginationHtml.push('<li>\n');
		paginationHtml.push('<a class="' + (i == 1 ? 'selected' : '') + '" href="/offer/' + soort + '/' + offerid + '/none/' + pageStart + '" title="pagina ' + i + '">' + i + '</a>\n');
		paginationHtml.push('</li>\n');
		pageStart += 1;
	}
	// Add the last page to pagination
	if(pageCount > 0) {
		if(pageCount > maxPages){
			paginationHtml.push('<li>...</li>\n');
		}
		paginationHtml.push('<li>\n');
		paginationHtml.push('<a class="' + (i == 1 ? 'selected' : '') + '" href="/offer/' + soort + '/' + offerid + '/none/' + pageCount + '" title="pagina ' + pageCount + '">' + pageCount + '</a>\n');
		paginationHtml.push('</li>\n');
	}
	
	//pagination voor later 
	WS.DOM.getChild($('pagination'), 3).innerHTML = paginationHtml.join('');
	
	// Toggle appropriate controls and spinner
	if(!WS.hasClass($('pagination-prev'), 'hidden')) {
		WS.addClass($('pagination-prev'), 'hidden');
	}
	
	//pagination voor later
	if(result.count > perPage) {
		$('pagination-next').href = '/offer/' + soort + '/' + offerid + '/none/2';
		WS.removeClass($('pagination-next'), 'hidden');
	}
	else {
		WS.addClass($('pagination-next'), 'hidden');
	}
	
	WS.removeClass('search-count', 'spinner');
	
	RowHover.initialize();
	RowClick.initialize();
}

/**
 * Renders model brands
 * 
 * @param {Object} json The JSON object containing the matching data
 */
function parseBrands(json) {
	var html = [];
	
	var brands = WS.Util.parseJSON(json);
		html.push('<ul class="column">\n');
		
		var brandModels = brands.brands;
		var perColumn = Math.ceil(brandModels.length / 3);
		
		for(var m = 0; m < brandModels.length; m++) {
			if(m != 0 && m % perColumn == 0) html.push('</ul>\n');
			if(m != 0 && m % perColumn == 0) html.push('<ul class="column">\n');
			if(soort == 'usedtyres'){
				html.push('<li><input id="' + brandModels[m].used_tyres.brand + '" name="brand[]" type="checkbox" value="' + brandModels[m].used_tyres.brand + '"> <label for="' + brandModels[m].used_tyres.brand + '">' + brandModels[m].used_tyres.brand + '</label></li>');
			}
			if(soort == 'usedrims'){
				html.push('<li><input id="' + brandModels[m].used_rims.brand + '" name="brand[]" type="checkbox" value="' + brandModels[m].used_rims.brand + '"> <label for="' + brandModels[m].used_rims.brand + '">' + brandModels[m].used_rims.brand + '</label></li>');
			}
			if(soort == 'doubleairs'){
				html.push('<li><input id="' + brandModels[m].double_airs.brand + '" name="brand[]" type="checkbox" value="' + brandModels[m].double_airs.brand + '"> <label for="' + brandModels[m].double_airs.brand + '">' + brandModels[m].double_airs.brand + '</label></li>');
			}
			if(soort == 'disassemblytyres'){
				html.push('<li><input id="' + brandModels[m].disassembly_tyres.brand + '" name="brand[]" type="checkbox" value="' + brandModels[m].disassembly_tyres.brand + '"> <label for="' + brandModels[m].disassembly_tyres.brand + '">' + brandModels[m].disassembly_tyres.brand + '</label></li>');
			}
			if(soort == 'technicaldatatyres'){
				html.push('<li><input id="' + brandModels[m].technical_data_tyres.brand + '" name="brand[]" type="checkbox" value="' + brandModels[m].technical_data_tyres.brand + '"> <label for="' + brandModels[m].technical_data_tyres.brand + '">' + brandModels[m].technical_data_tyres.brand + '</label></li>');
			}			
			
		}
		
		html.push('</ul>\n');
	$('brandwrap').innerHTML = html.join('');
}

function parseMeasurement(json, soort) {
	
	var measurement = WS.Util.parseJSON(json);
	var measurementModels = measurement.measurements;	
	
	var select = $('measurement-dropdown');
	emptySelect(select, 1);
	
	for(var im = 0; im < measurementModels.length; im++) {
		opt = document.createElement('option');
		if(soort == 'usedtyres'){
			opt.value = opt.innerHTML = measurementModels[im].used_tyres.measurement;
		}
		if(soort == 'usedrims'){
			opt.value = opt.innerHTML = measurementModels[im].used_rims.measurement;
		}
		if(soort == 'doubleair'){
			opt.value = opt.innerHTML = measurementModels[im].double_air.measurement;
		}
		if(soort == 'disassemblytyres'){
			opt.value = opt.innerHTML = measurementModels[im].disassembly_tyres.measurement;
		}
		if(soort == 'technicaldatatyres'){
			opt.value = opt.innerHTML = measurementModels[im].technical_data_tyres.measurement;
		}			
		select.appendChild(opt);
		
	}
}

function parseInchmeasurement(json, soort) {
	
	var inchmeasurement = WS.Util.parseJSON(json);
	var inchmeasurementModels = inchmeasurement.inch_measurements;	
	
	var select = $('inch_measurement-dropdown');
	emptySelect(select, 1);
	
	for(var im = 0; im < inchmeasurementModels.length; im++) {
		opt = document.createElement('option');
		if(soort == 'usedtyres'){
			opt.value = opt.innerHTML = inchmeasurementModels[im].used_tyres.inch_measurement;
		}
		if(soort == 'usedrims'){
			opt.value = opt.innerHTML = inchmeasurementModels[im].used_rims.inch_measurement;
		}
		if(soort == 'doubleair'){
			opt.value = opt.innerHTML = inchmeasurementModels[im].double_air.inch_measurement;
		}
		if(soort == 'disassemblytyres'){
			opt.value = opt.innerHTML = inchmeasurementModels[im].disassembly_tyres.inch_measurement;
		}
		if(soort == 'technicaldatatyres'){
			opt.value = opt.innerHTML = inchmeasurementModels[im].technical_data_tyres.inch_measurement;
		}			
		select.appendChild(opt);
		
	}
}


/**
 * A workaround for IE to replace a table's TBODY
 * 
 * @param {String} html The new table rows as innerHTML string
 * @param {Object} tbody A reference to the TBODY element
 * 
 * @see http://gathering.tweakers.net/forum/list_messages/1130081
 * @see http://www.ericvasilik.com/2006/07/code-karma.html
 */
function updateTable(html, tbody) {
	
	var div = document.createElement('DIV');
	div.style.display = 'none';
	div.innerHTML = '<table><tbody id="' + tbody.id + '">' + html + '</tbody></table>';
	
	document.body.appendChild(div);
	
	tbody.parentNode.replaceChild(div.getElementsByTagName('TBODY')[0], tbody);
	
	document.body.removeChild(div);
}

function emptySelect(obj, offset) {
	while(obj.hasChildNodes() && obj.length > offset) {
		obj.remove(obj.length - 1);
	}
}