Source: cercalia.popup.js

/**
 * @classdesc
 * 
 * 
 * Let you create a window related to marker, where to paint information in HTML format. <br/>
 * Based on <a href="http://openlayers.org/en/v3.0.0/apidoc/ol.Overlay.html">ol.Overlay</a> class
 * 
 * @constructor
 * @param {cercaliax.PopupOptions} options
 */
cercalia.Popup = function(options) {
	
	/**
	 * Property ID (random)
	 * @private
	 */
	this.id_ = 'CercaliaPopup_id_' + new Date().getTime() + Math.round((Math.random()*1000));
	
	/**
	 * Marker
	 * @private
	 * @type {cercalia.Marker}
	 */
	this.marker_ = null;

	/**
	 * Property HTML popup content
	 * @private
	 * @type {string}
	 */
	this.title_ = options.title ? options.title : null;
	
	/**
	 * Property HTML popup content
	 * @private
	 * @type {string}
	 */
	this.content_ = options.content ? options.content : null;
	
	/**
	 * Property visible. Popup visible or not
	 * @private
	 * @type {boolean}
	 */
	this.visible_ = options.visible ? options.visible : false;
	
	/**
	 * Property zIndex. zIndex
	 * @private
	 * @type {string|number}
	 */
	this.zIndex_ = options.zIndex ? options.zIndex : 5;
	
	/**
	 * Property maximum Popup widht
	 * @private
	 * @type {string}
	 */
	this.maxWidth_ = options.maxWidth ? options.maxWidth +'px' : '400px';

	/**
	 * @private
	 * @type {string}
	 */
	this.positioning_ = options.positioning ? options.positioning : null;
	
	/**
	 * @private
	 * @type {Array.<number>}
	 */
	this.offset_ = options.offset ? options.offset : null;	
	
	
	var visible = this.visible_?'block':'none';
	
	/**
	 * @private
	 * @type {boolean}
	 */
	this.customPopup_ = options.customPopup ? options.customPopup : false; 

	var jqElement = null;
	
	if(!this.customPopup_){
		jqElement = cercalia.jQuery( 
			 '<div id="'+this.id_+'" class="ui-widget ui-widget cercalia-popup" style="display:'+visible+';max-width:'+this.maxWidth_+'">'
			 	+ '<div class="ui-widget-header ui-corner-all cercalia-popup-title">'+ this.title_ +'</div>'
			 	+ '<div class="cercalia-popup-closer"></div>'
			 	+ '<div class="ui-widget-content cercalia-popup-content">' + this.content_ + '</div>'
			+'</div>'
		);
	} else {
		//Custom
		jqElement = cercalia.jQuery(
			'<div id="'+this.id_+'" class="ui-widget ui-widget cercalia-custom-popup" style="display:'+visible+';max-width:'+this.maxWidth_+'">'
//				+ '<a href="#" class="cercalia-popup-closer"></a>'
				+ '<div class="ui-widget-content cercalia-custom-content">' + this.content_ + '</div>'
			+'</div>'
		);
		
		this.setPositioning_(this.positioning_, this.offset_, jqElement);
	}

	var self = this;
	
	this.popup_ = new ol.Overlay({
		element: cercalia.jQuery(jqElement).get()
	});
	
	if ( options.closeOnClick ) {
		jqElement.click(function(){
			self.hide();
		});
	}
	
	jqElement.find('.cercalia-popup-closer').click(function(){
		self.hide();
	});
	
	// Add z-index
    cercalia.jQuery(this.popup_.getElement()).parent().css("z-index", this.zIndex_ ? this.zIndex_ : "1200");

	/**
	 * Nombre de la classe
	 * @private
	 * @type {string}
	 */
	this.CLASS_NAME_ = "cercalia.Popup";
};



/**
 * @private
 * @param {string} positioning
 * @param {Array.<number>} offset
 * @param {Object|undefined} jqElement 
 */
cercalia.Popup.prototype.setPositioning_ = function(positioning, offset, jqElement) {
	
	var initialOffsetBottomY = 30;
	var initialOffsetTopY = 2;
	
	var offsetX = offset && offset[0] ? offset[0]: 0;
	var offsetY = offset && offset[1] ? offset[1]: 0;
	
	if( !jqElement ){
		jqElement = cercalia.jQuery ( this.getOverlay().getElement() );
	}
	
	if(!positioning){
		positioning = 'bottom-left';
	}
	
	switch(positioning){
		case 'bottom-left':
			jqElement.css({
				left : offsetX,
				bottom: offsetY + initialOffsetBottomY,
				right : null,
				top	: null
			});
			break;
		case 'bottom-center':		
			jqElement.css({
				left : -cercalia.jQuery(jqElement.children()[0].children[0]).width()/2 + offsetX,
				bottom: offsetY + initialOffsetBottomY,
				right : null,
				top	: null
			});
			break;
		case 'bottom-right':
			jqElement.css({
				left : null,
				bottom : offsetY + initialOffsetBottomY,
				right: offsetX,
				top : null
			});
			break;
		case 'top-left':
			jqElement.css({
				left : offsetX,
				bottom : null,
				right: null,
				top: offsetY + initialOffsetTopY
			});
			break;
		case 'top-center':
			jqElement.css({
				left : -cercalia.jQuery(jqElement.children()[0].children[0]).width()/2 + offsetX,
				bottom : null,
				right : null,
				top : offsetY + initialOffsetTopY
			});
			break;
		case 'top-right':
			jqElement.css({
				left : null,
				bottom : null,
				right : offsetX,
				top : offsetY + initialOffsetTopY
			});
			break;
	}
	
};

