var PopupForm = new Class({
	
	options: {
		button: false,
		posX: 0,
		posY: 0,
		width: 100,
		height: 100,
		URLform: "",
		URLaction: ""
	},
	
	initialize: function(options){
		
		this.setOptions(options);
		
		this.status = "close";
		
		//listenning click on the button
		this.button = $(this.options.button);
		this.button.setStyle('cursor','pointer');
		this.button.addEvent('click', this.clickButton.bind(this));
		
		//create div which will contain the form
		this.container = new Element('div',{
			styles: {
				position: 'absolute',
				backgroundColor: '#9A988F',
				left: this.options.posX,
				top: this.options.posY,
				width: this.options.width,
				height: this.options.height,
				paddingTop: 3,
				paddingLeft: 6,
				paddingRight: 6,
				overflow: 'hidden',
				display: 'none'
			}
		}).injectInside($('page'));
		
		this.container.setStyle('z-index','3');
		
		this.containerFx = new Fx.Tween(this.container, {
			duration: 250
		});
	},
	
	clickButton: function(){
		
		if (this.status === "close") this.openPopup();
		else this.closePopup();
	},
	
	openPopup: function(){
		
		this.containerFx.start("height", 0, this.options.height)
		this.container.setStyle('display','block');
		this.status = "open";
		this.button.setStyle('background-position','0px -36px');
		
		//load form inside the container
		this.container.set('html','loading...');
		//this.container.load("form.html");
		var date = new Date ;
		
		var myHTMLRequest = new Request.HTML({
			method: 'get',
			url: this.options.URLform+"?time="+date.getTime(),
			update: this.container,
			
			onSuccess: function(responseText, responseXML){
				
				this.myForm = $('popupform_form');
				this.myForm.addEvent('submit', function(e){
					new Event(e).stop();
					this.submitForm(e);
				}.bind(this));
				
				
				this.myFormFx = new Fx.Tween(this.myForm, {
					duration: 250
				});
				
				
			}.bind(this),
			
			onFailure: function(instance){
				this.container.set('text','failure');
			}
		});
		
		
		myHTMLRequest.send();
		
		
		//var myHTMLRequest = new Request.HTML().get(URLform);
	},
	
	closePopup: function(){
		
		this.containerFx.start("height", 0).chain( 
			function(){
				this.container.setStyle('display','none');
			}.bind(this));
			
		this.status = "close";
		this.button.setStyle('background-position','0px 0px');

	},
	
	displayPopup: function(){
		alert(this.container);
	},
	
	submitForm: function(e){
		
		//this.myFormFx.start("opacity", 0).chain(function(){
			var bt = $('form_bt');
			bt.set('value', 'en cours...');
		
			var myHTMLRequest = new Request.HTML({
			
				method: 'get',
				url: this.options.URLaction,
				//update: this.container,
				data: $('popupform_form'),

				onComplete: function(responseTree, responseElements, responseHTML, responseJavaScript){
					
					
					setTimeout(function(){
						
										
						if (responseHTML == 'ok1'){
							
							this.container.set('html','<span class="nl_message">adresse ajoutée</span>');
							
							setTimeout(function(){
								
								this.closePopup();
											
							}.bind(this), 3000);
							
							
						} else if (responseHTML == 'ok2') {
							
							this.container.set('html','<span class="nl_message">adresse supprimée</span>');
							
							setTimeout(function(){
								
								this.closePopup();
											
							}.bind(this), 3000);
							
						}else {
							
							var divMsg = $('nl_message');
							
							divMsg.setStyle('overflow','hidden');
							divMsg.set('html', responseHTML);
							var divDimension = divMsg.getScrollSize();
							
							var myFx = new Fx.Tween(divMsg, {
														duration: 250
													});
							
							myFx.start("height", 0, divDimension.y);
							
							
							bt.set('value', 'ok');
						}
					}.bind(this), 500);

				
				}.bind(this),
			
				onFailure: function(instance){
					this.container.set('text','erreur');
				}
			}).send();
		
		//}.bind(this));
	}
});

PopupForm.implement(new Options, new Events);