function addTest(container, title, callback){
	"use strict";
	
	var testContainer = document.createElement("div");
	testContainer.className = "test";
	
	var titleNode = document.createElement("h3");
	titleNode.textContent = title;
	testContainer.appendChild(titleNode);
	
	var resultsNode = document.createElement("div");
	resultsNode.className = "results";
	testContainer.appendChild(resultsNode);
	
	callback(resultsNode);
	
	container.appendChild(testContainer);
}

function addConsistencyTest(title, callback){
	"use strict";
	
	addTest(document.getElementById("consistency"), title, function(resultsNode){
		
		var line = document.createElement("div");
		line.textContent = "consistent: ";
		resultsNode.appendChild(line);
		
		var consistent = document.createElement("span");
		consistent.className = "result";
		line.appendChild(consistent);
		
		function compute(){
			consistent.textContent = "computing";
			callback().then(function(value){
				consistent.textContent = value? "OK": "not OK";
				return;
			}).catch(function(error){
				consistent.classList.add("failed");
				if (Array.isArray(error)){
					consistent.textContent = "";
					var ul = document.createElement("ul");
					consistent.appendChild(ul);
					error.forEach(function(error){
						var li = document.createElement("li");
						li.textContent = error;
						ul.appendChild(li);
					});
				}
				else {
					consistent.textContent = error;
				}
			});
		}
		compute();
		window.addEventListener("resize", compute);
	});
}

addConsistencyTest("screen properties", function(){
	"use strict";
	
	if (screen.orientation.type.match(/landscape/) && screen.width < screen.height){
		return Promise.reject("orientation wrong");
	}
	if (screen.availHeight > screen.height){
		return Promise.reject("available height too big");
	}
	if (screen.availWidth > screen.width){
		return Promise.reject("available width too big");
	}
	
	return Promise.resolve(true);
});

addConsistencyTest("media queries: window.matchMedia - low value", function(){
	"use strict";
	
	var value = Math.floor(Math.min(screen.width, screen.height) / 2);
	
	return Promise.resolve(
		window.matchMedia("(min-device-width: " + value + "px)").matches &&
		window.matchMedia("(min-device-height: " + value + "px)").matches &&
		!window.matchMedia("(max-device-width: " + value + "px)").matches &&
		!window.matchMedia("(max-device-height: " + value + "px)").matches
	);
});

addConsistencyTest("media queries: window.matchMedia - reported value", function(){
	"use strict";
	
	var errors = [];
	["width", "height"].forEach(function(dimension){
		["min-", "max-", ""].forEach(function(comparison){
			var queryBase = "(" + comparison + "device-" + dimension + ": ";
			var query = queryBase + screen[dimension] + "px)";
			if (!window.matchMedia(query).matches){
				errors.push(query + " did not match.");
				query = queryBase + (screen[dimension] + 1) + "px)";
				if (!window.matchMedia(query).matches){
					errors.push(query + " did not match.");
				}
				query = queryBase + (screen[dimension] - 1) + "px)";
				if (!window.matchMedia(query).matches){
					errors.push(query + " did not match.");
				}
			}
		});
	});
	if (errors.length){
		return Promise.reject(errors);
	}
	return Promise.resolve(true);
});

addConsistencyTest("media queries: window.matchMedia - big value", function(){
	"use strict";
	
	var value = Math.max(screen.width, screen.height) * 2;
	
	return Promise.resolve(
		!window.matchMedia("(min-device-width: " + value + "px)").matches &&
		!window.matchMedia("(min-device-height: " + value + "px)").matches &&
		window.matchMedia("(max-device-width: " + value + "px)").matches &&
		window.matchMedia("(max-device-height: " + value + "px)").matches
	);
});

var addResolutionTest = function(){
	"use strict";
	return function addResolutionTest(title, callback, properties = ["width", "height"]){
		addTest(document.getElementById("resolution"), title, function(resultsNode){
			properties.forEach(function(type){
				var line = document.createElement("div");
				line.textContent = type + ": ";
				resultsNode.appendChild(line);
				
				var number = document.createElement("span");
				number.className = "result " + type;
				line.appendChild(number);
				function compute(){
					number.textContent = "computing";
					callback(type).then(function(value){
						number.textContent = value;
						return;
					}).catch(function(error){
						number.classList.add("failed");
						number.textContent = error;
					});
				}
				compute();
				window.addEventListener("resize", compute);
			});
		});
	};
}();

addResolutionTest("screen properties", function(type){
	"use strict";
	
	return Promise.resolve(screen[type]);
});

addResolutionTest("screen properties: avail...", function(type){
	"use strict";
	
	return Promise.resolve(screen[
		"avail" + type.substring(0, 1).toUpperCase() + type.substring(1)
	]);
}, ["width", "height", "left", "top"]);

addResolutionTest("window properties: inner...", function(type){
	"use strict";
	
	return Promise.resolve(window[
		"inner" + type.substring(0, 1).toUpperCase() + type.substring(1)
	]);
});

addResolutionTest("window properties: outer...", function(type){
	"use strict";
	
	return Promise.resolve(window[
		"outer" + type.substring(0, 1).toUpperCase() + type.substring(1)
	]);
});

