!function () {

	const script_url = 'https://contentpro.buyin.social/js';
	const script = Array.from(document.getElementsByTagName('script')).find((e) => e.src.indexOf(script_url) === 0);
	const config = getConfig(script);
	if (!config) return;

	const css = `.${config.container}-li:hover .instashop-image { transform: scale(1.2) }
.instashop-image {transition: all .5s;}
.top-layer {z-index: 99999;}
@keyframes play {100% { background-position: -1900px; }}
`;

	const head = document.getElementsByTagName('head')[0];
	const s = document.createElement('style');
	s.setAttribute('type', 'text/css');
	s.appendChild(document.createTextNode(css));
	head.appendChild(s);
	let pixelRatio = 1.0;
	if (window.devicePixelRatio && isMobile()) pixelRatio = window.devicePixelRatio;
	let widget = null;
	let savedRows;
	let savedCols;
	const loadMoreArea = document.getElementById(config.load_more_area);

	initialize();

	function getConfig(script) {
		try {
			const config = JSON.parse((script.dataset || {config: "{}"}).config || "{}");

			if (!("account" in config)) return null;
			if (!("container" in config)) return null;
			if (!("datasource" in config)) return null;
			if (!("cols" in config)) return null;

			if (typeof (config.account) !== "string") return null;
			if (typeof (config.datasource) !== "string") return null;
			if (typeof (config.container) !== "string") return null;
			if (!Array.isArray(config.cols)) return null;

			return config;

		} catch (ex) {
			return null;
		}
	}

	function isMobile() {
		try {
			document.createEvent("TouchEvent");
			return true;
		} catch (e) {
			return false;
		}
	}

	function currentRows(e, c) {
		if (!Array.isArray(e.cols)) return e.rows;
		return Math.ceil(e.boundItemCount / c);
	}

	function currentCols(e, w) {
		w = w / pixelRatio;

		if (!Array.isArray(e.cols)) return e.cols;
		const cols = e.cols.reduce((a, c) => {
			if (a > 0) return a;
			if (w >= c.min && w <= c.max) return c.num;
			return 0;
		}, 0);
		return cols ? cols : 1;
	}

	function currentPageSize(e, w) {

		if (!Array.isArray(e.cols)) return e.cols * e.rows;
		const cols = e.cols.reduce((a, c) => {
			if (a > 0) return a;
			if (w >= c.min && w <= c.max) return c.pageSize;
			return 0;
		}, 0);
		return cols ? cols : 1;
	}

	function resize() {

		const cols = currentCols(widget, widget.container.scrollWidth);
		const rows = currentRows(widget, cols);
		if (cols === widget.savedCols && rows === widget.savedRows) return;
		savedRows = rows;
		savedCols = cols;

		widget.container.style.height = (1.0 * rows * widget.container.scrollWidth / cols) + "px";

		const wp = ((100.0 / cols) * 1);
		const hp = (100.0 / rows);

		const listItems = Array.from(document.getElementsByClassName(widget.id + '-li'));
		listItems.forEach((e) => {
			e.style.flexBasis = `calc(${wp}% - ${cols - 1}px`;
			e.style.maxWidth = `calc(${wp}% - ${cols - 1}px`;
			e.style.width = `calc(${wp}% - ${cols - 1}px`;
			e.style.height = hp + '%';
		});

		if (isElementInViewport(loadMoreArea))
			widget.loadNextDataPage();

	}

	function bindPosts(callback) {

		console.log("bindPosts")
		const cols = currentCols(widget, widget.container.scrollWidth);
		const rows = currentRows(widget, cols);
		const wp = cols ? 100.0 / cols : 0;
		const hp = rows ? 100.0 / rows : 0;

		const div = widget.container;
		const styles = [
			['border', '0'], ['margin', '0'], ['padding', '0'], ['float', 'left'],
			['box-sizing', 'border-box'], ['marginRight', '1px'], ['marginLeft', '1px'], ['marginBottom', '2px'], ['overflow', 'hidden'],
			['listStyle', 'none'], ['webkitFlexBasis', wp + '%'],
			['flexBasis', wp + '%'], ['maxWidth', wp + '%'], ['width', wp + '%'], ['height', hp + '%'],
			['float', 'left']
		];

		let ul = div.children[0];
		if (typeof ul === "undefined") {
			ul = div.appendChild(document.createElement('ul'));
			ul.style.height = '100%';
			ul.style.padding = '0';
			ul.style.margin = '0 auto';
		}

		const itemPrefix = div.parentElement.id;
		const itemsToBind = currentPageSize(widget, widget.container.scrollWidth);
		const availableItems = widget.loadedItems.length - widget.boundIndex - 1;
		const limit = Math.min(itemsToBind, availableItems) + widget.boundIndex + 1;

		if (widget.dataPageSize && availableItems < widget.dataPageSize)
			widget.loadNextDataPage();

		let processed = 0;
		let total = 0;

		for (let itemIndex = widget.boundIndex + 1; itemIndex < limit; itemIndex++) {

			widget.boundIndex = itemIndex;
			total++;
			const e = widget.loadedItems[itemIndex];

			const li = ul.appendChild(document.createElement('li'));
			li.className = itemPrefix + '-li'
			styles.forEach((s) => {
				li.style[s[0]] = s[1];
			});
			const img_div = li.appendChild(document.createElement('div'));
			img_div.style.backgroundImage = "url(" + e.img + ")";
			img_div.style.backgroundPosition = "center";
			img_div.style.backgroundRepeat = "no-repeat";
			img_div.style.backgroundSize = "cover";
			img_div.style.width = '100%';
			img_div.style.height = '100%';
			const a = img_div.appendChild(document.createElement('a'));
			a.style.cursor = 'pointer';

			a.style.textDecoration = 'none';

			a.onclick = function () {
				window.document.location.href = e.url;
			}

			const innerDiv = a.appendChild(document.createElement('div'));
			innerDiv.style.width = "100%";
			innerDiv.style.height = "100%";
			innerDiv.style.position = "relative";

			const post_image = new Image();
			post_image.onerror = (err) => {
				li.style.display = "none";
				processed++;
				if (processed >= total)
					resize();
			};
			post_image.onload = () => {
				widget.boundItemCount++;
				processed++;
				if (processed >= total)
					resize();
			};
			post_image.src = e.img;
		}
		if (widget.loadedItems.length === widget.boundIndex + 1 && typeof (callback) === "function") callback();
	}

	function isElementInViewport(el) {

		var rect = el.getBoundingClientRect();

		return (
			rect.top >= 0 &&
			//rect.left >= 0 &&
			Math.round(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
			Math.round(rect.right) <= (window.innerWidth || document.documentElement.clientWidth)
		);
	}

	window.buyinsocial = {
		loadMore: (callback) => bindPosts(callback)
	}

	function initialize() {

		widget = {};
		widget.boundIndex = -1;
		widget.boundItemCount = 0;
		widget.loadedItems = [];
		widget.id = config.container;
		widget.savedCols = 0;
		widget.savedRows = 0;
		widget.cols = config.cols;

		const div = document.getElementById(widget.id);
		const container = div.appendChild(document.createElement('div'));
		container.style.height = "0";
		container.style.border = "0";
		container.style.overflow = 'hidden';
		widget.container = container;

		const handler = (e) => {
			if (isElementInViewport(loadMoreArea))
				window.buyinsocial.loadMore();
		};

		if (addEventListener) {
			addEventListener('load', handler);
			addEventListener('scroll', handler);
			addEventListener('resize', resize);
		}

		widget.loadNextDataPage = () => {
			if (!widget.nextDataPage) return;
			const xhr = new XMLHttpRequest();
			xhr.open('GET', `${config.datasource}${config.account}/${widget.nextDataPage}`);
			xhr.onload = () => {
				if (xhr.status === 200) {
					try {
						const response = JSON.parse(xhr.responseText);
						widget.loadedItems = widget.loadedItems.concat(response.items);
						widget.nextDataPage = response.nextpage;
						widget.dataPageSize = widget.nextDataPage && !widget.dataPageSize ? response.items.length : 0;
						if (widget.nextDataPage === "0" || isElementInViewport(loadMoreArea))
							bindPosts();
					} catch (ex) {
					}
				}
			};
			xhr.send();
		}
		widget.nextDataPage = "0";
		widget.loadNextDataPage();
	}
}();