interactive_popover.js

//Start modal popover js

function popOver(name,abbreviation,link_id,content) {
  this.name = name;
  this.abbreviation = abbreviation;
  this.link_id = link_id;
  this.content = content;
}

popOver.prototype.initiate = function(){
  eval(this.name + "= $('#" + this.link_id + "').popover({placement: 'bottom', content: this.content, html: true, trigger:'click'});");
}

popOver.prototype.setEventHandlers = function(handlers_array){
  popover = this
  for (var i = 0; i < handlers_array.length; i++) {
    switch(handlers_array[i]){
      case 'shown':
          eval(popover.name).on('shown',function(){
          $(this).data('visibility', 'back');
          $(this).data('popover_hover', false);
          if ( this.id  == 'street_view' )
            abbreviation = 'SV'
          else if ( this.id  == '3D' )
            abbreviation = '3D'                    
          eval("show" + abbreviation + "Data")();
          fade_out_popover(this);
        });
      break;
      case 'hide':
        eval(popover.name).on('hide', function(){
          clearTimeout(fade_out_timeout); fade_out_timeout=false;
          $(this).next('.popover').stop(true,false)
          $(this).next('.popover').css('display','none');
          full_opacity(this);
        })
      break;
      case 'hover':
        eval(popover.name).next('div.popover').hover(
          function(){
            if ( !($(this).siblings('a').data('visibility') == "gone") ) {  
              $(this).siblings('a').data('popover_hover', true)
              $(this).stop(true,false);
              fade_in_popover($(this).siblings('a')[0]);
            }
          },
          function(){
            $(this).siblings('a').data('popover_hover', false)
            fade_out_popover($(this).siblings('a')[0]);
          }
        );
      break;
    }
  }         
}


street_view  = new popOver('SV_popover','SV','street_view','Azimuth Filter <input type="checkbox" id="azimuth_filter" name="azimuth_filter" value="azimuth_filter" onclick=\'$("#anglebox").attr("disabled", !this.checked);$("#fovbox").attr("disabled", !this.checked);\'/><div style = "margin: 2px 0px -5px 0px;"><input type="text" name="anglebox" id="anglebox" style="width:35px" value="" placeholder="angle" disabled="disabled"/><input type="text" style="width:35px;margin-left:2px;" name="fovbox" id="fovbox" value="" placeholder="FOV" disabled="disabled"/></div>');
street_view.initiate();
street_view.setEventHandlers(['shown','hide']);

threeD = new popOver('threeD_popover','3D','3D','Meta Data <input type="checkbox" id="meta_data" name="meta_data"/><br/>Model Images <input type="checkbox" id="model_images" name="model_images"/>');
threeD.initiate();
threeD.setEventHandlers(['shown','hide']);

$('#3D, #street_view').hover(
  function(){
    console.log('before stop in button hover:' + $(this).next('.popover').queue())
    $(this).next('.popover').stop(true,false);
    console.log('after stop in button hover:' + $(this).next('.popover').queue())               
    fade_in_popover(this);
    fade_out_popover(this,3000);
  },
  function() {
  }         
)

function fade_out_popover(link, timeout) {
  timeout = typeof timeout !== 'undefined' ? timeout : 1000;
  fade_out_timeout = setTimeout(
    function() {
      if ( (typeof $(link).data('popover_hover') != "undefined" && $(link).data('popover_hover') == false) ||  typeof $(link).data('popover_hover') == "undefined") {
        $(link).next('.popover').animate({opacity: 0}, 2000, 'linear', function(){
        $(link).data('visibility', 'gone');
        $(link).next('.popover').css('display','none').css('opacity',1);
        console.log('opacity after fade out:' + $(link).next('.popover').css('opacity'));
        }) 
      }
    }, timeout);
}

function fade_in_popover(link) {
  $(link).next('.popover').css('display','block');
  $(link).next('.popover').animate({opacity: 1}, 20, 'linear', function(){
  $(link).data('visibility', 'back');
  });
}  

function full_opacity(link){
  $(link).next('.popover').css('opacity', 1).css('filter','alpha(opacity=100)');
}

//For the SV link only

function showSVData(){
  if (typeof $('#street_view').data('angle') != "undefined") {
    $('#azimuth_filter').trigger('click');
    $('#anglebox').attr('value', $('#street_view').data('angle'));
    $('#fovbox').attr('value', $('#street_view').data('fov'));
  }
  $('#anglebox, #fovbox').focusout(function() {
    storeAzimuthData();
  })
  $('#azimuth_filter').click(function() {
    storeAzimuthData();
  })
  street_view.setEventHandlers(['hover']);
}

function storeAzimuthData(){
  if ($('#azimuth_filter:checked').length > 0) {
    $('#street_view').data('angle', $('#anglebox').val());
    $('#street_view').data('fov', $('#fovbox').val());
  }
  else {
    $('#street_view').removeData('angle');
    $('#street_view').removeData('fov');
  }
}

//For the 3D link only
          

function show3DData(){
  if ( typeof $('#3D').data('meta_data') != "undefined" && $('#3D').data('meta_data') ) {
    $('#meta_data').prop('checked', true);
  }
  if ( typeof $('#3D').data('model_images') != "undefined" &&  $('#3D').data('model_images') ) {
    $('#model_images').prop('checked', true);
  }
  $('#meta_data, #model_images').click(function() {
    store3DData();
  })
  threeD.setEventHandlers(['hover']);
}

function store3DData(){
  if ($('#meta_data:checked').length > 0) {
    $('#3D').data('meta_data', true);
  }
  else {
    $('#3D').data('meta_data', false);
  }
  if ($('#model_images:checked').length > 0) {
    $('#3D').data('model_images', true);
  }
  else {
    $('#3D').data('model_images', false);
  }
}

//End modal pop-over js