function initDirectory() {
  $("#control").data('loc', 'all');
  $("#control").data('department', 'all');
  var loc = $("#control").data('loc');
  var department = $("#control").data('department');
  
  // console.log("loc is " + loc + " | department is " + department);
}

function showPersons() {  
  var loc = $("#control").data('loc');
  // loc = loc.replace(/#/, "");
  
  var department = $("#control").data('department');
  // deparment = deparment.replace(/#/, "");
  
  // console.log("loc is " + loc + " | department is " + department);
    
  if (loc == 'all' && department == 'all') {
    $(".person").slideDown();
  }
  else if (loc != 'all' && department == 'all') {
    $(".person").hide();
    // $(".person").slideUp();
    $("."+loc).slideDown();
  }
  else if (loc == 'all' && department != 'all') {
    $(".person").hide();
    $("."+department).slideDown();
  }
  else if (loc != 'all' && department != 'all') {
    $(".person").hide();
    $("."+loc+"."+department).slideDown();
  }
}

$(document).ready(function() {
  initDirectory();
  $("#loc a").click(function() {
    $("#control").data('loc', ($(this).attr('href')).replace(/#/, ''));
    $("#loc a").removeClass('active');
    $(this).addClass('active');
    showPersons();
    return false;
  });
  $("#department a").click(function() {
    $("#control").data('department', ($(this).attr('href')).replace(/#/, ''));
    $("#department a").removeClass('active');
    $(this).addClass('active');
    showPersons();
    return false;
  });
});