philipmat/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drawanagram</title>
	<!-- iPhone -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<!-- /iPhone -->
<style type="text/css">
input[type=text] {
	text-transform: uppercase;
}
#results {
	padding-left: 2em;
}
#results strong {
	font-family: monospace;
	font-size: larger;
	padding: 4px 8px;
}
#intersection strong {
	border: 1px solid lightskyblue;
}
#anagrams strong {
	background-color: lightskyblue;
}
</style>
<script src="https://raw.githubusercontent.com/honza/140medley/master/140medley.min.js"></script>
<script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script>
<script type="text/javascript">
function intersect() {
	var common = arguments[0];
	for(var j = 1; j < arguments.length; j++) {
		var second = arguments[j];
		var commonAgain = [];
		common.forEach(function(v) {
				var index = second.indexOf(v);
				if (index != -1) {
					commonAgain.push(v);
					second.splice(index, 1);
				}
		})
		common = commonAgain;
	}
	return common;
}
function jsonp(url, callback) {
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        document.body.removeChild(script);
        callback(data);
    };

    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);
}

function doIntersect() {
	var i = 1;
	var words = [];
	var input;
	while( (input = $('#i' + i)) ) {
		// console.log('#i', i, input);
		words.push(input.value.toUpperCase().split(''));
		i++;
	}
	var intersection = intersect.apply(null, words);
	console.log('intersection:', intersection);
	if (intersection.length == 0) {
		$('#result').innerText = "No match.";
	} else {
		var listTemplate = '<% _.forEach(series, function(entry) {%><strong><%- entry%></strong> <% }); %>';
		$('#intersection').innerHTML = _.template(listTemplate, {'series': intersection });
		jsonp('http://www.anagramica.com/best/' + intersection.join(''), function(data) {
			$('#anagrams').innerHTML = _.template(listTemplate, {'series': data['best']});
		})
	}
}
</script>
</head>
<body>
<ul>
	<li><input id="i1" type="text"></li>
	<li><input id="i2" type="text"></li>
	<li style="list-style-type: none"><input type="button" onclick="doIntersect()" value="Anagram"/></li>
</ul>
<div id="results">
	<p id="intersection"></p>
	<p id="anagrams"></p>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Drawanagram</title>
	<!-- iPhone -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<!-- /iPhone -->
	<style type="text/css">
	input[type=text] {
	text-transform: uppercase;
	}
	#results {
	padding-left: 2em;
	}
	#results strong {
	font-family: monospace;
	font-size: larger;
	padding: 4px 8px;
	}
	#intersection strong {
	border: 1px solid lightskyblue;
	}
	#anagrams strong {
	background-color: lightskyblue;
	}
	</style>
	<script src="https://raw.githubusercontent.com/honza/140medley/master/140medley.min.js"></script>
	<script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script>
	<script type="text/javascript">
	function intersect() {
	var common = arguments[0];
	for(var j = 1; j < arguments.length; j++) {
	var second = arguments[j];
	var commonAgain = [];
	common.forEach(function(v) {
	var index = second.indexOf(v);
	if (index != -1) {
	commonAgain.push(v);
	second.splice(index, 1);
	}
	})
	common = commonAgain;
	}
	return common;
	}
	function jsonp(url, callback) {
	var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
	window[callbackName] = function(data) {
	delete window[callbackName];
	document.body.removeChild(script);
	callback(data);
	};

	var script = document.createElement('script');
	script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
	document.body.appendChild(script);
	}

	function doIntersect() {
	var i = 1;
	var words = [];
	var input;
	while( (input = $('#i' + i)) ) {
	// console.log('#i', i, input);
	words.push(input.value.toUpperCase().split(''));
	i++;
	}
	var intersection = intersect.apply(null, words);
	console.log('intersection:', intersection);
	if (intersection.length == 0) {
	$('#result').innerText = "No match.";
	} else {
	var listTemplate = '<% _.forEach(series, function(entry) {%><strong><%- entry%></strong> <% }); %>';
	$('#intersection').innerHTML = _.template(listTemplate, {'series': intersection });
	jsonp('http://www.anagramica.com/best/' + intersection.join(''), function(data) {
	$('#anagrams').innerHTML = _.template(listTemplate, {'series': data['best']});
	})
	}
	}
	</script>
	</head>
	<body>
	<ul>
	<li><input id="i1" type="text"></li>
	<li><input id="i2" type="text"></li>
	<li style="list-style-type: none"><input type="button" onclick="doIntersect()" value="Anagram"/></li>
	</ul>
	<div id="results">
	<p id="intersection"></p>
	<p id="anagrams"></p>
	</div>

	</body>
	</html>