mattpodwysocki/Translator.html

## Translator.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
		<title>Translator example</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="rx.js" type="text/javascript"></script>
		<script type="text/javascript"
				src="http://api.microsofttranslator.com/V1/Ajax.svc/Embed?appId=appId">
		</script>
		<script type="text/javascript">

			Array.prototype.toObservable = function() {
				return Rx.Observable.FromArray(this);
			};

			function translate(text, from, to) {
				var subject = new Rx.AsyncSubject();

				Microsoft.Translator.translate(
					text,
					from,
					to,
					function(translation) {
						subject.OnNext(translation);
						subject.OnCompleted();
				});

				return subject.AsObservable();
			}

			function detect(text) {
				var subject = new Rx.AsyncSubject();

				Microsoft.Translator.detect(
					text,
					function(result) {
						subject.OnNext(result);
						subject.OnCompleted();
				});

				return subject.AsObservable();
			}

			function getLanguageNames(locale) {
				return Rx.Observable.Start(function() {
					return Microsoft.Translator.getLanguageNames(locale).toObservable();
				}).MergeObservable();
			}

			function getLanguages() {
				return Rx.Observable.Start(function() {
					return Microsoft.Translator.getLanguages().toObservable();
				}).MergeObservable();
			}

			$(document).ready(function() {

				$("#translateCommand").ToObservable("click").Subscribe(function(event) {

					var translatedText = $("#translateText").val();
					$("#translatedText").empty();

					var detected = detect(translatedText);
					var translator = detected
						.Do(function(detected) {
							$("#detectedText").html("Detected " + detected);
						})
						.SelectMany(function(detected) {
							return getLanguages()
								.Where(function(language) { return language != detected; })
								.SelectMany(function(language) {
									return translate(translatedText, detected, language)
										.Select(function(translatedText) {
											return { translated : translatedText, language : language };
									});
							});
					});

					translator.Subscribe(function(translatedItem) {
						$("#translatedText").append("<li>"+translatedItem.language+"-"+translatedItem.translated+"</li>");
					});
				});

			});
        </script>

    </head>
    <body>
		<p>Enter the term to translate</p>
		<input id="translateText" type="input" style="width: 170px;"/>
		<input id="translateCommand" type="button" value="Translate!" />
		<p id="detectedText" />
		<ul id="translatedText" />
    </body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
	<title>Translator example</title>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="rx.js" type="text/javascript"></script>
	<script type="text/javascript"
	src="http://api.microsofttranslator.com/V1/Ajax.svc/Embed?appId=appId">
	</script>
	<script type="text/javascript">

	Array.prototype.toObservable = function() {
	return Rx.Observable.FromArray(this);
	};

	function translate(text, from, to) {
	var subject = new Rx.AsyncSubject();

	Microsoft.Translator.translate(
	text,
	from,
	to,
	function(translation) {
	subject.OnNext(translation);
	subject.OnCompleted();
	});

	return subject.AsObservable();
	}

	function detect(text) {
	var subject = new Rx.AsyncSubject();

	Microsoft.Translator.detect(
	text,
	function(result) {
	subject.OnNext(result);
	subject.OnCompleted();
	});

	return subject.AsObservable();
	}

	function getLanguageNames(locale) {
	return Rx.Observable.Start(function() {
	return Microsoft.Translator.getLanguageNames(locale).toObservable();
	}).MergeObservable();
	}

	function getLanguages() {
	return Rx.Observable.Start(function() {
	return Microsoft.Translator.getLanguages().toObservable();
	}).MergeObservable();
	}

	$(document).ready(function() {

	$("#translateCommand").ToObservable("click").Subscribe(function(event) {

	var translatedText = $("#translateText").val();
	$("#translatedText").empty();

	var detected = detect(translatedText);
	var translator = detected
	.Do(function(detected) {
	$("#detectedText").html("Detected " + detected);
	})
	.SelectMany(function(detected) {
	return getLanguages()
	.Where(function(language) { return language != detected; })
	.SelectMany(function(language) {
	return translate(translatedText, detected, language)
	.Select(function(translatedText) {
	return { translated : translatedText, language : language };
	});
	});
	});

	translator.Subscribe(function(translatedItem) {
	$("#translatedText").append("<li>"+translatedItem.language+"-"+translatedItem.translated+"</li>");
	});
	});

	});
	</script>

	</head>
	<body>
	<p>Enter the term to translate</p>
	<input id="translateText" type="input" style="width: 170px;"/>
	<input id="translateCommand" type="button" value="Translate!" />
	<p id="detectedText" />
	<ul id="translatedText" />
	</body>
	</html>