/*
	delighters - add css animations to delight users as they scroll down.
	(c) 2018 - q42
	written by martin kool
	https://github.com/q42/delighters
*/
var delighters = new(function() {
	var self = this,
		dels = this.dels = [],

		// default options
		options = {
			attribute: 'data-delighter',
			classnames: ['delighter', 'started', 'ended'],
			start: 0.75, // default start threshold
			end: 0.75, // default end threshold
			autoinit: true // initialize when domcontentloaded
		};

	document.addeventlistener("domcontentloaded", function() {
		if (options.autoinit) init();
	});

	function config(opts) {
		for (var name in opts) options[name] = opts[name];
	}

	function init() {
		document.addeventlistener('scroll', scroll)
		var els = document.queryselectorall('[' + options.attribute + ']');

		for (var i = 0; i < els.length; i++) {
			var el = els[i],
				def = el.getattribute(options.attribute, 2),
				pairs = def.split(';'),
				del = {};
			del.start = options.start;
			del.end = options.end;

			for (var j = 0; j < pairs.length; j++) {
				var pair = pairs[j].split(':'),
					name = pair[0],
					val = isnan(pair[1] * 1) ? pair[1] : pair[1] * 1;
				if (name) del[name] = (val === undefined) ? true : val;
			}

			del.el = el;
			del.id = dels.length;
			dels.push(del);
			el.classlist.add(options.classnames[0])
			if (del.debug) el.style.outline = 'solid red 4px';
		}
		scroll();
	}

	function scroll() {
		var viewportheight = window.innerheight;
		for (var i = 0; i < dels.length; i++) {
			var del = dels[i],
				box = del.el.getboundingclientrect(),
				factorstart = box.top / viewportheight,
				factorend = box.bottom / viewportheight;

			if (del.debug) {
				if (factorstart >= 0 && factorstart <= 1) {
					if (!del.startline) {
						del.startline = document.createelement('div')
						document.body.appendchild(del.startline);
						del.startline.style = 'position:fixed;height:0;width:100%;border-bottom:dotted red 2px;top:' + (del.start * 100) +
							'vh';
					}
				}
				if (((factorend < del.end) || (factorstart > 1)) && del.startline) {
					del.startline.parentnode.removechild(del.startline);
					delete del.startline;
				}
			}
			if (factorstart < del.start && !del.started) {
				del.started = true;
				del.el.classlist.add(options.classnames[1])
			} else if (factorstart > del.start && del.started) {
				del.started = false;
				del.el.classlist.remove(options.classnames[1])
			}
			if (factorend < del.end && !del.ended) {
				del.ended = true;
				del.el.classlist.add(options.classnames[2])
			} else if (factorend > del.end && del.ended) {
				del.ended = false;
				del.el.classlist.remove(options.classnames[2])
			}
		}
	}

	self.init = init;
	self.config = config;
})();