(function ($, root, undefined) {

	$(function () {

		'use strict';

		// DOM ready, take it away

		/* ========================================================================== */
		/*                                  VARIABLES                                 */
		/* ========================================================================== */

		const vw = $(window).width()
		const wow = window.outerWidth
		console.log(vw, wow)
		var isMobile
		var isHome = false



		if (wow < 769) {
			isMobile = true
			//mobile settings
			$('.social-link').addClass('hidden')

		} else {
			isMobile = false
		}

		if ($('body').hasClass("home")) {
			isHome = true
		}

		var desktophomemargin = $(".header-1")[0].getBoundingClientRect().width


		/* ========================================================================== */
		/*                                  FUNCTIONS                                 */
		/* ========================================================================== */

		var focusSearch = function () {

			$(".search-bar input").focus()
		}

		var rotateMenuButton = function () {
			if ($(".menubutton button").hasClass("rotated")) {
				$(".menubutton button").removeClass("rotated");
			} else {
				$(".menubutton button").addClass("rotated");
			}
		}

		var showHideSocial = function () {
			if (isMobile && $('.social-link').hasClass('hidden')) {
				$('.social-link').removeClass('hidden')
			} else if (isMobile) {
				$('.social-link').addClass('hidden')
			}
		}

		function convertRemToPixels(rem) {
			return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
		}

		/* ========================================================================== */
		/*                                   SEARCH                                   */
		/* ========================================================================== */

		if (isMobile) {
			$(".search-bar").prependTo("#sidebar-wrapper")
		}

		/* ========================================================================== */
		/*                                    MENU                                    */
		/* ========================================================================== */

		var menuWidth = wow
		if (!isMobile) {
			menuWidth = 420
		}

		$("#sidebar").simplerSidebar({

			selectors: {
				trigger: "#toggle-sidebar",
				quitter: "#toggle-sidebar"
			},
			sidebar: {
				width: menuWidth
			},
			mask: {
				display: false,
				css: {
					backgroundColor: "black",
					opacity: 1,
					filter: "Alpha(opacity=100)" // IE opacity fix
				}
			},
			gap: 0,
			events: {
				on: {
					animation: {
						both: rotateMenuButton

					}
				},
				callbacks: {
					animation: {
						both: showHideSocial,
						freezePage: false
					}
				}
			}

		});

		/* --------------------------------- Search --------------------------------- */

		if (!isMobile) {
			$(".search-box button").click(function (e) {
				e.preventDefault()
				var bar = $(this).next(".search-bar")
				if (bar.hasClass("opensearch")) {
					bar.stop().animate({ width: "0" }, 400, function () {
						bar.hide().removeClass("opensearch")
					})
				} else {
					bar.show().stop().animate({ width: "20rem" }, 400, function () {
						bar.addClass("opensearch")
					})
				}

			})
		}



		/* -------------------------------------------------------------------------- */
		/*                                    HOME                                    */
		/* -------------------------------------------------------------------------- */


		/* ----------------------------------- css ---------------------------------- */

		var articleWrapCounter = 0

		if (isHome & !isMobile) {
			$('html').css({ overflowY: "hidden" })

			//wrapping for big-small difference
			$('article:first-child').wrap('<div class="home-wrapper-big home-wrapper-1"></div>').addClass("home-big")
			$('article:nth-child(2)').wrap('<div class="home-wrapper-big home-wrapper-2"></div>').addClass("home-big")
			var wrapArticles = $("article").length - 2
			var articleWrapCounter = 0
			for (let i = 0; i < wrapArticles; i++) {
				var j = i + 3
				if (i % 6 == 0) {
					articleWrapCounter++
				}
				$('article:nth-child(' + j + ')').addClass("home-small home-thumbnail-small-" + articleWrapCounter)
			}
			for (let i = 0; i < articleWrapCounter; i++) {
				var j = i + 3
				var k = i + 1
				$(".home-thumbnail-small-" + k).wrapAll('<div class="home-wrapper-small home-wrapper-' + j + '"></div>')
			}
		}


		//returns three random numebers 0-5
		function randomNumbers() {
			// All numbers are equal
			var numberOne = 3;
			var numberTwo = 3;
			var numberThree = 3;

			// run this loop until numberOne is different than numberThree
			do {
				numberOne = Math.floor(Math.random() * 5);
			} while (numberOne === numberThree);

			// run this loop until numberTwo is different than numberThree and numberOne
			do {
				numberTwo = Math.floor(Math.random() * 5);
			} while (numberTwo === numberThree || numberTwo === numberOne);

			var i = [numberOne, numberTwo, numberThree]
			return i
		}

		//jquery function, adds random class to 3 random cihldren
		(function ($) {
			$.fn.addRandomClasses = function () {
				let rn = randomNumbers()
				for (let i = 0; i < 3; i++) {
					var j = rn[i] + 1
					this.children("article:nth-child(" + j + ")").addClass("random")
				}
				return this
			};
		})(jQuery);


		$(".home-wrapper-small").each(function () {
			// var rn = randomNumbers()
			// for (let i = 0; i < rn.length; i++) {
			// 	var j = rn[i] +1
			// 	$(this).children("article:nth-child(" + j + ")").addClass("random")
			// }
			// addRandomClass($(this))
			$(this).addRandomClasses()
		})

		/* ----------------------------- Snap on mobile ----------------------------- */

		if (isHome & isMobile) {
			$("article.post").SnapScroll({
				animateDuration: 400
			});
		}

		/* --------------------------------- To top --------------------------------- */

		$(".totop>a").click(function (e) {
			e.preventDefault()
			$('html, body').stop().animate({ scrollTop: 0 }, 800);
		})

		/* ---------------------------- Scroll on desktop --------------------------- */

		//scroll to the next or prev article
		function homeScroll(target, direction) {
			var nextelem;

			if (direction == "next") {
				nextelem = target.next()
			} else {
				nextelem = target.prev()
			}
			if (nextelem.length == 0) {
				nextelem = target
			}

			// var offset = ($(nextelem).offset().left) - desktophomemargin
			var offset = ($(nextelem).position().left)
			console.log("scrolling to: " + nextelem.attr("class") + " - offset: " + offset)
			$('html, body').stop().animate({ scrollLeft: offset }, 800);
			return nextelem;
		}

		//extractDelta(e): extract the scroll length from an event
		function extractDelta(e) {
			if (e.wheelDelta) {
				return e.wheelDelta;
			}

			if (e.originalEvent.detail) {
				return e.originalEvent.detail;
			}

			if (e.originalEvent.deltaY) {
				return e.originalEvent.deltaY * -1;
			}

			if (e.originalEvent && e.originalEvent.wheelDelta) {
				return e.originalEvent.wheelDelta;
			}
		}

		var currElem = $('article:first-child')

		//checking the current scroll location for refresh:
		if (isHome & !isMobile) {
			var selector = 'main>#content>div'
			var articleWidth = $(selector + ':first-child')[0].getBoundingClientRect().width
			var currscroll = $('html').scrollLeft()
			var scrollnr = Math.floor(currscroll / articleWidth) + 1
			currElem = $(selector + ':nth-child(' + scrollnr + ')')
			console.log("start location: " + currElem.attr("class"))
		}

		var scrolltimer = false;
		$(window).on('wheel DOMMouseScroll', function (e) {
			//e.preventDefault();
			if (isHome & !isMobile) {
				if (scrolltimer) {
					return false;
				}
				scrolltimer = true;
				setTimeout(() => {
					scrolltimer = false;
				}, 500);

				var wd = extractDelta(e)

				if (wd > 0) {
					currElem = homeScroll(currElem, "prev")
				}
				else {
					currElem = homeScroll(currElem, "next")
				}
			}
		});

		/* -------------------------- scroll click on home -------------------------- */
		$(".header-scroll-left button").click(() => {
			currElem = homeScroll(currElem, "prev")
		})
		$(".header-scroll-right button").click(() => {
			currElem = homeScroll(currElem, "next")
		})

		/* -------------------------- loadmore: ajax loads -------------------------- */

		$('.misha_loadmore').on("moreload-start", function () {
			currElem = $(this).prev()
			console.log("currelem: " + currElem.attr("class"))

		})

		$('.misha_loadmore').on("moreload-finish", function () {

			//wrap new elements on load
			articleWrapCounter++
			var wrapnum = articleWrapCounter + 2
			$("#content>article")
				.addClass("home-small home-thumbnail-small-" + articleWrapCounter)
				.wrapAll('<div class="home-wrapper-small home-wrapper-' + wrapnum + '"></div>')
			$(".home-wrapper-" + wrapnum).addRandomClasses()

			//Scroll to new element
			currElem = homeScroll(currElem, "next")
		})

		/* ------------------------------ hover on home ----------------------------- */

		function showTitle(th) {
			$(th).children("h2").show()
			$(th).children(".metadata").addClass("vis")
		}

		function hideTitle(th) {
			$(th).children("h2").hide()
			$(th).children(".metadata").removeClass("vis")
		}

		$(document).on({
			mouseenter: function () {
				if (!Modernizr.touchevents) {
					showTitle(this)
				}
			},
			mouseleave: function () {
				if (!Modernizr.touchevents) {
					hideTitle(this)
				}
			}
		}, '.home-small');

		$(document).on({
			'touchend': function (e) {
				e.preventDefault()
				var art = $(this).parents("article")
				var metadata = art.children(".metadata")
				if (metadata.hasClass("vis")) {
					hideTitle(art)
				} else {
					hideTitle($(".vis").parents("article"))
					showTitle(art)
				}
			}
		}, ".home-small a.thumbnailwrapper")


		/* -------------------------------------------------------------------------- */
		/*                                CIRCULAR TEXT                               */
		/* -------------------------------------------------------------------------- */

		var charnum = 0
		$(".wrapper .header #tag-nav ul li a").each(function () {
			let chars = $(this).html().length + 1
			$(this).lettering()
			$(this).children("span").each(function () {
				let origClass = $(this).attr("class")
				let origClassNum = parseInt(origClass.split("r")[1])
				let newClassNum = origClassNum + charnum
				$(this).removeClass(origClass).addClass("char" + newClassNum)
			})
			charnum += chars
		})


	});

})(jQuery, this);