function searchValue(tester){
	"use strict";
	
	var minValue = 0;
	var maxValue = 512;
	var ceiling = Math.pow(2, 32);
	
	function stepUp(){
		if (maxValue > ceiling){
			return Promise.reject("Unable to find upper bound");
		}
		return tester(maxValue).then(function(testResult){
			if (testResult === searchValue.isEqual){
				return maxValue;
			}
			else if (testResult === searchValue.isBigger){
				minValue = maxValue;
				maxValue *= 2;
				return stepUp();
			}
			else {
				return false;
			}
		});
	}
	function binarySearch(){
		if (maxValue - minValue < 0.01){
			return tester(minValue).then(function(testResult){
				if (testResult.isEqual){
					return minValue;
				}
				else {
					// eslint-disable-next-line promise/no-nesting
					return tester(maxValue).then(function(testResult){
						if (testResult.isEqual){
							return maxValue;
						}
						else {
							throw "Search could not find exact value." +
								" It's between " + minValue + " and " + maxValue + ".";
						}
					});
				}
			});
		}
		else {
			var pivot = (minValue + maxValue) / 2;
			return tester(pivot).then(function(testResult){
				if (testResult === searchValue.isEqual){
					return pivot;
				}
				else if (testResult === searchValue.isBigger){
					minValue = pivot;
					return binarySearch();
				}
				else {
					maxValue = pivot;
					return binarySearch();
				}
			});
		}
	}
	
	return stepUp().then(function(stepUpResult){
		if (stepUpResult){
			return stepUpResult;
		}
		else {
			return binarySearch();
		}
	});
	
}
searchValue.isSmaller = -1;
searchValue.isEqual = 0;
searchValue.isBigger = 1;

addResolutionTest("media queries: window.matchMedia (max)", function(type){
	"use strict";
	
	return searchValue(function(valueToTest){
		if (window.matchMedia("(device-" + type + ": " + valueToTest + "px)").matches){
			return Promise.resolve(searchValue.isEqual);
		}
		else if (window.matchMedia("(max-device-" + type + ": " + valueToTest + "px)").matches){
			return Promise.resolve(searchValue.isSmaller);
		}
		else {
			return Promise.resolve(searchValue.isBigger);
		}
	});
});

addResolutionTest("media queries: window.matchMedia (min)", function(type){
	"use strict";
	
	return searchValue(function(valueToTest){
		if (window.matchMedia("(device-" + type + ": " + valueToTest + "px)").matches){
			return Promise.resolve(searchValue.isEqual);
		}
		else if (window.matchMedia("(min-device-" + type + ": " + valueToTest + "px)").matches){
			return Promise.resolve(searchValue.isBigger);
		}
		else {
			return Promise.resolve(searchValue.isSmaller);
		}
	});
});

addResolutionTest("media queries: css (max)", function(type){
	"use strict";
	
	var tester = document.createElement("div");
	var id = "tester_" + (Math.random() * Math.pow(2, 32)).toString(36).replace(".", "_");
	tester.id = id;
	document.body.appendChild(tester);
	
	var style = document.createElement("style");
	style.type = "text/css";
	document.head.appendChild(style);
	
	var styleSheet = document.styleSheets[document.styleSheets.length - 1];
	styleSheet.insertRule("#" + id + "{position: fixed; right: 100%; z-index: 0;}");
	
	return searchValue(function(valueToTest){
		return new Promise(function(resolve, reject){
			while (styleSheet.rules.length > 1){
				styleSheet.removeRule(1);
			}
			var rule = "@media (max-device-" + type + ": " + valueToTest + "px){#" + id + "{z-index: 1;}}";
			styleSheet.insertRule(rule, 1);
			rule = "@media (device-" + type + ": " + valueToTest + "px){#" + id + "{z-index: 2;}}";
			styleSheet.insertRule(rule, 2);
			window.setTimeout(function(){
				var testValue = window.getComputedStyle(tester).zIndex;
				switch (testValue){
					case "0":
						resolve(searchValue.isBigger);
						break;
					case "1":
						resolve(searchValue.isSmaller);
						break;
					case "2":
						resolve(searchValue.isEqual);
						break;
					default:
						reject("Unknown test value: " + testValue);
				}
			}, 1);
		});
	});
});

addResolutionTest("media queries: css (min)", function(type){
	"use strict";
	
	var tester = document.createElement("div");
	var id = "tester_" + (Math.random() * Math.pow(2, 32)).toString(36).replace(".", "_");
	tester.id = id;
	document.body.appendChild(tester);
	
	var style = document.createElement("style");
	style.type = "text/css";
	document.head.appendChild(style);
	
	var styleSheet = document.styleSheets[document.styleSheets.length - 1];
	styleSheet.insertRule("#" + id + "{position: fixed; right: 100%; z-index: 0;}");
	
	return searchValue(function(valueToTest){
		return new Promise(function(resolve, reject){
			while (styleSheet.rules.length > 1){
				styleSheet.removeRule(1);
			}
			var rule = "@media (min-device-" + type + ": " + valueToTest + "px){#" + id + "{z-index: 1;}}";
			styleSheet.insertRule(rule, 1);
			rule = "@media (device-" + type + ": " + valueToTest + "px){#" + id + "{z-index: 2;}}";
			styleSheet.insertRule(rule, 2);
			window.setTimeout(function(){
				var testValue = window.getComputedStyle(tester).zIndex;
				switch (testValue){
					case "0":
						resolve(searchValue.isSmaller);
						break;
					case "1":
						resolve(searchValue.isBigger);
						break;
					case "2":
						resolve(searchValue.isEqual);
						break;
					default:
						reject("Unknown test value: " + testValue);
				}
			}, 1);
		});
	});
});