// css
var css = document.createElement('style');
css.type = 'text/css';
css.innerText = atob('CiNwb3B1cCB7Cglwb3NpdGlvbjoJCQkJZml4ZWQ7Cgl0b3A6CQkJCQkwcHg7Cglib3R0b206CQkJCQkwcHg7CglsZWZ0OgkJCQkJMHB4OwoJcmlnaHQ6CQkJCQkwcHg7CglkaXNwbGF5OgkJCQlmbGV4OwoJYWxpZ24taXRlbXM6CQkJY2VudGVyOwoJanVzdGlmeS1jb250ZW50OgkJY2VudGVyOwoJZm9udC1mYW1pbHk6CQkJQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZjsKCXotaW5kZXg6CQkJCTk5OTsKfQoKI3BvcHVwIC52ZWlsIHsKCXBvc2l0aW9uOgkJCQlhYnNvbHV0ZTsKCXRvcDoJCQkJCTBweDsKCWJvdHRvbToJCQkJCTBweDsKCWxlZnQ6CQkJCQkwcHg7CglyaWdodDoJCQkJCTBweDsKCWJhY2tncm91bmQtY29sb3I6CQlyZ2JhKDAsMCwwLC4zMyk7Cn0KCiNwb3B1cCAucG9wIHsKCXBvc2l0aW9uOgkJCQlyZWxhdGl2ZTsKCWRpc3BsYXk6CQkJCWlubGluZS1ibG9jazsKCV9tYXJnaW4tYm90dG9tOgkJCTEyOHB4OwoJYmFja2dyb3VuZC1jb2xvcjoJCSNmMGYwZjA7Cglib3JkZXI6CQkJCQk2cHggc29saWQgI0YwRjBGMDsKCWJvcmRlci1yYWRpdXM6CQkJM3B4OwoJb3ZlcmZsb3c6IAkJCQlhdXRvOwp9CgojcG9wdXAgLmNwbiB7CglwYWRkaW5nOgkJCQk4cHg7Cglmb250LXNpemU6CQkJCTE0cHg7Cgl0ZXh0LWFsaWduOgkJCQljZW50ZXI7Cgl0ZXh0LXRyYW5zZm9ybToJCQljYXBpdGFsaXplOwoJbGV0dGVyLXNwYWNpbmc6CQkJMXB4OwoJYmFja2dyb3VuZC1jb2xvcjoJCSM2MDYwNjA7Cgljb2xvcjoJCQkJCXdoaXRlOwp9CgojcG9wdXAgLmNvbiB7CglsZWZ0OgkJCQkJMHB4OwoJcmlnaHQ6CQkJCQkwcHg7CglwYWRkaW5nOgkJCQkxNnB4OwoJZm9udC1zaXplOgkJCQkxNHB4OwoJb3ZlcmZsb3c6CQkJCWF1dG87Cn0KCiNwb3B1cCAubXNnIHsKCW1hcmdpbjoJCQkJCTE2cHg7CglsaW5lLWhlaWdodDoJCQkxNTAlOwoJdGV4dC1hbGlnbjoJCQkJY2VudGVyOwp9CgojcG9wdXAgLmlucyB7CgltYXJnaW4tYm90dG9tOgkJCTE2cHg7Cglmb250LXNpemU6CQkJCTE0cHg7Cgl0ZXh0LWFsaWduOgkJCQlqdXN0aWZ5OwoJbGluZS1oZWlnaHQ6CQkJMTI1JTsKCWNvbG9yOgkJCQkJIzU1NTU1NTsKfQoKI3BvcHVwIC5idG4gewoJbGVmdDoJCQkJCTBweDsKCXJpZ2h0OgkJCQkJMHB4OwoJdGV4dC1hbGlnbjoJCQkJY2VudGVyOwoJYmFja2dyb3VuZC1jb2xvcjoJCSNEOEQ4RDg7Cn0KCiNwb3B1cCAuYnRuIGRpdiB7CglkaXNwbGF5OgkJCQlpbmxpbmUtYmxvY2s7Cgl3aWR0aDoJCQkJCTk2cHg7CgltYXJnaW46CQkJCQk0cHggMTJweDsKCXBhZGRpbmc6CQkJCTBweCA0cHg7CglsaW5lLWhlaWdodDoJCQkyNHB4OwoJdGV4dC10cmFuc2Zvcm06CQkJY2FwaXRhbGl6ZTsKCWZvbnQtc2l6ZToJCQkJMTJweDsKCWJhY2tncm91bmQtY29sb3I6CQkjRUJFQkVCOwoJY29sb3I6CQkJCQlibGFjazsKCWJvcmRlcjoJCQkJCTFweCBzb2xpZCBzaWx2ZXI7Cglib3JkZXItcmFkaXVzOgkJCTNweDsKCWN1cnNvcjoJCQkJCXBvaW50ZXI7Cn0KCiNwb3B1cCAuYnRuIGltZyB7CgltYXJnaW46CQkJCQkwcHggMTJweDsKCXBhZGRpbmc6CQkJCTJweCA4cHg7Cglib3JkZXI6CQkJCQkycHggc29saWQgdHJhbnNwYXJlbnQ7Cglib3JkZXItcmFkaXVzOgkJCTVweDsKCWN1cnNvcjoJCQkJCXBvaW50ZXI7Cn0KCiNwb3B1cCAuYnRuICpbbGVmdF0gewoJcG9zaXRpb246CQkJCWFic29sdXRlOwoJbGVmdDoJCQkJCTBweDsKfQoKI3BvcHVwIC5idG4gKltyaWdodF0gewoJcG9zaXRpb246CQkJCWFic29sdXRlOwoJcmlnaHQ6CQkJCQkwcHg7Cn0KCiNwb3B1cCAuYnRuIGRpdjpob3ZlciB7CgliYWNrZ3JvdW5kLWNvbG9yOgkJIzgwODA4MDsKCWNvbG9yOgkJCQkJd2hpdGU7Cglib3JkZXItY29sb3I6CQkJd2hpdGU7Cglib3gtc2hhZG93OgkJCQkwcHggMHB4IDJweCAjYTBhMGEwOwoJdGV4dC1zaGFkb3c6CQkJMXB4IDFweCAxcHggYmxhY2s7Cgl0ZXh0LWRlY29yYXRpb246CQl1bmRlcmxpbmU7CgljdXJzb3I6CQkJCQlwb2ludGVyOwp9CgojcG9wdXAgLmJ0biBpbWc6aG92ZXIgewoJYm9yZGVyLWNvbG9yOgkJCSM1MDUwNTA7CgljdXJzb3I6CQkJCQlwb2ludGVyOwp9CgoKI3BvcHVwIC50aW0gewogICAgY29sb3I6ICM5YjQxM2E7CiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgICBmb250LXNpemU6IDEuNWVtOwogICAgbWFyZ2luLWJvdHRvbTogMS41ZW07Cn0=');
document.head.appendChild(css);

