var neteditAjaxTable = new Class({
	Implements: Options,
	
	options: {
		divId:'table-ajax',
		prefix:'data-',
		selects:{},
		radios:{},
    	actionUpdate: '',
    	actionDelete: '',
    	alertDelete: 'Sei sicuro?',
    	
    	htmButtonUpdate: '<img src="libs/views/imgs/edit.png" alt="Modifica" border="0" align="absmiddle" >',
    	htmButtonDelete: '<img src="libs/views/imgs/del.png" alt="Elimina" border="0" align="absmiddle" >',
    	htmButtonInsert: '<img src="libs/views/imgs/add.png" alt="Inserisci" border="0" align="absmiddle" >'
    },

    initialize: function(options){
    	this.setOptions(options);
    	this.trInUpdate = null;
    	this.primaryKeySel = 0;
    	
    	this.addButtonsUpdate();
    	this.addEventsUpdate();
    	
    	this.addButtonsDelete();
    	this.addEventsDelete();    	
    	
    	this.addButtonsInsert();
    	this.addEventsInsert();
    },
    
    addButtonsInsert: function(){
    	var html = '<a href="#" accesskey="A" title="[ALT + A]">'+this.options.htmButtonInsert+'</a>';
    	var tdButtonInsert = $$('#'+this.options.divId+' .'+this.options.prefix+'button-insert');
    	$each(tdButtonInsert, function(td, index){
		    td.set('html', html);
		});
    },
    
    addEventsInsert: function(){
    	var aButtonInsert = $$('#'+this.options.divId+' .'+this.options.prefix+'button-insert a');
    	$each(aButtonInsert, function(a, index){
			a.addEvent('click', function(e){
			    this.addTrInUpdateMode(e);
			    return false;
			}.bind(this));
		}.bind(this));
    },
    
    addButtonsUpdate: function(tr){
    	var html = '<a href="#">'+this.options.htmButtonUpdate+'</a>';
    	if(tr){
    		var tdButtonUpdate = tr.getElements('.'+this.options.prefix+'button-update');
    	}else{
	    	var tdButtonUpdate = $$('#'+this.options.divId+' .'+this.options.prefix+'button-update');
    	}
    	$each(tdButtonUpdate, function(td, index){
		    td.set('html', html);
		});
    },
    
    addEventsUpdate: function(tr){
    	if(tr){
    		var aButtonUpdate = tr.getElements('.'+this.options.prefix+'button-update a');
    	}else{
	    	var aButtonUpdate = $$('#'+this.options.divId+' .'+this.options.prefix+'button-update a');
    	}
    	$each(aButtonUpdate, function(a, index){
			a.addEvent('click', function(e){
			    this.trInUpdateModeEvent(e);
			    return false;
			}.bind(this));
		}.bind(this));	
    },
    
    addButtonsDelete: function(tr){
    	var html = '<a href="#">'+this.options.htmButtonDelete+'</a>';
    	if(tr){
    		var tdButtonDelete = tr.getElements('.'+this.options.prefix+'button-delete');
    	}else{
	    	var tdButtonDelete = $$('#'+this.options.divId+' .'+this.options.prefix+'button-delete');
    	}
    	$each(tdButtonDelete, function(td, index){
    		var tr = td.getParent();
    		var tds = tr.getElements('.'+this.options.prefix+'button-insert');
    		if(tds.length==0){
		    	td.set('html', html);
    		}
		}.bind(this));
    },
    
    addEventsDelete: function(tr){
    	if(tr){
    		var aButtonDelete = tr.getElements('.'+this.options.prefix+'button-delete a');
    	}else{
	    	var aButtonDelete = $$('#'+this.options.divId+' .'+this.options.prefix+'button-delete a');
    	}
    	
    	$each(aButtonDelete, function(a, index){
			a.addEvent('click', function(e){
			    this.remove(e);
			    return false;
			}.bind(this));
		}.bind(this));
    },
    
    /* 
    display tr in view mode
    */
    trInViewMode:function(tr){
    	var tbody = tr.getParent();
    	var table = tbody.getParent();
    	var form = table.getParent();
    	
    	// elimina il form attorno alla table se esiste
    	if(form.get('tag')=='form'){
    		var table = form.getChildren();
			table.replaces(form);
    	}
    	
    	// elimina ogni input type submit e reset
    	$each($$('#'+this.options.divId+' .'+this.options.prefix+'button-update input'), function(input, index){
    		input.dispose();
    	});
    	
    	// mostra i bottoni di modifica e cancella
    	$each(tr.getElements('.'+this.options.prefix+'button-update a'), function(a, index){
    		a.setStyle('display','block');
    	});
    	$each(tr.getElements('.'+this.options.prefix+'button-delete a'), function(a, index){
    		a.setStyle('display','block');
    	});
    	
    	// cicla sui td e reimposta i valori presi dalle input
    	var dataText = tr.getElements('.'+this.options.prefix+'text');
    	$each(dataText, function(td, index){
    		var input = td.getElement('input');
    		if(input){
	    		var html = input.get('value');
			    td.set('html', html);
    		}
		}.bind(this));
		
		// cicla sulle select e reimposta l'opzione selezionata
		var dataSelect = tr.getElements('.'+this.options.prefix+'select');
    	$each(dataSelect, function(td, index){
    		var select = td.getElement('select');
    		if(select){
	    		var html = select.options[select.selectedIndex].text;
	    		var valueSel = select.get('value');
			    td.set('html', html);
			    td.setAttribute('sel', valueSel);
    		}
		}.bind(this));
		
		// cicla sulle radio e reimposta l'opzione selezionata
		var dataRadio = tr.getElements('.'+this.options.prefix+'radio');
    	$each(dataRadio, function(td, index){
    		var radios = td.getElements('input');
    		var html = '';
    		var valueSel = '';
    		$each(radios, function(radio, index){    			
    			if(radio.get('checked')){
    				 valueSel = radio.get('value');
    				 /* da rivedere */
    				 html = radio.nextSibling.nodeValue.trim();
    			}
    		}.bind(this));
    		
			td.set('html', html);
			td.setAttribute('sel', valueSel);
		}.bind(this));
		
		// trova la chiave primaria e la inserisce
		var dataPrimary = tr.getElements('.'+this.options.prefix+'primarykey');
    	$each(dataPrimary, function(td, index){
    		var input = td.getElement('input');
    		if(input){
	    		var html = input.get('value');
			    td.set('html', html);
    		}
		}.bind(this));
    },
    
    /*
    display l'ultimo tr in edit in view mode
    */
    lastTrInViewMode:function(){
    	if(this.trInUpdate){
    		
    		var dataPrimary = this.trInUpdate.getElements('.'+this.options.prefix+'primarykey input');
    		if(dataPrimary.length>0){
		    	$each(dataPrimary, function(input, index){
		    		// controlla se l'ultimo tr era un update o un insert
				    if(input.get('value')=='0'){
				    	this.trInUpdate.dispose();
				    }else{
				    	this.trInViewMode(this.trInUpdate);
				    }
				}.bind(this));
    		}else{
    			this.trInViewMode(this.trInUpdate);
    		}
    		this.trInUpdate = null;
    	}
    },
    
    trInUpdateModeEvent: function(e){
    	var event = new Event(e);
    	var a = $(event.target).getParent();
    	var td = a.getParent();
    	var tr = td.getParent();
    	this.trInUpdateMode(tr);
    },
    
    trInUpdateMode: function(tr){
    	this.lastTrInViewMode();
    
    	var tds = tr.getChildren('.'+this.options.prefix+'button-update');
		var td = tds[0];
    	var tbody = tr.getParent();
    	var table = tbody.getParent();
    	var div = table.getParent();
    	
    	$each(tr.getElements('.'+this.options.prefix+'button-update a'), function(a, index){
    		a.setStyle('display','none');
    	});
    	$each(tr.getElements('.'+this.options.prefix+'button-delete a'), function(a, index){
    		a.setStyle('display','none');
    	});
    	
    	var buttonSubmit  = new Element('input',{type:'submit', title:'[ALT + S]', accesskey:'S', value:'Salva'});
    	buttonSubmit.inject(td);
    	
    	var buttonCancel  = new Element('input',{type:'reset', value:'Annulla'});
    	buttonCancel.inject(td);
    	buttonCancel.addEvent('click', function(e){
			 this.cancel(e);
			 return false;
		}.bind(this));
    	
    	var form  = new Element('form', {method:'post', action: this.options.actionUpdate});
    	form.addEvent('submit', function(e){
			 this.save(e);
			 return false;
		}.bind(this));
    	table.inject(form);
    	form.inject(div);
    	
    	this.trInUpdate = tr;
    	
    	var dataPrimary = tr.getElements('.'+this.options.prefix+'primarykey');
    	$each(dataPrimary, function(td, index){
    		this.primaryKeySel = td.get('html');
    		var name = td.get('rel');
    		var html = '<input type="hidden" name="'+name+'" value="'+this.primaryKeySel+'">';
		    td.set('html', html);
		}.bind(this));
		
    	var dataText = tr.getElements('.'+this.options.prefix+'text');
    	$each(dataText, function(td, index){
    		var value = td.get('html');
    		var name = td.get('rel');
    		var html = '<input type="text" name="'+name+'" value="'+value+'" style="width:100%">';
		    td.set('html', html);
		});
		
		var dataSelect = tr.getElements('.'+this.options.prefix+'select');
    	$each(dataSelect, function(td, index){
    		var value = td.get('html');
    		var name = td.get('rel');
    		var no_primary_key = td.get('no_primary_key');
    		
    		var valueSel = td.get('sel');
    		var html = '<select name="'+name+'">';
    		
    		if(this.options.selects.has(name)){
	    		var options = this.options.selects.get(name);

	    		$each(options, function(option, key){
	    			if($type(key)=='string'){
	    				if(no_primary_key){
	    					if(key!=this.primaryKeySel){
	    						html += '<option value="'+key+'" '+(key==valueSel?'SELECTED':'')+'>'+option+'</option>';
	    					}
	    				}else{
	    					html += '<option value="'+key+'" '+(key==valueSel?'SELECTED':'')+'>'+option+'</option>';
	    				}
	    			}else{
	    				html += '<option '+(option==valueSel?'SELECTED':'')+'>'+option+'</option>';
	    			}
	    		}.bind(this));
	    		
	    		html += '</select>';
    		}
    		td.set('html', html);
		}.bind(this));
		
		var dataRadio = tr.getElements('.'+this.options.prefix+'radio');
    	$each(dataRadio, function(td, index){
    		var value = td.get('html');
    		var name = td.get('rel');
    		var valueSel = td.get('sel');
    		var html = '';
    		
    		if(this.options.radios.has(name)){
	    		var options = this.options.radios.get(name);
	
	    		$each(options, function(display, key){
	    			if($type(key)=='string'){
	    				html += '<input type="radio" name="'+name+'" value="'+key+'" '+(key==valueSel?'CHECKED':'')+'> '+display+' ';
		    		}else{
		    			html += '<input type="radio" name="'+name+'" value="'+display+'" '+(display==valueSel?'CHECKED':'')+'> '+display+' ';
		    		}
	    		}.bind(this));
    		}
    		td.set('html', html);
		}.bind(this));
		
		
    	
    },
    
    save: function(e){
    	var event = new Event(e);
    	var form = $(event.target);
    	this.options.actionUpdate = this.options.actionUpdate.replace(/\&amp;/g,'&');
    	form.send(this.options.actionUpdate);
    	var request = form.get('send');
    	request.onSuccess = function(txt, xml){
    		var id = eval('(' + txt + ')');
    		var dataPrimary = $$('#'+this.options.divId+' .'+this.options.prefix+'primarykey input'); // da rivedere
    		$each(dataPrimary, function(input, index){
			    input.set('value', id);
			}.bind(this));
    		this.lastTrInViewMode();
    	}.bind(this);    	
    },
    
    cancel:function(e){
    	var event = new Event(e);  
    	var input = $(event.target);
    	input.form.reset();
    	this.lastTrInViewMode();
    },
    
    remove :function(e){
    	var event = new Event(e);
    	var a = $(event.target).getParent();
    	
    	var tr = a.getParent().getParent();
    	
    	if(confirm(this.options.alertDelete)){
    		var dataPrimary = tr.getElements('.'+this.options.prefix+'primarykey');
	    	$each(dataPrimary, function(td, index){
	    		var value = td.get('html');
	    		var name = td.get('rel');
	    		var url = this.options.actionDelete+'&'+name+'='+value;
	    		netedit.ajax.getData( 
					url.replace(/\&amp;/g,'&'),
					{
						method: 'get',
						onComplete: this.respDelete.bind(this)
					}
				);
			}.bind(this));
			tr.dispose();
    	}
    	
    },
    
    respDelete: function(txt){
    	
    },
    
    addTrInUpdateMode: function(e){
    	this.lastTrInViewMode();
    
    	var event = new Event(e);
    	var a = $(event.target).getParent();
    	var td = a.getParent();
    	var tr = td.getParent();
    	
		var newTr = $(tr).clone().inject(tr,'after');
		// rimuove ogni stile dal tr intestazione
	    newTr.removeProperties('prevcolor','style','class');
		
	    var dataText = newTr.getElements('.'+this.options.prefix+'text');
    	$each(dataText, function(td, index){
		    td.set('html', '');
		});
		
		var dataPrimary = newTr.getElements('.'+this.options.prefix+'primarykey');
    	$each(dataPrimary, function(td, index){
		    td.set('html', '0');
		});
		
		$each(newTr.getElements('.'+this.options.prefix+'button-insert'), function(newTr, index){
		    newTr.set('class', ''+this.options.prefix+'button-update');
		    newTr.set('html', '');
	   
	    }.bind(this));
	    
	    $each(newTr.getElements('.delete'), function(newTr, index){
		    newTr.set('class', ''+this.options.prefix+'button-delete');
		    newTr.set('html', '');

		}.bind(this));
		
		this.addButtonsUpdate(newTr);
		this.addButtonsDelete(newTr);
		
		this.addEventsDelete(newTr);
    	this.addEventsUpdate(newTr);
    	
		this.trInUpdateMode(newTr);
    } 
});

