$(document).ready(function() {
    $("#anim1").css({'background-position': '0px -'+460+'px'});
    $("#mp1").addClass('on');
    $("#map1 area").hover(
      function() {
          var index = $("#map1 area").index(this) + 1;
          $("#anim1").css({'background-position': '0px -'+index*460+'px'});
          switchParts(1,index);
      },
      function() {
          
      }
    );
    $("#map2 area").hover(
      function() {
          var index = $("#map2 area").index(this) + 1;
          $("#anim2").css({'background-position': '0px -'+index*460+'px'});
          switchParts(2,index);
      },
      function() {
      }
    );
    $("#map3 area").hover(
      function() {
          var index = $("#map3 area").index(this) + 1;
          $("#anim3").css({'background-position': '0px -'+index*460+'px'});
          switchParts(3,index);
      },
      function() {
            
      }
    );
    $("#tabsSide ul li").click(
      function() {
          var index = $("#tabsSide ul li").index(this) + 1;
          $("#tabsSide ul li").removeClass('on');
          $("#tab"+index).addClass('on');
          $("#animalDetails div").removeClass('on');
          $("#anim"+index).addClass('on');
          $("#anim"+index).css({'background-position': '0px -'+460+'px'});
          $(".legend").css({'display': 'none'});
          $("#L"+index+"1").css({'display': 'block'});
      }
    );
    $("#map a").hover(
      function() {
          var index = $("#map a").index(this) + 1;
          
          switchPoints(index);
      },
      function() {
          //$("#anim3").css({'background-position': '0 0'});
      }
    );
});
function switchParts(id,idp) {
    $(".legend").css({'display': 'none'});
    var ida = id+""+idp;
    $("#L"+ida).css({'display': 'block'});
    $("#anim"+id).css({'background-position': '0px -'+idp*460+'px'});
}
function switchPoints(id) {
    $("#map a").removeClass('on');
    $(".pt").css({'display': 'none'});
    $("#cp"+id).css({'display': 'block'});
    $("#mp"+id).addClass('on');
}