
$(function() {
    $.extend(Base, {
        PopupNearby: {

        //options
//        {
//        idElementToDisplayPopup: "idElement",
//        title: "titulo",
//        message: "mesage",
//        buttons = {
//                accept: {
//                      label: "Aceptar",
//                      callback: function(){
//                      }
//                },
//                cancel: {
//                      label: "Cancelar",
//                      callback: function(){
//                      }
//                },
//            }
//        }
         Start: function (options) {

         //elementToDisplayPopup (elemento sobre el cual se motrara el pupu)
         //ejemplo de como capturarlo:
         //var elementToDisplayPopup = document.getElementById('element');

           var  containerPopupNearby = document.getElementById('container-popup-nearby');
           var elementToDisplayPopup  = document.getElementById(options.idElementToDisplayPopup);

            let html = "";
            html += " <div class='overlay-n' id='overlay-n'> " +
                                               " <div class='popup-n' id='popup-n'> " +
                                                   " <h3>"+ options.title +"</h3> " +
                                                   " <h4>"+ options.message +"</h4> " +
                                                   " <button type='button' class='btn-primary' id='btn-primary-n'>"+options.buttons.accept.label+"</button> "+
                                                   " <button type='button' class='btn-secondary' id='btn-secondary-n'>"+options.buttons.cancel.label+"</button> "+
                                               " </div> " +
                               			" </div> ";

                               			console.log(html);

                        while(containerPopupNearby.hasChildNodes()){
                           containerPopupNearby.removeChild(containerPopupNearby.firstChild)
                        }

                       	containerPopupNearby.insertAdjacentHTML('beforeend',html);

                     var overlay = document.getElementById('overlay-n'),
                         popup = document.getElementById('popup-n'),
                         btnAceptarPopup = document.getElementById('btn-primary-n');
                         btnCancelarPopup = document.getElementById('btn-secondary-n');

                         //Mostrar popup
                       	overlay.classList.add('active');
                       	popup.style.position = "fixed";
                       	// Asignando las coordenadas, no olvides "px"!
                       	let coordsPopup = popup.getBoundingClientRect();
                       	console.log(coordsPopup);
                       	let coords = elementToDisplayPopup.getBoundingClientRect();


                       	popup.style.left = coords.left + "px";
                       	popup.style.top = coords.top - coords.height/2 - coordsPopup.height + "px";


                       	//popup.innerHTML = html;
                       	popup.classList.add('active');



                       btnAceptarPopup.addEventListener('click', function(e){

                        if(options.buttons.accept.callback != undefined && options.buttons.accept.callback != null && $.isFunction(options.buttons.accept.callback)) {
                       	e.preventDefault();
                        overlay.classList.remove('active');
                        popup.classList.remove('active');

                         console.log("entro en accion de aceptar")
                          console.log(options.buttons.accept.callback)
                         options.buttons.accept.callback();

                         }

                       })



                       btnCancelarPopup.addEventListener('click', function(e){

                        if(options.buttons.cancel.callback != undefined && options.buttons.cancel.callback != null && $.isFunction(options.buttons.cancel.callback)) {

                       	e.preventDefault();
                        overlay.classList.remove('active');
                        popup.classList.remove('active');

                        console.log("entro en accion de cancelar")
                         console.log(options.buttons.cancel.callback)
                         options.buttons.cancel.callback();
                         }

                       })

                    },

            _qxLoading: function (box) {

                return {

                    ver: function () {

                        console.log("Base.Loading 1.0");
                        console.log("Requiere: Base 1.0");
                    }
                }
            }
        }
    });

    $.fn.QxLoading = function () {

        var loading = this;

        return Base.Box._qxLoading(loading);
    }
    
}); 