Wide coverage demo: show up to 10 translations

The translations are loaded one at a time so you don't have to wait for all
10 to see the first one.

src/www/wc.html

@@ -11,6 +11,7 @@ table.center { margin-left: auto; margin-right: auto; }
 textarea { margin: 0; }
 body:target h1, body:target div.modtime { display: none; }
 #extra { color: #666; }
+#pick span { padding: 0 0.5ex; }
 </style>
 </head>
 
@@ -21,7 +22,7 @@ body:target h1, body:target div.modtime { display: none; }
 
 <table class="center">
 <tr><td>
-<form onsubmit="return wctranslate()">
+<form onsubmit="return wc.translate()">
   <textarea name=input rows=3 style="width: 100%"></textarea>
   <br>
   <big>⤷</big>
@@ -36,7 +37,7 @@ body:target h1, body:target div.modtime { display: none; }
     <option value=Swe>Swedish</option>
   </select> →
   <button name=translate type=submit><strong><big>Translate</big></strong></button> →
-  <select name=to onchange="wctranslate()">
+  <select name=to onchange="wc.translate()">
     <option value=Bul>Bulgarian</option>
     <option value=Chi>Chinese</option>
     <option value=Eng>English</option>
@@ -47,17 +48,20 @@ body:target h1, body:target div.modtime { display: none; }
     <option value=Swe selected>Swedish</option>
   </select>
   <big style="position: relative; top: 1ex">⤵</big>
-    <button onclick="wcswap()">↑↓</button>
+    <button onclick="wc.swap()">↑↓</button>
   <br>
-      <textarea name=output rows=3 style="width: 100%" readonly></textarea>
+      <textarea name=output rows=3 style="width: 100%" readonly>
+      </textarea>
   <br>
 </form>
   
 </table>
-<div class=center><small id=extra></small></div>
+<div class=center>
+  <div id=pick></div>
+  <small id=extra></small></div>
 <p>
 <div class=modtime><small>
-<!-- hhmts start -->Last modified: Tue Feb 11 17:37:40 CET 2014 <!-- hhmts end -->
+<!-- hhmts start -->Last modified: Wed Feb 12 16:23:01 CET 2014 <!-- hhmts end -->
 </small></div>
 <script src="js/support.js"></script>
 <script src="js/gftranslate.js"></script>
@@ -65,35 +69,77 @@ body:target h1, body:target div.modtime { display: none; }
 <script src="gfse/localstorage.js"></script>
 <script src="gfse/cloud2.js"></script>
 <script>
-function wctranslate() {
-  var f=document.forms[0]
-  var e=element("extra")
+var wc={}
+wc.f=document.forms[0]
+wc.e=element("extra")
+wc.p=element("pick")
+wc.translate=function() {
+  var f=wc.f, e=wc.e, p=wc.p
   f.translate.disabled=true
   f.output.value=""
+  wc.r=[]
+  wc.current=0
   clear(e)
+  clear(p)
 
-  function showit(result) {
-    f.output.value=result
-    f.translate.disabled=false
+  function show_error(msg) {
+    if(e) e.innerHTML=msg
+    else f.output.value="["+msg+"]"
   }
-  function step3(trans) {
-    if(e) e.innerHTML=trans[0].prob+"<br>"+trans[0].tree
-    unlextext(trans[0].linearizations[0].text,showit)
+  function show_pick(i) { return function() { show_trans(i); return false; } }
+  function show_picks() {
+    clear(p)
+    for(var i=0;i<wc.r.length;i++) {
+      p.appendChild(text(" "))
+      var pick=text(i+1) // +"⃝"
+      if(i!=wc.current) {
+        var pick=node("a",{href:"#"},[pick])
+        pick.onclick=pick.onmouseover=show_pick(i)
+      }
+      p.appendChild(span_class("pick",pick))
+    }
   }
-  function step2(text) {
-    gftranslate.translate(text,f.from.value,f.to.value,0,1,step3)
+  function show_trans(i) {
+    var r=wc.r[i]
+    f.output.value=r.text
+    if(e) e.innerHTML=r.prob+"<br>"+r.tree
+    wc.current=i
+    if(wc.p && wc.r.length>1) show_picks()
   }
+
+  function trans(text,i) {
+    function showit(result) {
+      wc.r[i].text=result
+      if(wc.current==i) show_trans(i)
+else show_picks()
+      f.translate.disabled=false
+      if(wc.p && i<9) trans(text,i+1)
+    }
+    function step3(trans) {
+      if(trans.length>=1) {
+        if(trans[0].error) show_error(trans[0].error)
+        else {
+          var r=wc.r[i]=trans[0]
+          if(e && wc.current==i) e.innerHTML=r.prob+"<br>"+r.tree
+          unlextext(r.linearizations[0].text,showit)
+        }
+      }
+      else if(i==0) show_error("Unable to translate")
+    }
+    gftranslate.translate(text,f.from.value,f.to.value,i,1,step3)
+  }
+  function step2(text) { trans(text,0) }
   lextext(f.input.value,step2)
   return false;
 }
 
-function wcswap() {
-  var f=document.forms[0]
+wc.swap=function() {
+  var f=wc.f
   f.input.value=f.output.value;
   var from=f.from.value
   f.from.value=f.to.value
   f.to.value=from
-  wctranslate()
+  wc.translate()
 }
 </script>
 </body>