Wide Coverage Translation Demo: add buttons for speech output

Also fixed a problem with showing inflections for words containing underscores
(e.g. race_2_N).

src/www/js/wc.js

@@ -8,7 +8,12 @@ wc.o=element("output")
 wc.e=element("extra")
 wc.i=element("grammarinfo")
 wc.p=element("pick")
-wc.os=[] // output segment list
+wc.os=[] /* output segment list
+	    [{input,text:String; from,to::Lang;
+	      target:Node;
+	      rs::[TranslationResults];
+	      current_pick::Int // index into rs or -1
+	     }] */
 wc.cache={} // output segment cache, indexed by source text
 wc.local=appLocalStorage("gf.wc.")
 wc.translating=""
@@ -122,8 +127,9 @@ wc.translate=function() {
 	    }
 	    function word(w) {
 		var ps=w.split("_")
-		return ps.length==2 && elem(ps[1],gftranslate.documented_classes)
+		var n=ps.length
-		        ? inflect(w,ps[1]) : text(w)
+		return ps.length>1 && elem(ps[n-1],gftranslate.documented_classes)
+		        ? inflect(w,ps[n-1]) : text(w)
 	    }
 	    return tree.split(/([ ()]+)/).map(word)
 	}
@@ -132,7 +138,14 @@ wc.translate=function() {
 	    var r=so.rs[so.current_pick]
 	    var prob=r.prob<=0 ? "" : r.prob || ""
 	    if(e) {
-		e.innerHTML=prob+"<br>"
+		clear(e)
+		var speak_from=speech_buttons(so.from,"",so.input)
+		var speak_to=speech_buttons(so.to,"",so.text)
+		speak_to.className=speak_from.className="speech_buttons"
+		e.appendChild(wrap("div",[speak_from,
+					  text(so.input+" → "+so.text),
+					  speak_to]))
+		e.appendChild(wrap("div",text(prob)))
 		if(r.tree) {
 		    wc.e2=node("div",{id:"tree-container","class":"e2"})
 		    e.appendChild(wrap("span",treetext(r.tree)))

src/www/wc.html

@@ -32,6 +32,10 @@ span.inflect { color: blue; }
 .node rect { fill: #fff; stroke: black; stroke-width: 1.5px; }
 .node text { font-size: 10px; font-family: serif; }
 .link {	fill: none; stroke: #ccc; stroke-width: 1.5px; }
+.speech_buttons > * { display: none; }
+.speech_buttons > *:nth-child(1) { display: inline; }
+.speech_buttons > *:nth-child(2) { display: inline; }
+/* .speech_buttons:hover > * { display: inline; } */
 </style>
 </head>
 
@@ -103,7 +107,7 @@ span.inflect { color: blue; }
   </div>
 <hr>
 <div class=modtime><small>
-<!-- hhmts start -->Last modified: Mon May 18 13:38:24 CEST 2015 <!-- hhmts end -->
+<!-- hhmts start -->Last modified: Wed May 27 15:27:37 CEST 2015 <!-- hhmts end -->
 </small></div>
 <a href="http://www.grammaticalframework.org/demos/translation.html">About</a>
 <script src="js/support.js"></script>
@@ -111,6 +115,7 @@ span.inflect { color: blue; }
 <script src="js/localstorage.js"></script>
 <script src="js/langcode.js"></script>
 <script src="js/pgf_online.js"></script>
+<script src="minibar/minibar_support.js">/* speech functions */</script> 
 <script src="js/wc.js"></script>
 
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>