/* 
-----------------------------
---------- ESEMPIO ----------
-----------------------------

<script>
window.addEvent("domready", function(){
	var myNeteditAjaxTable = new neteditAjaxTable(
		{
			selects: $H({'tabella[sesso]':{'m':'maschio','f':'femmina'}}),
			radios: $H({'tabella[radio]':{'0':'Presente','1':'eliminato'}}),
			prefix:'data-',
			diId:'table-ajax',
			actionUpdate:'',
			actionDelete:''
		}
	);
});
</script>

<div id="table-ajax">
	<table align="center" cellpadding="5" cellspacing="0" id="root">
		<tr class="intestazione">
			<td class="data-button-insert"></td>
			<td class="data-button-delete"></td>
			<td class="data-primarykey" rel="tabella[id]">Id</td>
			<td class="data-text" rel="tabella[nome]">Nome</td>
			<td class="data-text" rel="tabella[cognome]">Cognome</td>
		</tr>
		<tr>
			<td class="data-button-update"></td>
			<td class="data-button-delete"></td>
			<td class="data-primarykey" rel="tabella[id]">1</td>
			<td class="data-text" rel="tabella[nome]">caio</td>		
			<td class="data-text" rel="tabella[cognome]">il suo cognome</td>
			<td class="data-select" rel="tabella[sesso]" sel="m">maschio</td>
			<td class="data-radio" rel="tabella[radio]" sel="0">Presente</td>
		</tr>
	</table>
</div>



*/