/Off canvas menu starts here
//getting current browser width and doing some math
var WindowWidth = window.innerWidth;
  function percentCalculation(a, b){
  var c = a*b/100;
  return c;
}
var SeventyPercentWidth = percentCalculation(WindowWidth,40);


// initializing off canvas menu
    IQ.initOffCanvasMenu = function () {
        $(".menu-icon").on("click", function (e) {
            e.preventDefault();

            if ($(this).hasClass("open"))
            {
                $(this).removeClass("open");
        if(WindowWidth <= 640){IQ.closeFullWidthMenu();}else{IQ.closeMenu();}
            }
            else
            {
                $(this).addClass("open");
                if(WindowWidth <= 640){IQ.openFullWidthMenu();}else{IQ.openMenu();}
            }
        });

        $(".off-canvas-overlay, .close-menu").on("click", function () {
            if(WindowWidth <= 640){IQ.closeFullWidthMenu();}else{IQ.closeMenu();}
            $(".menu-icon").removeClass("open");
        });

    };

// functions for tablets
IQ.closeMenu = function () {
    var $menu = $(".left-off-canvas-menu");
    var $content = $("section.container, .tab-bar, footer.copyright, .post-filter-container");
    $(".off-canvas-overlay").hide();
    $("body").removeClass("menu-open");
    $menu.animate({
      "left" : "-"+SeventyPercentWidth+"px"
    }, 200, function () {

    });

    $content.animate({
      "left" : "0"
    }, 200, function () {

    });
  };

  IQ.openMenu = function () {
    var $menu = $(".left-off-canvas-menu");
    var $content = $("section.container, .tab-bar, footer.copyright, .post-filter-container");
    $(".off-canvas-overlay").show();
    $("body").addClass("menu-open");
    $menu.css('width', SeventyPercentWidth);
    $('.menu').css('width', SeventyPercentWidth);

    $menu.animate({
      "left" : "0"
    }, 200, function () {

    });

    $content.animate({
      "left" : SeventyPercentWidth+"px"
    }, 200, function () {

    });


  };

  //functions by Shakil for small screen overlapping menus
  IQ.closeFullWidthMenu = function () {
    var $menu = $(".left-off-canvas-menu");
    $(".off-canvas-overlay").hide();
    $("body").removeClass("menu-open");
    $menu.removeClass('zIndexHigh');
    $menu.animate({
      "left": -WindowWidth},
      200, function() {
            $menu.addClass('zIndexLow');
    });
  }

  IQ.openFullWidthMenu = function () {

    var $menu = $(".left-off-canvas-menu");

    $menu.css({
      width: '100%'
    });

    $('.menu').css('width', '100%');

    $(".off-canvas-overlay").show();
    $("body").addClass("menu-open");
    $menu.removeClass('zIndexLow');
    $menu.addClass('zIndexHigh');

    $menu.animate({
      left: "0"},
      200, function() {

    });

  }