class VideoResponser
{
	constructor(selector) {
		const $video = document.querySelector(selector);
		this.options = {
			selector,
			breakpoints: { default: { src: $video.getAttribute('data-src') } }
		};

		// get a list of video switching points and links to the videos themselves
		$video.querySelectorAll('[data-src]').forEach(element => this.options.breakpoints[element.getAttribute('data-mw')] = { src: element.getAttribute('data-src') });
		$video.innerHTML = ''; // we clean up so that there is nothing superfluous

		// run the handler and track the change in screen width
		this.responseVideo(this.options);
		this.resizer();
	}

	/** Function runs on resize  */
	resizer() {
		window.addEventListener("resize", () => this.responseVideo(this.options));
	}

	/**
	 * Change src value of video link to fit screen width
	 *
	 * @param {Object} options object with options
	 */
	responseVideo(options) {
		const {selector, breakpoints} = options; // get options
		let $video = document.querySelector(selector);
		const widthNow = $video.getAttribute('data-width-now') || null;
		let maxBreakpoint = Math.max.apply(Math, Object.keys(breakpoints).filter(key => key <= document.body.clientWidth).map(Number));
		maxBreakpoint = isNaN(maxBreakpoint*1) || maxBreakpoint == Number.POSITIVE_INFINITY || maxBreakpoint == Number.NEGATIVE_INFINITY ? "default" : maxBreakpoint;
		const nowBreakpoint = maxBreakpoint || 'default'; // choose either the maximum value, if not, then the default

		if(widthNow && widthNow == nowBreakpoint) return; // check if the video needs to be changed

		$video.setAttribute('data-width-now', nowBreakpoint);
		$video.src = breakpoints[nowBreakpoint].src;
	}
}

