CMScelta = new Class({
	Extends: CosMooPopup,
	
	options: {
		'trads': {}
	},
	
	trad: function(str)
	{
		return this.options.trads[str] || '['+str+']';
	},
	
	draw: function(divBody, el)
	{
		var obj = this;
		this.colori = new Array();
		this.versioni = new Array();
		this.accessori = new Array();
		this.data = null;
		
		var req = new Request.JSON({
			url: this.options.url,
			onComplete: function(data) {
				obj.data = data;
				divBody.empty();
				divBody.grab(new Element('div', {'html':obj.trad('seleziona_configurazione'), 'class':'titolo'}));
				var form = new Element('form', {'action':obj.options.url, 'method':'post'});
				form.grab(new Element('input', {'type':'hidden', 'name':'id', 'value':data.id}));
				form.grab(new Element('input', {'type':'hidden', 'name':'fam', 'value':data.famiglia}));
				form.grab(new Element('input', {'type':'hidden', 'name':'sez', 'value':data.sezione}));
				form.grab(new Element('input', {'type':'hidden', 'name':'doSubmit', 'value':1}));
				
				//Colori
				var divColori = new Element('div');
				divColori.addClass('lista');
				divColori.addClass('colori');
				
				divColori.grab(new Element('div', {'html':obj.trad('seleziona_un_colore')+'...', 'class':'sottotitolo'}));
				data.colori.each(function(el)
				{
					var row = new Element('div');
					row.set('html', el.codice+' ('+el.nome+')');
					row.addClass('el');
					divColori.grab(row);
										row.store('id', el.id);
					row.addEvent('click', function(ev){
						ev.stop();
						obj.resetSelection();
						this.addClass('sel');
						obj.setVersioni(this.retrieve('id'));
						inputc.set('value', this.retrieve('id'));
						inputv.set('value', '');
						inputa.set('value', '');
					});
					obj.colori.push(row);
				});

				var inputc = new Element('input', {'type':'hidden', 'name':'colore'});
				form.grab(inputc);
				form.grab(divColori);
				
				//Versioni
				var divVersioni = new Element('div');
				divVersioni.addClass('lista');
				divVersioni.addClass('versioni');
				
				divVersioni.grab(new Element('div', {'html':obj.trad('seleziona_una_versione')+'...', 'class':'sottotitolo'}));
				data.versioni.each(function(el)
				{
					var row = new Element('div');
					row.set('html', el.nome_ita);
					row.addClass('disabled');
					row.addClass('el');
					divVersioni.grab(row);
					row.store('id', el.id);
					row.addEvent('click', function(ev){
						ev.stop();
						if (this.hasClass('disabled')) return;
						obj.resetVersioni();
						this.addClass('sel');
						obj.setAcc(inputc.get('value'), this.retrieve('id'));
						inputv.set('value', this.retrieve('id'));
						inputa.set('value', '');
					});
					obj.versioni.push(row);
				});
				var inputv = new Element('input', {'type':'hidden', 'name':'versione'});
				form.grab(inputv);
				form.grab(divVersioni);
				
				//Accessori
				var divAccessori = new Element('div');
				divAccessori.addClass('lista');
				divAccessori.addClass('accessori');
				
				var inputa = new Element('input', {'type':'hidden', 'name':'accessorio'});
				form.grab(inputa);
				if (data.accessori.length > 0)
				{
					divAccessori.grab(new Element('div', {'html':obj.trad('aggiungi_un_accessorio')+'...', 'class':'sottotitolo'}));
					data.accessori.each(function(el)
					{
						var row = new Element('div');
						row.set('html', el.codice+'<br>'+el.nome);
						row.addClass('disabled');
						row.addClass('el');
						divAccessori.grab(row);
						row.store('id', el.id);
						row.addEvent('click', function(ev){
							ev.stop();
							if (this.hasClass('disabled')) return;
							obj.resetAcc();
							this.addClass('sel');
							inputa.set('value', this.retrieve('id'));
						});
						obj.accessori.push(row);
					});
					form.grab(divAccessori);
				}
								
				//Submit
				var divSubmit = new Element('div', {'class':'submit'});
				obj.submit = new Element('button', {'html':data.invia});
				obj.submit.disabled = true;
				obj.submit.addClass('hidden');
				divSubmit.grab(obj.submit);
				form.grab(divSubmit);
				
				obj.submit.addEvent('click', function(ev){
					ev.stop();
					form.submit();
				})
				
				divBody.grab(form);
				
				var parent = divBody.getParent();
				parent.setStyle('height',divBody.getDimensions().y);
			},
			onFailure: function() {
				divBody.set('html', 'The Request has failed...');
			}
		}).post({'id':el.get('rel')});
	},

	resetSelection: function()
	{
		this.colori.each(function(el){
			el.removeClass('sel');
		});

		this.versioni.each(function(el){
			el.removeClass('sel');
			el.addClass('disabled');
		});

		this.accessori.each(function(el){
			el.removeClass('sel');
			el.addClass('disabled');
		});
		this.submit.disabled = true;
		this.submit.addClass('hidden');
	},
	
	resetVersioni: function()
	{
		this.versioni.each(function(el){
			el.removeClass('sel');
		});

		this.accessori.each(function(el){
			el.removeClass('sel');
			el.addClass('disabled');
		});
		this.submit.disabled = true;
		this.submit.addClass('hidden');
	},
	
	resetAcc: function()
	{
		this.accessori.each(function(el){
			el.removeClass('sel');
		});
	},
	
	setVersioni: function(col)
	{
		var arrData = this.data.allowc[col];
		this.versioni.each(function(el){
			if (arrData.contains(el.retrieve('id')))
				el.removeClass('disabled');
		});
	},
	
	setAcc: function(col, ver)
	{
		var arrData;
		try{arrData = this.data.allowa[col][ver];}catch(ex){arrData = new Array();}
		this.accessori.each(function(el){
			if (arrData.contains(el.retrieve('id')))
				el.removeClass('disabled');
		});
		this.submit.disabled = false;
		this.submit.removeClass('hidden');
	}
});