$(document).ready(function(){
  $('#owl-head').hover(function(){
  
    $(this).qtip({
      content: 'Add To Firefox',
      position: {
        corner: {
          tooltip: 'topMiddle',
          target: 'bottomMiddle'
        }
      },
      show: {
        when: false,
        ready: true
      },
      hide: false,
      style: {
        border: {
          width: 2,
          radius: 5
        },
        padding: 5,
        textAlign: 'center',
        tip: true,
        name: 'dark',
        width: {
          min: '200'
        }
      }
    });
    
  },
  function(){
  
    if($(this).data("qtip")) $(this).qtip("destroy");
    
  }).click(function(){
  
    if($(this).data("qtip")) $(this).qtip("destroy");
    if($('body').data("qtip")) $('body').qtip("destroy");
    
    $('body').qtip({
      content: 'Allow mOwl to install ... thx!',
      position: {
        corner: {
          tooltip: 'topRight',
          target: 'topRight'
        },
        adjust: {
          x : ($(document).height() > $('#wrap').height() ? -70 : ($(this).scrollbarWidth() - 70))
        }
      },
      show: {
        when: false,
        ready: true
      },
      hide: {
        delay: 1500
      },
      style: {
        border: {
          width: 2,
          radius: 5
        },
        padding: 5,
        textAlign: 'center',
        tip: true,
        name: 'dark',
        width: {
          min: '300'
        }
      }
      
    });
  });
});

jQuery.fn.scrollbarWidth = function() {
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
    // Append our div, do our calculation and then remove it
    $('body').append(div);
    var w1 = $('div', div).innerWidth();
    div.css('overflow-y', 'scroll');
    var w2 = $('div', div).innerWidth();
    $(div).remove();
    return (w1 - w2);
}