yasuoza/gist:1858167

## gistfile1.html
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Microsoft Translate</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
      $(function () {
        $('#trans').on('click', function (e) {
          e.preventDefault();
          var loading = $('p#loading').toggle(),
              input = $('textarea[name=q_w]'),
              query = input.val();
         trans(query, function (data, dataType) {
              loading.toggle();
              loading.after('<p>' + query + ' -> ' + data + '</p>');
              input.val('');
            });
       });
       $("h2#title").on('click', function (e) {
         e.preventDefault();
         var $this = $(this);
         var query = $this.html();
         trans(query, function (data, dataType) {
           $this.text(data);
         });
       });
       function trans(query, onSuccess) {
         var from_lang = $('select#from').children('option:selected').val(),
              to_lang = $('select#to').children('option:selected').val();
          $.ajax({
            type: "GET",
            url: "http://api.microsofttranslator.com/V2/Ajax.svc/Translate",
            dataType: "jsonp",
            data: {
              appId: 'YOUR APPID',
              text: query,
              from: from_lang,
              to: to_lang
            },
            jsonp: "oncomplete",
            success: onSuccess
          });
        }
      });
    </script>
  </head>
  <body>
    <h2 id="title">Translate waht you want to know</h2>
    <p>Click title!</p>
     <p>Select origin language</p>
    <select id="from">
      <option value="en">English</option>
      <option value="ja">Japanese</option>
    </select>
    <p>Select translated language</p>
    <select id="to">
      <option value="ja">Japanese</option>
      <option value="en">English</option>
      </select>
      <form id='query_area' type="submit" action="">
      <textarea name="q_w"></textarea>
      <button id="trans">translate!</button>
    </form>
    <p id="loading" style="display:none">loading...</p>
  </body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Microsoft Translate</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	$(function () {
	$('#trans').on('click', function (e) {
	e.preventDefault();
	var loading = $('p#loading').toggle(),
	input = $('textarea[name=q_w]'),
	query = input.val();
	trans(query, function (data, dataType) {
	loading.toggle();
	loading.after('<p>' + query + ' -> ' + data + '</p>');
	input.val('');
	});
	});
	$("h2#title").on('click', function (e) {
	e.preventDefault();
	var $this = $(this);
	var query = $this.html();
	trans(query, function (data, dataType) {
	$this.text(data);
	});
	});
	function trans(query, onSuccess) {
	var from_lang = $('select#from').children('option:selected').val(),
	to_lang = $('select#to').children('option:selected').val();
	$.ajax({
	type: "GET",
	url: "http://api.microsofttranslator.com/V2/Ajax.svc/Translate",
	dataType: "jsonp",
	data: {
	appId: 'YOUR APPID',
	text: query,
	from: from_lang,
	to: to_lang
	},
	jsonp: "oncomplete",
	success: onSuccess
	});
	}
	});
	</script>
	</head>
	<body>
	<h2 id="title">Translate waht you want to know</h2>
	<p>Click title!</p>
	<p>Select origin language</p>
	<select id="from">
	<option value="en">English</option>
	<option value="ja">Japanese</option>
	</select>
	<p>Select translated language</p>
	<select id="to">
	<option value="ja">Japanese</option>
	<option value="en">English</option>
	</select>
	<form id='query_area' type="submit" action="">
	<textarea name="q_w"></textarea>
	<button id="trans">translate!</button>
	</form>
	<p id="loading" style="display:none">loading...</p>
	</body>
	</html>