/**
 * @return {ol.Overlay} The popup object <a href="http://openlayers.org/en/v3.0.0/apidoc/ol.Overlay.html">ol.Overlay</a>
 */
cercalia.Popup.prototype.getOverlay = function(){
	return this.popup_;
};

/**
 * Sets the popup position
 * @param {cercalia.LonLat} lonLat
 * @param {string} projectionCode
 */
cercalia.Popup.prototype.setPosition = function(lonLat, projectionCode){
	this.popup_.setPosition(ol.proj.transform([lonLat.getLon(), lonLat.getLat()], 'EPSG:4326', projectionCode?projectionCode:'EPSG:3857'));
};

/**
 * @return {number} Popup Position
 */
cercalia.Popup.prototype.getPosition = function(){
	this.popup_.getPosition();
};

/**
 * Sets the popup position
 * @param {Array.<number>} offset Couple of values ​​for the offset.
 */
cercalia.Popup.prototype.setOffset = function(offset) {
	this.popup_.setOffset(offset);
};

/**
 * @return {Array.<number>} Popup Offset
 */
cercalia.Popup.prototype.getOffset = function() {
	return this.popup_.getOffset();
};


/**
 * @return {cercalia.Marker} marker Obtain the marker related to this Popup, null if there's none assigned
 */
cercalia.Popup.prototype.getMarker = function(){
	return this.marker_;
};

/**
 * @param {cercalia.Marker} marker Marker.
 */
cercalia.Popup.prototype.setMarker = function(marker) {
  this.marker_ = marker;
};

/**
 * @return {boolean} visible Returns if it's visible 
 */

cercalia.Popup.prototype.isOpen = function(){
	return this.visible_;
};

/**
 * Open the popup 
 * @param {boolean} fade Indicates whether to apply 'fadeIn' animation effect
 */
cercalia.Popup.prototype.show = function(fade){
	this.visible_ = true;
	//document.getElementById(this.id_).style.display = 'block';
	if(fade){
		cercalia.jQuery('#'+this.id_).fadeIn();
	} else {
		cercalia.jQuery('#'+this.id_).show();
	}
};

/**
 * Hide the popup
 * @param {boolean} fade Indicates whether to apply the 'fadeOut' animation effect
 */
cercalia.Popup.prototype.hide = function(fade){
	this.visible_ = false;
	//document.getElementById(this.id_).style.display = 'none';
	if(fade){
		cercalia.jQuery('#'+this.id_).fadeOut();
	} else {
		cercalia.jQuery('#'+this.id_).hide();
	}
};


/**
 * Change the popup zIndex
 * @param {number|String} zIndex ZIndex value (numerical value or 'auto')
 */
cercalia.Popup.prototype.setZIndex = function(zIndex){
	//this.visible_ = true;
	//document.getElementById(this.id_).style.zIndex = zIndex;
	// Add z-index
	this.zIndex_ = zIndex;
    cercalia.jQuery(this.popup_.getElement()).parent().css("z-index", this.zIndex_ ? this.zIndex_ : "1000");
};

/**
 * @return {number|String} ZIndex value
 */
cercalia.Popup.prototype.getZIndex = function(){
	return this.zIndex_;
};


/**
 * Destroy popup and clean the marker reference to this popup
 */
cercalia.Popup.prototype.destroy = function(){
	if(this.marker_){
		this.marker_.addPopup(null);
		this.marker_ = null;
	}
	
	this.title_ = null;
	this.content_ = null;
	this.visible_ = null;
	this.zIndex_ = null;
	this.maxWidth_ = null;
	this.customPopup_ = null;
	
	if(this.popup_.getElement()[0]){
		this.popup_.getElement()[0].parentNode.removeChild(this.popup_.getElement()[0]);
	}
	
	this.popup_ = null;
};


/**
 * Change the popup title using a string with the HTML content
 * @param {string} htmlContent Popup title HTML content
 */
cercalia.Popup.prototype.setTitle = function(htmlContent) {
	document.getElementById(this.id_).getElementsByClassName("cercalia-popup-title")[0].innerHTML = htmlContent; 
};

/**
 * Change the popup body using Cambia a string with the HTML content
 * @param {string|Object} htmlContent Body popup HTML content (string, jQuery Object or DOM element).
 */
cercalia.Popup.prototype.setContent = function(htmlContent) {
	try {
		var classContent = this.customPopup_ ? "cercalia-custom-content" : "cercalia-popup-content";

		if (htmlContent) {
			if(typeof(htmlContent) == "string") {
				document.getElementById(this.id_).getElementsByClassName(classContent)[0].innerHTML = htmlContent;
			} else if(htmlContent.jquery) {
				cercalia.jQuery(document).find("#"+this.id_).find("."+classContent).html(htmlContent);
			} else if(htmlContent instanceof HTMLElement) {
				cercalia.jQuery(document).find("#"+this.id_).find("."+classContent).html(htmlContent);
			} else {
				console.error("Popup setContent: Elemento no soportado.");
			}
		} else {
			cercalia.jQuery(document).find("#"+this.id_).find("."+classContent).empty();
		}

	} catch (e){
		console.error(e);
	}
};

/**
 * @return {string}
 */
cercalia.Popup.prototype.getContent = function() {
	return this.content_;
};

/**
 * @return {string} ClassName. Value : `cercalia.Popup`.
 */
cercalia.Popup.prototype.getClass = function(){
	return this.CLASS_NAME_;
};