(function($) {
  "use strict";
  $(window).on("load", function() { // makes sure the whole site is loaded
    //masonry
    $('.grid').masonry({
      itemSelector: '.grid-item'
    });   

    resizeListWidth();
  });


  $(document).ready(function(){  
    $('a[href^="#"]').on('click', function (e) {
      e.preventDefault();
      $(document).off("scroll");
 
      $('a').each(function () {
        $(this).removeClass('active');
      })
      $(this).addClass('active');
 
      var target = this.hash;
      $target = $(target);
      $('html, body').stop().animate({
        'scrollTop': $target.offset().top+2
      }, 500, 'swing', function () {
        window.location.hash = target;
      });
    });
    
    //scroll js
    smoothScroll.init({
      selector: '[data-scroll]', // Selector for links (must be a valid CSS selector)
      selectorHeader: '[data-scroll-header]', // Selector for fixed headers (must be a valid CSS selector)
      speed: 500, // Integer. How fast to complete the scroll in milliseconds
      easing: 'easeInOutCubic', // Easing pattern to use
      updateURL: true, // Boolean. Whether or not to update the URL with the anchor hash on scroll
      offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
      callback: function ( toggle, anchor ) {} // Function to run after scrolling
    });

    //menu
    var bodyEl = document.body,
    content = document.querySelector( '.content-wrap' ),
    openbtn = document.getElementById( 'open-button' ),
    closebtn = document.getElementById( 'close-button' ),
    isOpen = false;

    function inits() {
      initEvents();
    }

    function initEvents() {
      openbtn.addEventListener( 'click', toggleMenu );
      if( closebtn ) {
        closebtn.addEventListener( 'click', toggleMenu );
      }

      // close the menu element if the target it´s not the menu element or one of its descendants..
      content.addEventListener( 'click', function(ev) {
        var target = ev.target;
        if( isOpen && target !== openbtn ) {
          toggleMenu();
        }
      } );
    }

    function toggleMenu() {
      if( isOpen ) {
        classie.remove( bodyEl, 'show-menu' );
      }
      else {
        classie.add( bodyEl, 'show-menu' );
      }
      isOpen = !isOpen;
    }

    inits();

    //pop up porfolio
    $('.portfolio-image-sub li a').magnificPopup({
      type: 'image',
      gallery: {
        enabled: true
      }
      // other options
    });
  });

  // set the width of the li element to the image it contains
  function resizeListWidth(){
      $('ul.portfolio-image-sub li').each(function( index ){
        //////////// reset previously set attributes. important line. donot remove.
        $(this).attr('style', '');
        ////////////////////////////////////////////

        $(this).css('width', $(this).find('img').css('width'));
      }); 

      /*
      $('ul.portfolio-image-sub li').each(function( index ){
        console.log($(this).find('img').css('height'));
        $(this).css('height', $(this).find('img').css('height'));
      }); */

      /* // shows the same height for all elements maybe because they are all li elements
      $('ul.portfolio-image-sub li .decription-wrap').each(function( index ){
        console.log($(this).siblings('img').css('height'));
        $(this).css('height', $(this).siblings('img').css('height'));
      }); */

  }
    
  //header
  function inits() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            header = document.querySelector(".for-sticky");
        if (distanceY > shrinkOn) {
            classie.add(header,"opacity-nav");
        } else {
            if (classie.has(header,"opacity-nav")) {
                classie.remove(header,"opacity-nav");
            }
          }
      });

    window.addEventListener('resize', resizeListWidth);
  }

  window.onload = inits();

})(jQuery);