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

    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) {
    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();
        },
      });

    } else {
      $('#item_list').remove();
      $('.open').removeClass('open');

      $.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);
              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);
                    },
                  });
              }
            }, 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();
          },
          complete:function() {
            closeAjax();
            $('.loader').hide();
            scrollTop();
          }
        });

      }
    });

}

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 $card = $item.parents('.card');
  var pos_card = $card.offset().left-8;

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

  $(window).resize(function() {
    var pos_card = $card.offset().left-8;
    $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 redirection() {
    var url = document.location.href;
    console.log(url);
    if (url != 'https://figureslibres.kevintessier.net/') {
      document.location.href="https://figureslibres.kevintessier.net/"
    }
}

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


$(document).ready(function($){
  // redirection();
  click_link();
  click_list();
  mouseHover();
  animate_burger();
  croix();
});