var PopUp = Class.create();

PopUp.prototype = {
	/**
	 *
	 * @param popup Element
	 * @param popup content container
	 * @param popup closer
	 * 	param tmpContainer Tmp container of all view
	 */
	initialize : function(popupElement,popupContent, popupCloser,tmpContainer) {
		this.container = popupElement;
		this.content = popupContent;
		this.closer = popupCloser;
		this.tmpContainer = tmpContainer;
		this.annonces = new Array();
		this.currentView = null;
		
		//this.displayPopup();
		
		this.closer.observe('click', function(event){ this.hidePopup(); Event.stop(event);}.bind(this));
		$('popup-overlay').observe('click', function(event){ this.hidePopup(); Event.stop(event);}.bind(this));
	},

	centerPopUp : function() {
		var el = this.container;
		var elDims = el.getDimensions();
		var browserName = navigator.appName;
		if (browserName === "Microsoft Internet Explorer") {

			if (document.documentElement.clientWidth == 0) {
				// IE8 Quirks
				var y = (document.viewport.getScrollOffsets().top + (document.body.clientHeight - elDims.height) / 2);
				var x = (document.viewport.getScrollOffsets().left + (document.body.clientWidth - elDims.width) / 2);
			} else {
				var y = (document.viewport.getScrollOffsets().top + (document.documentElement.clientHeight - elDims.height) / 2);
				var x = (document.viewport.getScrollOffsets().left + (document.documentElement.clientWidth - elDims.width) / 2);
			}
		} else {
			// calculate the center of the page using the browser andelement
			// dimensions
			var y = Math.round(document.viewport.getScrollOffsets().top
					+ ((window.innerHeight - el.getHeight())) / 2);
			var x = Math.round(document.viewport.getScrollOffsets().left
					+ ((window.innerWidth - el.getWidth())) / 2);
		}
		// set the style of the element so it is centered
		var styles = {
			position : 'absolute',
			top : y + 'px',
			left : x + 'px'
		};
		el.setStyle(styles);
	},

	/**
	 * 
	 * Display content
	 */
	displayPopup: function(content,popupClass){
		this.close();
		this.container.setOpacity(0);
		this.container.addClassName(popupClass);
		this.container.removeClassName('no-display');
		
		if( this.currentView ){
			this.tmpContainer.appendChild(this.currentView);
		}
		
		this.currentView = content;
		
		this.content.innerHTML = "";
		this.content.appendChild(this.currentView);
		
		this.centerPopUp();
		
		this.container.setOpacity(0);
		$('popup-overlay').setOpacity(0);
		$('popup-overlay').removeClassName('no-display');
		this.container.removeClassName('no-display');

		this.centerPopUp();
		new Effect.Parallel([
  			new Effect.Appear($('popup-overlay'), {
 				duration : 2,
 				from : 0,
 				to : 0.3,
 				sync: true
 			}),
 			new Effect.Appear(this.container, {
 				duration : 2,
 				from : 0,
 				to : 1,
 				sync: true
 			})
 		]);
	},
	
	hidePopup: function(){
		new Effect.Parallel([
			new Effect.Fade(this.container, {
				duration : 0.5,
				to : 0,
				sync: true
			}),
			new Effect.Fade($('popup-overlay'), {
				duration : 0.5,
				to : 0,
				sync: true,
				afterFinish:  function(){ this.close(); }.bind(this)
			})
		]);
	},
	
	close: function(){
		if( this.currentView ){
			this.tmpContainer.appendChild(this.currentView);
		}
		
		this.container.addClassName('no-display');
		$('popup-overlay').addClassName('no-display');
		
		this.container.removeClassName('contactez_nous');
		this.container.removeClassName('detail_client');
	}
};