/*
    ClassBlockUI.abrirBlockUIEstandar(contenedorIDAMostrar[, accionCerrar, headerText, extraClass, restaurarElemento]);
    ClassBlockUI.abrirBlockUIEstandarMensaje(mensaje[, isAlertOrButtons, onClose]);
    ClassBlockUI.abrirBlockUIConfirm(mensaje, textoBotonAceptar, accionBotonAceptar, textoBotonCancelar[, accionBotonCancelar]); //accionBotonCancelar="close"
    ClassBlockUI.abrirBlockUIEsperePorFavor:([mensaje]);
*/
var ClassBlockUI =
{
	restaurarElemento: function()
    {
    	var data = $("body").data('blockUIEstandar.history');
        if (data)
        {
            data.el.style.display = data.display;
            data.el.style.position = data.position;
            if (data.parent)
                data.parent.appendChild(data.el);
            $("body").removeData('blockUIEstandar.history');
            $("#"+data.generatedId).remove();
        }
    },
	    abrirBlockUIEstandar: function(contenedorIDAMostrar, accionCerrar, headerText, extraClass, restaurarElemento)
    {   
    	if(restaurarElemento || restaurarElemento == undefined)
        {
    		ClassBlockUI.restaurarElemento();
        }
		$(".modalAutoHide").modal("hide");
        if($(".modal").size()>0){$("body").addClass("modal-open")}
        
        if(contenedorIDAMostrar == undefined || $("#"+contenedorIDAMostrar).size() == 0){return;}
            
		//var blockUIId="blockUI_"+new Date().getTime();
        var blockUIId="blockUI_"+contenedorIDAMostrar;
		
        extraClass = extraClass == undefined ? "" : extraClass; //modal-lg
        
        var object = $("#"+contenedorIDAMostrar);
        var node = object[0];
        var data = {};
        $("body").data('blockUIEstandar.history', data);
        data.el = node;
        data.parent = node.parentNode;
        data.display = node.style.display;
        data.position = node.style.position;
        data.generatedId = blockUIId;
        data.object = object;
        if (data.parent)
            data.parent.removeChild(node);

        var header = headerText != undefined ? headerText : "";
                
        var message = ''+
        '<div class="modal" id="'+blockUIId+'" role="dialog">'+
         <!-- Añadiendo la clase modal-lg, modal-md o modal-sm podemos cambiar el tamaño del modal (modal-xs no existe) -->
        '	<div class="modal-dialog '+extraClass+' animated">'+
	    <!-- Modal content-->
    	'      <div class="modal-content">'+
		'	      <div class="modal-header">' +
        '			<button type="button" class="close btnCerrarModalEquis tooltipStandard" data-custom-dismiss="modal" aria-label="Cerrar" title="Cerrar"><span aria-hidden="true">x</span></button>'+
        '	        <div class="modal-title">'+header+'</div>'+
        '          </div>'+
        '          <div class="modal-body"></div>'+
        '        </div>'+
        '    </div>'+
        '</div>';
        
        $("body").append(message);
        var modal = $("#"+blockUIId);       
        modal.find(".modal-body").append(node);
        $("#"+contenedorIDAMostrar).show();
		modal.find(".modal-dialog").addClass("zoomInDown");
        modal.modal({backdrop: false});
        modal.on('hidden.bs.modal', function () {
           	ClassBlockUI.restaurarElemento();
        })

        if(accionCerrar==undefined) //boton cerrar tiene accion por defecto
        {
            $("#"+blockUIId+" .btnCerrarModalEquis").makeTagLink(function(){
                modal.modal("hide");
                if($(".modal").size()>0){$("body").addClass("modal-open")}
            });
        }
        else if(accionCerrar==false) //oculta el boton cerrar
        {
            $("#"+blockUIId+" .btnCerrarModalEquis").hide();
        }
        else	//boton cerrar con accion especial
        {
            $("#"+blockUIId+" .btnCerrarModalEquis").makeTagLink(accionCerrar);
        }
        
        return modal;
    },
	    abrirBlockUIEstandarMensaje: function(mensaje, isAlertOrButtons, onClose, extraClass)
    {
        $(".modalAutoHide").modal("hide");
        if($(".modal").size()>0){$("body").addClass("modal-open")}

        var blockUIId="blockUI_"+new Date().getTime();
        
  		extraClass = extraClass == null || extraClass == undefined ? "" : extraClass; //modal-lg
        
        if(isAlertOrButtons==undefined) isAlertOrButtons=false;
        if(onClose==undefined) onClose=false;

        var botonera = "";
        var botoneraEspecial = false;
        
        if(isAlertOrButtons === false)
        {
	        botonera = "";
        }
        else if (isAlertOrButtons === true)
        {
			botonera = "<div class='center botoneraBlockUI'><span class='btnStandard btnCerrarBlockUIAlert'>Aceptar</span></div>";
        }
        else
        {
	        botoneraEspecial = true;
	        botonera = "<div class='center botoneraBlockUI'>";
            for(var index in isAlertOrButtons)
            {
		        botonera +=  " <span class='btnStandard "+index+"'>"+isAlertOrButtons[index]["text"]+"</span> ";
            }
            botonera += "</div>";
        }
        
        var message = '';
        message += '<div class="modal '+(isAlertOrButtons==false ? 'modalAutoHide' : '')+'" id="'+blockUIId+'" role="dialog">';
         <!-- Añadiendo la clase modal-lg, modal-md o modal-sm podemos cambiar el tamaño del modal (modal-xs no existe) -->
        message += '	<div class="modal-dialog '+extraClass+' animated">';
	    <!-- Modal content-->
    	message += '      <div class="modal-content">';
        
        if(isAlertOrButtons!=false)
        {
            message += '	      <div class="modal-header">';
            message += '			<button type="button" class="close btnCerrarModalEquis tooltipStandard" data-custom-dismiss="modal" aria-label="Cerrar" title="Cerrar"><span aria-hidden="true">x</span></button>';
			message += '	        <h4 class="modal-title" id="myModalLabel">Aviso</h4>';
	        message += '          </div>';
        }
        
        message += '          <div class="modal-body">'+mensaje+'</div>';
        
        if(botonera != "")
        {
       		message += '          <div class="modal-footer">'+botonera+'</div>';
        }
        
        message += '        </div>';
        message += '    </div>';
        message += '</div>';
        
        $("body").append(message);
        var modal = $("#"+blockUIId);       
		modal.find(".modal-dialog").addClass("zoomInDown");
        modal.modal({backdrop: false});
        modal.on('hidden.bs.modal', function () {
            modal.remove();
        })

		//Acciones de los botones especiales        
        if(botoneraEspecial)
        {
			for(var index in isAlertOrButtons)
            {
            	if(isAlertOrButtons[index]["action"] == "close")
                {
                	isAlertOrButtons[index]["action"] = function(){
                        modal.modal("hide");
                        if($(".modal").size()>0){$("body").addClass("modal-open")}
                    };
                }
                $("#"+blockUIId+" ."+index).unbind("click").makeTagLink(isAlertOrButtons[index]["action"]);   
            }
		}
        
        var fnOnClose;
        if(onClose==false)
        {
            fnOnClose = function(){
            	modal.modal("hide");
                if($(".modal").size()>0){$("body").addClass("modal-open")}
            };
        }
        else if (typeof onClose === "function")
        {
            fnOnClose = function(){onClose()};
        }
        else if (onClose == "location")
        {
            fnOnClose = function(){window.location.reload()};
        }
        else if (onClose == "back")
        {
            fnOnClose = function(){history.go(-1);};
        }
        else
        {
        	
            if(onClose.indexOf("/") !=0 && onClose.indexOf("http") !=0)
            {
            	onClose = "/"+onClose;
            }
            fnOnClose = function(){window.location = onClose};
        }
        
        $("#"+blockUIId+" .btnCerrarBlockUIAlert, #"+blockUIId+" .btnCerrarModalEquis").unbind("click").makeTagLink(fnOnClose);
        
        return modal;
    },
    abrirBlockUIConfirm: function(mensaje, textoAceptar, accionAceptar, textoCancelar, accionCancelar)
    {
    	accionCancelar = accionCancelar == undefined ? "close" : accionCancelar;
        
    	var buttons =
        {
        	"btnAceptarBUI_CONFIRM":
            {
            	"text": textoAceptar,
            	"action": accionAceptar
            },
        	"btnCancelarBUI_CONFIRM":
            {
            	"text": textoCancelar,
            	"action": accionCancelar
            }
        };
		return ClassBlockUI.abrirBlockUIEstandarMensaje(mensaje, buttons, false, "");
    },
    abrirBlockUIEsperePorFavor: function(mensaje)
    {
    	if(mensaje == undefined){ mensaje = "<div class='text-center'><img src='img/loading.gif' alt='Loading ...' title='Loading ...' width='30' height='30' /> <span class='esperePorFavor'>Espere por favor...</span></div>"; };
   		return ClassBlockUI.abrirBlockUIEstandarMensaje(mensaje, undefined, false, "modalStandard");
    }
};