function click_link() {

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

  $link.on('click',function(e) {
    e.preventDefault();
    var $loader = $(this).find('.loader');

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

console.log(project_name);
    if ($this.hasClass('open')) {
      $this.removeClass('open');
      $('#item_list.'+ cat).remove();
    } else {
      $('#item_list').remove();
      $('.open').removeClass('open');
      $loader.css('display','inline-block');
      $.ajax({
        url :  '/' + page + '/' + cat, // La ressource ciblée
        type : 'GET', // Le type de la requête HTTP
        dataType:'html',
        async: false,
        success: function(data) {
          $(data).find('#item_list').addClass(cat).insertAfter($this);
          $this.addClass('open');
          lazy();
        },
        complete: function(data) {
          // console.log('cat', cat);
          $loader.hide();
          click_img(e, $this, $href, url, page, cat, project_name);
          closeAjax();
        },
      });
    }
  });
};

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

  $link.click(function(e) {
    $('.sidebar-right, .sidebar-right button.hamburger').removeClass('is-active');
    var idthis = $(this).attr("id");

    var $loader = $(this).parents('#start').find('#text_figli #'+idthis+' .loader');

    console.log('$loader',$loader);

    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',
        // async: false,
        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');
          lazy();
        },
        complete: function(data) {
          marg_item(project_name);
          closeAjax();
          anchor($href);
        },
      });

    } else {

      $('#item_list').remove();
      $('.open').removeClass('open');

      $loader.css('display','inline-block');

      $.ajax({
        url :  '/' + page + '/' + cat, // La ressource ciblée
        type : 'GET', // Le type de la requête HTTP
        dataType:'html',
        // async: false,
        success: function(data) {
          $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
          $link_txt.addClass('open');
          lazy();
          $('.card a').click(function (e) {
            e.preventDefault()
          })
          click_img(e, $this, $href, url, page, cat, project_name)
        },
        complete: function(data) {
          // console.log('cat', cat);
          $loader.hide();
              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');
                      lazy();
                    },
                    complete: function(data) {
                      marg_item(project_name);
                      closeAjax();
                      anchor($href);
                      scrollTop();
                    },
                  });
              }
            }, 500);
        }
      });
    }
  });
}

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];

    var $loader = $(this).parents('.card').find('.loader');

    e.preventDefault();

      if ($this.parent().hasClass('open')) {
        $this.parent().removeClass('open');
        $($this.parent().find('#item.'+ cat)).remove();
      } else {
        $loader.css('display','inline-block');
        $.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);
            lazy();
            scrollTop();

            // ScrollReveal().reveal($('#item_list > .card'), {
            //   duration:  1000,
            //   distance: '10px',
            // });

          },
          complete:function() {
            closeAjax();
            $('.loader').hide();
          }
        });

      }
    });
}

function anchor($href) {

  var aTag = $("#text_figli a[href='"+ $href +"']");
  console.log(aTag);
  // 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 $card = $item.parents('.card');
  var pos_card = $card.offset().left-16;

  $item.css('margin-left', '-'+pos_card +'px');

  $(window).resize(function() {
    var pos_card = $card.offset().left-16;
    $item.css('margin-left', '-'+pos_card +'px');
  })
}

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 );
    });
  }

};

function lazy() {
  $('img.lazy').Lazy({
      effect: "fadeIn",
        effectTime: 500,
      threshold: 0
  });
}

function animate_burger() {
  var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
  var hamburgers = document.querySelectorAll(".hamburger");
  var $hamburger = $('button.hamburger');

  if (hamburgers.length > 0) {
    forEach(hamburgers, function(hamburger) {
      hamburger.addEventListener("click", function() {
        this.classList.toggle("is-active");
      }, false);
    });
  }

  $hamburger.click(function() {
    $('.sidebar-right').toggleClass("is-active");
  })

}

function closeAjax() {
  var $button = $('#item #icone_list');

  $button.click(function() {
    $(this).parent().remove();
    $('.card-image').removeClass("open");
  });
}

function croix() {
  var $link = $("#text_figli p > a");
  var hamburger = "<div id='icone_list'><button class='hamburger hamburger--slider is-active' type='button'><span class='hamburger-box'><span class='hamburger-inner'></span></span></button></div>"
  var loader = "<div class='loader'></div>"
  $link.append(hamburger);
  $link.append(loader);
}

function scrollTop() {
  var $body = $("html, body");
  $('#item #top').click(function() {
    $body.stop().animate({scrollTop:0}, 500, 'swing', function() {
    });
  })
}

function imgmouse() {
  var currentMousePos = { x: 0, y: 0 };
  var $list_projets = $('.list-projets');
  var $img = $('.list-projets .img');

  $list_projets.mousemove(function(e) {
    var pos = $list_projets.offset();

    currentMousePos.x = e.pageX - pos.left ;
    currentMousePos.y = e.pageY - pos.top;

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

}

function scrollreveal() {
  var $txt = $('#text_figli p');

  ScrollReveal().reveal($txt, {
    duration:  1000,
    distance: '10px',
 });
}

function clickmenu() {
  var $menu = $('.sidebar-right button');

  $menu.click(function() {
    $('#text_figli').toggleClass('hidden');
    $('html, body').toggleClass('hidden');
  });

  var $list_projetsA = $('.list-projets .container a');

  $list_projetsA.click(function() {
    $('#text_figli').toggleClass('hidden');
    $('html, body').toggleClass('hidden');
  });


}

function scrollcustom() {
  $(window).on("load",function(){
      // $(".sidebar-right").mCustomScrollbar({
      //   scrollbarPosition: "outside",
      //   axis:"y",
      // });
      //
      // $("body").mCustomScrollbar({
      //   scrollbarPosition: "outside",
      //   axis:"y",
      // });

  });
}

$(document).ready(function($){
  scrollcustom();
  scrollreveal();
  click_link();
  click_list();
  mouseHover();
  animate_burger();
  croix();
  imgmouse();
  clickmenu();
});