figureslibres.cc/user/themes/figureslibres/js/site.js

function click_link() {

  $link = $('#text_figli p > a');

  $link.click(function(e) {
    e.preventDefault();

    var $this = $(this);
        $href = $this.attr("href");
        url = $href.split("/");
        page = url[1];
        cat = url[2];
        project_name = url[3];

    if ($this.hasClass('open')) {
      $this.removeClass('open');
      $('#item_list.'+ cat).remove();
    }  else {

      $.ajax({
        url :  '/' + page + '/' + cat, // La ressource ciblée
        type : 'GET', // Le type de la requête HTTP
        dataType:'html',
        success: function(data) {
          $(data).find('#item_list').addClass(cat).insertAfter($this);
          $this.addClass('open');
        },
        complete: function(data) {
          console.log('cat', cat);
            // animate();
            click_img(e, $this, $href, url, page, cat, project_name);
        }
      });
    }
  });
};

function click_list() {
  var $link = $('.list-projets li > a');

  $link.click(function(e) {
    e.preventDefault();
    var $this = $(this);
        $href = $this.attr("href");
        url = $href.split("/");
        page = url[1];
        cat = url[2];
        project_name = url[3];

    var $link_txt =  $('#text_figli a#'+cat);
    var $link_item = $('#item_list.'+cat);
    var $link_card = $('.card > #'+project_name + ' a');

    if ($link_txt.hasClass('open') && $link_card.parent().hasClass('open') ) {

      anchor($href);

    }else if ($link_txt.hasClass('open')) {
      anchor($href);
      $.ajax({
        url :  '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
        type : 'GET', // Le type de la requête HTTP
        dataType:'html',
        success: function(data) {
          $('#item_list.'+cat+' .card-image.open #item').remove();
          $('#item_list.'+cat+' .card-image').removeClass('open');
          $(data).find('#item').addClass(cat).insertAfter($link_card);
          $link_card.parent().addClass('open');

        },
        complete: function(data) {
          // animate();
          marg_item(project_name);
        },
      });

    } else {

      $.ajax({
        url :  '/' + page + '/' + cat, // La ressource ciblée
        type : 'GET', // Le type de la requête HTTP
        dataType:'html',
        success: function(data) {
          $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
          $link_txt.addClass('open');

          anchor($href);

          $('.card a').click(function (e) {
            e.preventDefault()
          })

          click_img(e, $this, $href, url, page, cat, project_name)
        },
        complete: function(data) {
          console.log('cat', cat);

              var $link_card = $('.card > #'+project_name + ' a');

              setTimeout( function(){
                console.log('project_name', project_name);
                console.log('$link_card', $link_card);

                if ($link_card.hasClass('open')) {
                }else {
                  anchor($href);
                  $.ajax({
                    url :  '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
                    type : 'GET', // Le type de la requête HTTP
                    dataType:'html',
                    success: function(data) {
                      $(data).find('#item').addClass(cat).insertAfter($link_card);
                      $link_card.parent().addClass('open');
                    },
                    complete: function(data) {
                      // animate();
                      marg_item(project_name);
                    },
                  });
              }
            }, 900);
        }
      });
    }
  });
}

function click_img(e, $this, $href, url, page, cat, project_name) {
  $('section.' + cat +' .card-image > a').click(function(e) {
    var $this = $(this);
        $href = $this.attr("href");
        url = $href.split("/");
        page = url[1];
        cat = url[2];
        project_name = url[3];

    e.preventDefault();

      if ($this.parent().hasClass('open')) {
        $this.parent().removeClass('open');
        $($this.parent().find('#item.'+ cat)).remove();
      } else {
        $.ajax({
          url :  '/' + page + '/' + cat + '/' + project_name, // La ressource ciblée
          type : 'GET', // Le type de la requête HTTP
          dataType:'html',
          success: function(data) {
            $('#item_list.'+cat+' .card-image.open #item').remove();
            $('#item_list.'+cat+' .card-image').removeClass('open');

            $(data).find('#item').addClass(cat).insertAfter($this);
            $this.parent().addClass('open');
            marg_item(project_name);
            anchor($href);
          },
        });

      }
    });
}

function anchor($href) {

  var aTag = $("a[href='"+ $href +"']");
  // console.log('aTag.offset()', aTag.offset().top+10);
  $('html,body').animate({scrollTop: aTag.offset().top-7},'slow');

}

function animate() {
  var $item_list = $('#item_list .card > .card-image');
  $item_list.fadeIn( "slow" );
}

function marg_item(project_name) {

  var $item = $('.card-image#'+project_name+' #item');
  var $item_offset = $item.offset().left-8;
  var $card = $item.parents('.card');

  var $item_list = $item.parents('#item_list');
  var pos_card = $card.offset().left;

  var margin_right =  $item_list.width() - (pos_card + $card.width());

console.log('$card.width()',$card.width());
console.log('pos_card',pos_card);

console.log('$item_list',$item_list.width());

  $item.css('margin-left', '-'+$item_offset +'px');
  // $item.parents('.card').css('margin-right', margin_right);
}

function mouseHover() {

  $link_cat = $('#text_figli p > a');

  $link_cat.mouseenter(function() {
    link_id = $(this).attr("id");

    $('html').append("<div class=circle_hover ></div>");
    console.log('link_id',link_id);

    setTimeout(function () {
      $('.circle_hover').addClass('open '+ link_id);
    }, 10);

    mousePos();

  })
  .mouseleave(function() {
    $('html').find(".circle_hover").remove();
  });

  function mousePos() {
    var currentMousePos = { x: 0, y: 0 };
    var $circle = $('.circle_hover');

    $(document).mousemove(function(event) {
      currentMousePos.x = event.pageX;
      currentMousePos.y = event.pageY;

      $circle.css('left', currentMousePos.x  );
      $circle.css('top', currentMousePos.y );
    });
  }

};

$(document).ready(function($){
  click_link();
  click_list();
  mouseHover();
});