// -------------------------------------------------------------------------------

var popups = [], popupFrame, popupVeil;

// -------------------------------------------------------------------------------

function alertBox(type, msg, callBack) {
	var pup = popup({
		width:			256,
		caption:		type,
		message:		msg,
		buttons: {
			'ok':		function() {
							pup.kill();
							if (callBack)
								callBack();
						}
		}
	});
}

// -------------------------------------------------------------------------------

function confirmBox(type, msg, cbOk, cbCancel) {
	var pup = popup({
		width:			320,
		caption:		type,
		message:		msg,
		buttons: {
			'ok':		function() {
							pup.kill();
							if (cbOk)
								cbOk();
						},
			'cancel':	function() {
							pup.kill();
							if (cbCancel)
								cbCancel();
						}
		}
	});
}

// -------------------------------------------------------------------------------

function popup(p) {
	var pup = {};

	// frame
	if (!popupFrame) {
		popupFrame = document.createElement('div');
		popupFrame.id = 'popup';
		document.body.appendChild(popupFrame);
		popupVeil = document.createElement('div');
		popupVeil.className = 'veil'
	}
	popupFrame.appendChild(popupVeil);

	// element
	var div = pup.element = document.createElement('div');
	div.className = 'pop';
	if ('style' in p)
		div.style.cssText = p.style;
	popupFrame.appendChild(div);

	var height = div.scrollHeight;

	// caption
	if ('caption' in p) {
		var div = pup.caption = document.createElement('div');
		div.className = 'cpn';
		div.innerText = p.caption;
		pup.element.appendChild(div);
	}

	// content
	var div = pup.content = document.createElement('div');
	div.className = 'con';
	if (p.content)
		div.style.cssText = p.content;
	pup.element.appendChild(div);

	// image
	if ('image' in p) {
		var div = pup.image = document.createElement('div');
		div.className = 'img';
		var img = document.createElement('img');
		img.src = p.image;
		div.appendChild(img);
		pup.content.appendChild(div);
	}

	// message
	if ('message' in p) {
		var div = pup.message = document.createElement('div');
		div.className = 'msg';
		div.innerHTML = p.message.replace(/\|/g, '<br>');
		pup.content.appendChild(div);
	}

	// instruction
	if ('instruction' in p) {
		var div = pup.instruction = document.createElement('div');
		div.className = 'ins';
		div.innerHTML = p.instruction.replace(/\|/g, '<br>');
		pup.content.appendChild(div);
	}

	// countdown
	if ('countdown' in p) {
		var div = pup.countdown = document.createElement('div');
		div.className = 'tim';
		if ('id' in p)
			div.id = p.id;
		pup.element.appendChild(div);
	}
	
	// buttons
	var _buttons = {};
	var div = pup.buttons = document.createElement('div');
	div.className = 'btn';
	Object.keys(p.buttons || {}).forEach(function(b) {
		var ele;
		if (/\.png$/.test(b))
			(ele = document.createElement('img')).src = b;
		else
			(ele = document.createElement('div')).innerHTML = b;
		ele.onclick = function() {
			p.buttons[b](this);
		};
		pup.buttons.appendChild(_buttons[b] = ele);
	});
	pup.element.appendChild(div);

	// resize
	if (height) {
		pup.content.style.position = 'absolute';
		pup.content.style.top = pup.content.offsetTop + 'px';
		pup.content.style.bottom = pup.buttons.offsetHeight + 'px';
		pup.buttons.style.position = 'absolute';
		pup.buttons.style.bottom = '0px';
	}

	// methods

	pup.setCaption = function(txt) {
		pup.caption.innerText = txt;
	};

	pup.appendContent = function(ele) {
		this.content.appendChild(ele);
	};

	pup.getButton = function(b) {
		return _buttons[b];
	};

	pup.showButtons = function(btn) {
		if (!Array.isArray(btn))
			btn = btn.split(',');
		for (var b in _buttons)
			_buttons[b].style.display = btn.includes(b) ? 'inline-block' : 'none';
	};

	pup.setButtonAttribute = function(btn, attribute) {
		var b;
		if (b = _buttons[btn])
			b.setAttribute(attribute, '1');
	}

	pup.removeButtonAttribute = function(btn, attribute) {
		var b;
		if (b = _buttons[btn])
			b.removeAttribute(attribute);
	}

	pup.kill = function() {
		this.element.remove();
		popups.pop();
		if (popups.length)
			popupFrame.insertBefore(popupVeil, popupVeil.previousSibling)
		else {
			popupFrame.remove();
			popupFrame = null;
		}
	};

	pup.killAll = function() {
		while (popups.length)
			popups[0].kill();
	};

	popups.push(pup);

	return pup;
}