/*

mootools 1.2.4+ moet eerst ingeladen zijn

Voorbeeld om aan te maken. Zie de initialize functie van ZoekMenuClass 
om te zien wat voor parameters verwacht worden.

		var zoekmenu = null;
		// lijsten van zoekmenu vullen zodra het document geladen is
		window.addEvent('domready', function(){
			zoekmenu = new ZoekMenuClass('form1','form1_submit','zoek_groep','zoek_categorie','zoek_merk', false);
			// Uit te voeren actie als er op de reset knop gedrukt wordt
			$('form1_reset').addEvent('click', 	function() {
				// Zoekveld legen
				$('zoekwoord').setProperty('value', '');
				// reset knop disablen
				this.setProperty('disabled', 'true');
				// Data resetten
				if(zoekmenu.resetData()) {
					// Reset knop weer activeren
					this.setProperty('disabled', '');
				}
			});
		});



*/


var ZoekMenuClass = new Class({
	/*
		Gebruik auto_submit om automatisch het zoekformulier te verzenden als er een groep/categorie/merk veranderd.
		Zet auto_submit uit om de lijsten alleen te updaten.
		Met ZoekMenuClass.implement() kan submitForm worden overladen. Om bijv. het formulier via een ajax request te verzenden
		en zo de terug gestuurde output te verwerken.
		
		Als id_groep,id_categorie,id_merk kunnen bij het genereren van de HTML ingevuld zijn of leeg gelaten worden.
		Als ze zijn ingevuld dan hoeft de gebruiker niet eerst op een Ajax request te wachten. Ideal voor grote webshops met veel groepen en merken.
		Als ze niet zijn ingevuld dan moet de gebruiker wel op een Ajax request wachten. Ideaal voor kleinere webshops met relatief weinig groepen en merken.
		
		ZoekMenuClass maakt een DIV met id ZoekMenuClassData aan. Zorg er voor dat dit ID beschikbaar is (dus niet zelf aanmaken).
		Tevens is het van belang dat de positie van dit formulier op een geldige plek staat. Het mag bijv. geen child zijn van een
		<tr> of <table>.
	
		Params:
					id van form element waar de droplists in staan
					id van submit knop element die formulier verzend
					id van select element waar de groepen in komen te staan
					id van select element waar de categorieen in komen te staan
					id van select element waar merken in komen te staan
					true/false: formulier submitten als een select wijzigt ja/nee
	*/
	initialize: function(id_form,id_submit_button,id_groep,id_categorie,id_merk,auto_submit) {
		if($(id_submit_button) && $(id_groep) && $(id_categorie) && $(id_merk)) {
			// URL van ajax script
			this.ajax_url			= 'http://' + document.location.hostname + document.location.pathname;
			// ID's van elementen
			this.id_form			= id_form;
			this.id_submit_button	= id_submit_button;
			this.id_groep			= id_groep;
			this.id_categorie		= id_categorie;
			this.id_merk			= id_merk;
			// Auto submit formulier
			this.auto_submit 		= auto_submit;
			// Eerste keer dat setAll wordt opgeroepen
			this.first_time			= true;
			
			var pointer = this;
			
			// Vul de lijsten in als deze niet van te voren zijn ingevuld
			// Zorgt er tevens voor dat de juiste opties geselecteerd zijn
			// als het formulier eerder is gesubmit
			if($(id_groep).options.length == 0 || $(id_categorie).options.length == 0 || $(id_merk).options.length == 0) {
				// In elke lijst een lege optie zetten
				// met als waarde die uit de query string
				// vervolgens setAll uitvoeren
				([id_groep,id_categorie,id_merk]).each(function(item) {
					var qs = pointer.query_string();
					if(qs[item]) {
						var el = new Element('option',{value: qs[item]}).inject($(item));
					}
				});
				this.setAll();
			}
			// Als de lijsten al zijn ingevuld dan wordt er ook
			// niet eerst een Ajax request gedaan. Dus first_time op false zetten
			// zodat het formulier normaal gesubmit wordt als er een waarde veranderd
			// (mocht auto_submit aan staan)
			else {
				this.first_time = false;
			}

			// Voeg events toe aan de droplists
			// Zodra een waarde in een droplist veranderd dan wordt setAll() opgeroepen
			$(id_groep).addEvent(	 'change',	function(){pointer.setAll()});
			$(id_categorie).addEvent('change',	function(){pointer.setAll()});
			$(id_merk).addEvent(	 'change',	function(){pointer.setAll()});
		}
	},
	// Te ondernemen actie bij het automatisch verzenden van het formulier
	// Valt te overloaden door ZoekMenuClass.implement() te gebruiken om
	// bijv. eerst een aantal handelingen te doen voor dat het formulier verzonden wordt.
	submitForm:	function() {
		$(this.id_submit_button).click();
	},
	// Vul de lijsten en verzend eventueel de formulieren
	setAll:	function() {
		// Formulier submitten
		if(this.auto_submit && !this.first_time) {
			this.submitForm();
		}
		// Formulier niet submitten, maar lijsten updaten
		else {
			// Query string maken
			var qs		=  $(this.id_form).toQueryString() + '&ajax_ZoekMenuClass';
			var pointer = this;
			// Ajax request uitvoeren
			var ajax 	= new Request.JSON({
				url: this.ajax_url,
				method: 'get',
				autoCancel: true,
				onSuccess: function(jsondata) {
					// Vul de lijsten
					pointer.fillList(pointer.id_groep, jsondata.groep, jsondata.selected.groep);
					pointer.fillList(pointer.id_categorie, jsondata.categorie, jsondata.selected.categorie);
					pointer.fillList(pointer.id_merk, jsondata.merk, jsondata.selected.merk);
				}
			}).send(qs);
			// Eerste keer instellen is geweest. Variabele op false zetten
			this.first_time = false;
		}
	},
	// Vul een lijst en selecteer de eerder geselecteerde optie
	fillList: function(id, data, selected) {
		if($(id)) {
			// Maak de lijst leeg
			$(id).empty();
			data.each(function(item, index) {
				// Nieuw <option> element plaatsen
				var el = new Element('option',{'value': item['id']}).inject($(id));
				// Tekst van option
				el.set('text', item['titel']);
				// option selecteren als dit de gekozen optie was
				if(selected == item['id']) {
					el.set('selected','selected');
				}
			});
		}
	},
	// Reset de lijsten. func kan een functie zijn bijv (function(){alert('');}), anders null
	resetData: function(func) {
		// Maak de lijsten leeg
		$(this.id_groep).empty();
		$(this.id_categorie).empty();
		$(this.id_merk).empty();
		
		// Nieuw <option> element plaatsen zodat bij een submit
		// reset de begin opties weer geselecteerd worden.
		new Element('option',{'value': null,'selected': 'selected'}).inject($(this.id_groep));
		new Element('option',{'value': null,'selected': 'selected'}).inject($(this.id_categorie));
		new Element('option',{'value': null,'selected': 'selected'}).inject($(this.id_merk));
		
		// Vul de lijsten in
		this.setAll();
		
		// Alleen als func van het type function is
		// func() uitvoeren
		if($type(func) == 'function') {
			func();
		}
		return 1;
	},
	// Functie om de query string uit te lezen
	query_string: function() {
		var qsParm = new Array();
		var query = window.location.search.substring(1);
		//alert(query);
		var parms = query.split('&');
		for (var i=0; i<parms.length; i++) {
			var pos = parms[i].indexOf('=');
			if (pos > 0) {
				var key = parms[i].substring(0,pos);
				var val = parms[i].substring(pos+1);
				qsParm[key] = val;
			}
		}
		return qsParm;
	}
});