/* classe API */
export class PopUp{

	constructor(){

		/* (1) Fetch DOM elements */
		this.element = {
			background:  document.querySelector('#POPUP-BG'),
			frame:       document.querySelector('#POPUP'),
			header:      document.querySelector('#POPUP .header'),
			body:        document.querySelector('#POPUP .body'),
			footer:      document.querySelector('#POPUP .footer')
		};

		/* (2) Set background click === to CANCEL action */
		this.element.background.addEventListener('click', function(e){
			this.hide().handler(false);
		}.bind(this), false);

		/* (3) Init. handler */
		this.handler = null;

	}

	/* (1) Show the popup on screen
	*
	* @return this<PopUp>			current instance
	*
	---------------------------------------------------------*/
	show(){

		this.element.frame.className = 'active';

		return this;

	}

	/* (2) Hide the popup from screen
	*
	* @return this<PopUp>			current instance
	*
	---------------------------------------------------------*/
	hide(){

		this.element.frame.className = '';

		return this;

	}

	/* (3) PopUp dialog
	*
	* @pObject {
	*	title: 'popUp title',
	*	content: 'popUp content',
	*	type: 'popUp content',
	*	action: 'action button content',
	* }
	*
	* @pHandler
	*
	* @return this<PopUp>			current instance
	*
	---------------------------------------------------------*/
	ask(pObject, pHandler){

		/* (1) Check argument
		---------------------------------------------------------*/
		/* (1) Check type */
		if( !(pObject instanceof Object) )
			return null;

		/* (2) Check Title */
		if( pObject.title == null )
			return null;

		/* (3) Check Content */
		if( pObject.content == null )
			return null;

		/* (4) Check Type */
		if( pObject.type == null )
			return null;

		/* (5) Check Action */
		if( pObject.action == null )
			return null;

		/* (6) Check handler */
		if( !(pHandler instanceof Function) )
			return null;


		/* (2) Set the content
		---------------------------------------------------------*/
		/* (1) Title */
		this.element.header.innerHTML = pObject.title;

		/* (2) Content */
		this.element.body.innerHTML = pObject.content;

		/* (3) Store the handler */
		this.handler = pHandler;



		/* (3) Set the buttons (action)
		---------------------------------------------------------*/
		/* (1) Define action button */
		var action_btn = document.createElement('button');
			action_btn.className = pObject.type;
			action_btn.innerHTML = pObject.action;

		/* (2) Define cancel button */
		var cancel_btn = document.createElement('button');
			cancel_btn.className = 'grey';
			cancel_btn.innerHTML = 'Annuler';

		/* (3) Bind events */
		function handler(e){ this.hide(); this.handler( e.target.className != 'grey' ); }

		action_btn.addEventListener('click', handler.bind(this), false);
		cancel_btn.addEventListener('click', handler.bind(this), false);

		/* (4) Add elements to the object */
		this.element.footer.innerHTML = '';
		this.element.footer.appendChild(action_btn);
		this.element.footer.appendChild(cancel_btn);

		return this.show();

	}

}