/**
 * Main JS file for Casper behaviours
 */

/* globals jQuery, document */
(function ($, undefined) {
    "use strict";

    var $document = $(document);

    $document.ready(function () {

        var $postContent = $(".post-content");
        $postContent.fitVids();

        $(".scroll-down").arctic_scroll();

        $(".menu-button, .nav-cover, .nav-close").on("click", function(e){
            e.preventDefault();
            $("body").toggleClass("nav-opened nav-closed");
        });

    });

    // Arctic Scroll by Paul Adam Davis
    // https://github.com/PaulAdamDavis/Arctic-Scroll
    $.fn.arctic_scroll = function (options) {

        var defaults = {
            elem: $(this),
            speed: 500
        },

        allOptions = $.extend(defaults, options);

        allOptions.elem.click(function (event) {
            event.preventDefault();
            var $this = $(this),
                $htmlBody = $('html, body'),
                offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false,
                position = ($this.attr('data-position')) ? $this.attr('data-position') : false,
                toMove;

            if (offset) {
                toMove = parseInt(offset);
                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
            } else if (position) {
                toMove = parseInt(position);
                $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
            } else {
                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
            }
        });

    };
})(jQuery);

$('.post-template .post img').each(
  function(index, element){
    element.onclick = function(e){
      console.log('click on img');
      var p = document.createElement('div');
      var img = document.createElement('div');
      p.onclick = function(e) {
        console.log('close displayPicture');
        var target = e.target.className === 'displayPicture' ? e.target : e.target.parentNode;
        target.parentNode.removeChild(target);
        console.log('add overflow');
        document.documentElement.style.overflow = 'auto';
        document.body.scroll = "yes";
      }
      p.classList.add("displayPicture");
      img.style.backgroundImage = 'url(' + e.target.src + ')';
      p.appendChild(img);
      document.body.appendChild(p);
      console.log('remove overflow');
      document.documentElement.style.overflow = 'hidden';
      document.body.scroll = "no";
    };
  }
);