var ProductOverzicht = Class.create({
	
	categorySelectors : null,
	brandsSelectors : null,
	allSelectors : null,
	productWrapper : null,
	products : null,
	
	initialize : function(){
		this.categorySelectors = $('categories').select('input.selector');
		this.brandsSelectors = $('brands').select('input.selector');
		
		this.allSelectors = this.categorySelectors.concat(this.brandsSelectors);
		
		this.productWrapper = $('productwrapper');
		this.products = this.productWrapper.select('li');
		
		//hoogte van wrapper zetten, zodat deze niet telkens verschuift
		this.productWrapper.up('div.wrapper').setStyle({'height' : this.productWrapper.getHeight()+'px'});
		
		//Als juiste elementen aanwezig zijn, observers toevoegen
		if(this.productWrapper && this.brandsSelectors && this.categorySelectors){
			this.addObservers();
		}
	},
	
	addObservers : function(){
		this.allSelectors.each(function(checkbox){
			Element.observe(checkbox, 'change', function(){
				this.updateProductSelection(checkbox);
			}.bind(this));
		}.bind(this));
	},
	
	updateProductSelection : function(checkbox){
		new Effect.Fade(this.productWrapper, { 
			duration: 0.2,
			afterFinish: function(){
				//Update producten
			 	this.updateProductWrapper(checkbox);
			 	//Produten laten zien
			 	new Effect.Appear(this.productWrapper, {
					duration: 0.2
				});
			}.bind(this)
		});
	},
	
	updateProductWrapper : function(checkbox){
		//Loop door producten
		this.products.each(function(product){
			var showProduct = true;
			
			//Loop door selectors
			this.allSelectors.each(function(checkbox){
				if(product.hasClassName(checkbox.readAttribute('id')) && !$F(checkbox)){
					showProduct = false;
				}
			}.bind(this));
			
			//Product laten zien of niet
			if(showProduct){
				product.setStyle({'display':'block'});
			}else{
				product.setStyle({'display':'none'});
			}
		}.bind(this));
	}
});

document.observe("dom:loaded", function(event) {
	var PO = new ProductOverzicht();
});