;(function ( $ ) {

var template = 
'<div class="modal-positioner">' +
	'<div class="modal-wrap">' +
		'<div class="modal-trim">' +
			'<div class="modal-head">' +
				'<a class="modal-close-btn" href="">' +
					'<span class="modal-close-btn-text">Close</span>' +
					'<span class="modal-close-btn-icon">&times;</span>' +
				'</a>' +
			'</div>' +
			'<div class="modal-inner">' +
			'</div>' +
		'</div>' +
	'</div>' +
'</div>';

var fragment = document.createElement( 'div' );
fragment.innerHTML = template;

var insert = function ( el ) {
	return document.body.appendChild( el );
};
var remove = function ( el ) {
	return el.parentNode.removeChild( el );
};


var self = $.modal = {

	inserted: false,
	modalCSS: null,
	
	overlay: $( '<div />' ).addClass( 'modal-overlay' ).get(0),
	positioner: $( '.modal-positioner', fragment ).get(0),
	head: $( '.modal-head', fragment ).get(0),
	inner: $( '.modal-inner', fragment ).get(0),
	closeBtn: $( '.modal-close-btn', fragment ).get(0),
	closeBtnText: $( '.modal-close-btn-text', fragment ).get(0),
	closeBtnIcon: $( '.modal-close-btn-icon', fragment ).get(0),
	
	fireEvent: function ( evtName ) {
		if ( jQuery.isFunction( this[evtName] ) ) {
			this[evtName]();
		}
	},

	open: function ( html, opts ) {
		opts = opts || {};
		
		if ( self.inserted ) {
			return;
		}
		
		insert( self.overlay );
		self.fireEvent( 'onOverlayInsert' );
		
		self.inner.innerHTML = html || '';
		self.fireEvent( 'onHTMLInsert' );

		insert( self.positioner );
		self.fireEvent( 'onPositionerInsert' );
		
		self.positioner.style.top = $( window ).scrollTop() + 100 + 'px';
		
		if ( opts['class'] ) {
			self.modalCSS = 'modal-' + opts['class'];
			$( self.positioner ).addClass( self.modalCSS );
		} 

		self.fireEvent( 'onOpen' );

		self.inserted = true;
	},
	
	close: function () {
		if ( !self.inserted ) {
			return;
		}
		remove( self.overlay );
		self.fireEvent( 'onOverlayRemove' );
		
		remove( self.positioner );
		self.fireEvent( 'onPositionerRemove' );

		if ( self.modalCSS ) {
			$( self.positioner ).removeClass( self.modalCSS );
			self.modalCSS = null;
		}

		self.fireEvent( 'onClose' );
		
		self.inserted = false;
	}
};

$( $.modal.closeBtn ).click( function ( e ) {
	// alert('hola');
	$.modal.close();
	e.preventDefault();
	e.stopPropagation();
});

$( document ).keyup( function ( e ) {
	if ( e.keyCode == 27 ) {
		$.modal.close();
	}
});


})( jQuery );