var ProductsSearchBox = Class.create();
Object.extend(ProductsSearchBox.prototype, {
	
	initialize: function()
	{
		Event.observe(window, 'load', this.onLoad.bind(this));
	},
	
	onLoad: function()
	{
		this.flavorList = $('flavorList');
		this.categoryList = $('categoryList');
		
		this.options = [];
		$A(this.flavorList.options).each(function(item, i) {
			if(!this.options[$(item).readAttribute('_gamme')]) {
				this.options[$(item).readAttribute('_gamme')] = [];
			}
			this.options[$(item).readAttribute('_gamme')].push(item);
		}, this);
		
		
		this.categoryList.observe('change', this.onChange.bind(this));
		this.categoryChange(this.categoryList.value);
	},
	
	onChange: function()
	{
		this.categoryChange(this.categoryList.value);
	},
	
	
	categoryChange: function(cat)
	{
		var gamme = null;
		this.flavorList.options.length = 0;
		this.flavorList.options[0] = new Option('Select :', 0);
		$A(this.options[cat]).each(function(item, i) {
			this.flavorList.options[i + 1] = item;
		}, this);
		this.flavorList.selectedIndex = 0;
	}
	
	
});

new ProductsSearchBox();