var $cards = $('#items .full-works');
var $card = $('#items .card');
var $cat = $('.cat-list .cat a');
var $img = $('.item #items .img');

function masonry() {
  var $grid = $cards.masonry({
      itemSelector: '.card',
      columnWidth: '.card',
      percentPosition: true,
      gutter: 10,
      isAnimated: true,
      transitionDuration: '0.5s'
  });

  var $grid2 = $img.masonry({
      itemSelector: '.img-card',
      columnWidth: '.img-card',
      percentPosition: true,
      gutter: 10,
      transitionDuration: '0.2s'
  });

  $(".cat-list .btn a").click(function(e) {
    e.preventDefault();

    $('.active').removeClass('active');
    $(this).addClass('active');

    var filter = $(this).attr("data-filter");
    var self = $('#body-wrapper #items .full-works');

    self.masonryFilter({
        filter: function () {
            if (!filter) return true;
            return $(this).attr("data-filter") == filter;
        }
    });
  });

  $grid.imagesLoaded().progress(function() {
      $grid.masonry();
  });

  $grid2.imagesLoaded().progress(function() {
      $grid2.masonry();
  });
}

function filteritem() {
  var $card = $('#body > .card');
  var $cat = $('.cat a');
  var $img = $('#body .img');
}

function contact() {
    var $contact = $('header .contact');

    $contact.on('click', function() {
        if ($(this).hasClass('open')) {
            $(this).removeClass('open');
            $(this).addClass('close');
        } else {
            $(this).addClass('open');
            $(this).removeClass('close');
        }
    })
}

function customscroll($page_item) {
  var $page = $('#page-wrapper.blog');
  var $page_item = $("body.blog #start, body.item");

  $page_item.mCustomScrollbar({
    theme: "dark",
    scrollbarPosition: "outside",
    scrollInertia: 1000,
    callbacks: {
      onInit: function(){
        $('.top').on('click', function() {
          event.preventDefault()
          $page_item.mCustomScrollbar('scrollTo',['top',null]);
        });
      }
    }
  });

  $("body").mCustomScrollbar({
      theme: "dark",
      scrollbarPosition: "outside",
      callbacks: {
        whileScrolling: function() {
          var pct = this.mcs.topPct;
          if (pct < 1) {
          } else {
            $page.addClass("down");
            $page_item.mCustomScrollbar("disable",true);
          }
          setTimeout(function(){
              $page_item.mCustomScrollbar("update");
          }, 2000);
        }
      }
  });
}

jQuery(document).ready(function($) {
    masonry();
    filteritem();
    contact();
    customscroll();

});