$.fn.inView = function(){
    if(!this.length) return false;
    var rect = this.get(0).getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );

};

function getSelected() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.getSelection) {
        return document.getSelection().toString();
    } else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text.toString();
        }
        return "";
    }
    return "";
}



/** Adds a new operation, "reposition", to Bootstrap's popover that
   *  re-positions the tooltip/popover if it is currently visible. This is used to handle
   *  changes to the DOM and window resizing.
   */
 /* jQuery.fn.popover.Constructor.prototype.reposition = function () {
    if (this.enabled && this.tip().hasClass("in")) {
      this.show();
    }
  }*/

var popover_i18n = {};
function popoverInit(options) {
	popover_i18n = options.i18n || {};
}

function popover(id, title, body, mode) {
			if( mode == null) {
				mode="edit"
			} else if ( mode =="view"){
				id= "view_" + id;
			}
			var element = $("#"+id);
			if(element){
			  showPopover(id, title, body, mode);
			}
            // we can support multiple element with same ids appended by a number starting from 1
            for (let i = 1; i < 10; i++) {
              element = $("#"+id+i);
              if(element){
                showPopover(id+i, title, body, mode);
              }
            }
		};

function showPopover(id, title, body, mode){
   if(id){
   				    var element = $("#"+id),
   					panelContainer = element.closest( ".panel" ).find('.panel-heading'),
   					placement = "right";

   				if ( mode =="view"){
   					//element.css("width","300px");
   					element.parent().parent().addClass("qcError");
   					placement = "top";
   				}
   				if ( mode =="recap"){
   					element.addClass("qcError");
   					placement = "top";
   				}


   				if(element.hasClass( "popover_top" )) {
   					placement = "top";
   				} else if (element.hasClass( "popover_bottom" )){
   					placement = "bottom";
   				} else if (element.hasClass( "popover_left" )){
   					placement = "left";
   				} else if (element.hasClass( "popover_right" )){
   					placement = "right";
   				}

   				if(element.data("bs.popover")){

   					var t = element.data('bs.popover').options.title;
   					if(popover_i18n && t.indexOf(popover_i18n.twoOrMoreErrorMsg) == -1){
   						element.data('bs.popover').options.title = popover_i18n.twoOrMoreErrorMsg;
   						element.attr('data-title',popover_i18n.twoOrMoreErrorMsg);
   						element.attr('data-content', '<b>'+ t+'</b><br/>' + element.data('bs.popover').options.content + '<br/><br/><b>'+ title +'</b><br/>' + body);
   					}else{
   						var c =element.attr('data-content');
   						if ( c == undefined){
   							element.attr('data-content', title +'</b><br/>' + body);
   						}else{
   							element.attr('data-content', c + '<br/><br/><b>'+ title +'</b><br/>' + body);
   						}
   					}

   					element.data('bs.popover').options.placement = placement;
   					if( element.inView() ) {

   						repositionPopoverOnElement(element);


   					};
   				} else {

   					var options = { title: title,
   			                animation: body,
   			                placement: 'auto '+placement,
   			                trigger: "manual",
   			                delay: 500,
   			                content: body,
   			                container: 'body',
   			                html: 'true',
   			                close: true,
   							template: '<div class="popover quality-check"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
   			            };

   					element.addClass( "qc_invalid" );
   					element.popover(options);


   					showPopoverOnElement(element);





   					var timeoutId;


   					$(window).on('resize',function(){
   					  if(timeoutId ){
   							 clearTimeout(timeoutId );
   					  }
   					  timeoutId = setTimeout(function(){
   					   showPopoverOnElement(element);
   					  }, 200);

   					});

   					$(window).on('scroll',function(){
   					  if(timeoutId ){
   							 clearTimeout(timeoutId );
   					  }
   					  timeoutId = setTimeout(function(){
   					   showPopoverOnElement(element);
   					  }, 200);

   					});




   					new ResizeSensor(document.body, function() {

   							if( element.data('bs.popover') ) {
   								var popover = element.data('bs.popover').tip();

   								if( element.inView() && !popover.hasClass('popover-closed') && !panelContainer.find( 'span.clickable').hasClass('panel-collapsed')) {
   										element.popover('show');
   										if (element.is('input') || !element.is('input') && !element.is(':empty')){
   											addPopoverCloseBtn(element.data('bs.popover').tip(), element);
   										}
   									} else if (element.data('bs.popover') ) {
   										element.popover('hide');
   									}

   								offset(popover, element);


   							}

   						});

   					if (element.is('input') ){
   						element.focus(function (event) {
   							var popover = element.data('bs.popover').tip();
   							if(!popover.hasClass('in')) {
   								element.popover('show');
   								popover.removeClass('popover-closed');
   								addPopoverCloseBtn(popover, element);
   								offset(popover, element);
   							}
   						});
   					} else if(!element.is('input') && !element.is(':empty')) {
   						element.click(function (event) { //$( "div, span, p.myClass" )
   						var popover = element.data('bs.popover').tip();
   							if(!popover.hasClass('in')) {
   								element.popover('show');
   								popover.removeClass('popover-closed');
   								addPopoverCloseBtn(popover, element);
   								offset(popover, element);
   							}
   						});
   					}







   				}
   			}
}
		
		
		
		
		function offset(popover, element ){
			if ( popover && popover.data ){
				if ( element.css('display') != 'block' ) return;
				
				var left = parseInt(popover.css('left'),10) 
				//var top = parseInt(popover.css('top'),10);
				
				if  ( left  ){//&& top
					var clazz = element.attr('class');
					var classes = clazz.split(" ");
					for ( i = 0 ; i < classes.length; i ++){
						if ( classes[i].indexOf("popover-offset-left") == 0 ){
							
							var classOffset = parseInt(classes[i].substring("popover-offset-left".length + 1 ));

							popover.css('left', (left + classOffset * left/100)  + 'px');							
						}
						
					}
					
					
				}
				
			}
			
		}
		
		
		
		
		//var i = 0;
	/*	function offset(popover, element ){
			var j = i++;
			if ( popover && popover.data ){
				var positioning;
				if ( popover.data('positioning') == undefined ){
					if ( element.css('display') != 'block' ) return;
					var left = parseInt(popover.css('left'),10) 
					var top = parseInt(popover.css('top'),10);
					if  ( left && top ){
							var positioning = { index: j,  left: left , inittop : top, top : top, arrow: undefined};
							console.log( positioning.index + " get: " + parseInt(popover.css('top'),10) );
							var clazz = element.attr('class');
							if ( clazz ){
								var classes = clazz.split(" ");
								var offset_left,offset_top,arrow;
								for ( i = 0 ; i < classes.length; i ++){
									if ( classes[i].indexOf("popover-offset-left") == 0 ){
										var classOffset = parseInt(classes[i].substring("popover-offset-left".length + 1 ));
										
										positioning.left = positioning.left + classOffset * positioning.left/100;								
									}else if ( classes[i].indexOf("popover-offset-top") == 0 ){
										positioning.top = (positioning.top + parseInt(classes[i].substring("popover-offset-top".length + 1 )));								
									}else if ( classes[i].indexOf("popover-offset-arrow") == 0 ){
										positioning.arrow = parseInt(classes[i].substring("popover-offset-arrow".length + 1 ));
									}
								}
							}
							popover.data('positioning',positioning);
					}
				}
				
				//top and arrow options are not stable
				if ( popover.data('positioning')){
					positioning = popover.data('positioning');
					if ( positioning.left ){
						popover.css('left', positioning.left  + 'px');
					}
					if ( positioning.top ){
	//					popover.css('top', positioning.top  + 'px');
					}
					if ( positioning.arrow ){
	//					popover.find('.arrow').css('top', popover.data('positioning').arrow + "%");
					}
				}
				
			}
		} */
		
		
	
		
		function showPopoverOnElement(element) {
					var panelContainer = element.closest( ".panel" ).find('.panel-heading');
					
					var popover ;
					if( element.inView() ) {
						
						if(element.data('bs.popover')){
							popover = element.data('bs.popover').tip();
							
							if( !popover.hasClass('in') && !popover.hasClass('popover-closed')&& !panelContainer.find( 'span.clickable').hasClass('panel-collapsed') ) {
								element.popover('show');
	//							popover.find('.popover-content').toggle();
								if (element.is('input') || !element.is('input') && !element.is(':empty')){
									addPopoverCloseBtn(popover, element);
								}
						
								
								offset(popover, element);
							} 
							
							
						} else {
							element.popover('show');
							popover = element.data('bs.popover').tip();
							 
							 
							if (element.is('input') || !element.is('input') && !element.is(':empty')){
								addPopoverCloseBtn(popover, element);
							}
							

						}
						
						var top = parseInt(popover.css('top'),10);
						
						if(top<0) {
							repositionPopoverOnElement(element);
						}
						
						if(!popover.hasClass( 'popover-draggable' )){
							popover.addClass('popover-draggable');
							popover.draggable({
								handle : ".popover-title",
								stop: function(event, ui) {
									// event.toElement is the element that was responsible
									// for triggering this event. The handle, in case of a draggable.
									$( event.originalEvent.target ).one('click', function(e){ e.stopImmediatePropagation(); } );
								}
							});
							
							//this will bring the popover in the front
							popover.on('click', function () {
								//we reposition the popover if only there is no text selection
								var sel = getSelected().toString();
								if (sel === "") {
									repositionPopoverOnElement(element);
								}
								
							});
							
							
						}
						
					}
					
					
					
					
//					if ( popover && popover.data('offset') != true ){
//						var offset = element.attr('popover-offset');
//						if ( offset ){
//							var left = parseInt(popover.css('left'),10);
//							if  ( left ){
//								popover.css('left',(left + offset) + 'px')
//							}
//						}
//						popover.data('offset',true);
//					}
		};
		
		
		function repositionPopoverOnElement(element){
			if( element.inView() && element.data('bs.popover') ) {
				var popover = element.data('bs.popover').tip();
						
				if(popover.hasClass('in')){
					//set height auto to fix a bug in restricted when dragging the popover the height was remaining unchanged, just the text was collapsing
					popover.css('height', 'auto');
					
					var top = parseInt(popover.css('top'),10);
						
					if(top<0) {
						popover.css('top', '50px');
					}
					
					element.popover('show');
					if (element.is('input') || !element.is('input') && !element.is(':empty')){
						addPopoverCloseBtn(popover, element);
						if(popover.hasClass('popover-collapsed')){
							popover.find('#maximize').show();
							popover.find('#minimize').hide();
						} 
						
					}
					offset(popover, element);
					
				}		
						
			}
			 
		}
		
		
		
		function addPopoverCloseBtn(popoverElement, element) {
		
					var isHidden =popoverElement.find('.popover-content').css('display') == 'none';
					
					
			
					var	popoverId = popoverElement.attr('id'),
						elementId = element.attr('id'),
						btn = $("<button></button>", {
								"class": "close",
								"id": "close",
								"onclick": "$('#"+popoverId+"').addClass('popover-closed'); $('#"+popoverId+"').popover('hide'); "}),
						btnMin = $("<button></button>", {
							"class": "close",
							"id": "minimize",
							"onclick": "if(!$('#"+elementId+"').inView()){return false;} $('#"+popoverId+"').find('.popover-content').toggle();$('#"+popoverId+"').addClass('popover-collapsed');$('#"+popoverId+"').find('#maximize').toggle();$(this).toggle(); repositionPopoverOnElement($('#"+elementId+"'));"}),//.slideUp()
						btnMax = $("<button></button>", {
							"class": "close",
							"style" :"display:none",
							"id": "maximize",
							"onclick": "if(!$('#"+elementId+"').inView()){return false;} $('#"+popoverId+"').find('.popover-content').toggle();$('#"+popoverId+"').removeClass('popover-collapsed');$('#"+popoverId+"').find('#minimize').toggle();$(this).toggle(); repositionPopoverOnElement($('#"+elementId+"'));"}),//.slideDown()
								
					title = popoverElement.find('.popover-title');
					title.append("&nbsp;")	
					title.append("&nbsp;")	
					
					btn.html("&times;");
					btn.appendTo(title);
					
					btnMin.html("&#x21F1;");
					btnMin.appendTo(title);

					btnMax.html("&#x21F2;");
					btnMax.appendTo(title);
					 


};