From d4638f54bad7523907ebb6502af48470351d8f9e Mon Sep 17 00:00:00 2001
From: hallgren <hallgren@chalmers.se>
Date: Mon, 8 Aug 2011 17:28:24 +0000
Subject: [PATCH] minibar: refactoring for improved modularity

Two smaller objects have been factored out from the Minibar object:
Input and Translations. These have been placed in two separate files:
minibar_input.js and minibar_translations.js. Some common auxiliary functions
have also been moved to a separate file: minibar_support.js
---
 src/runtime/javascript/minibar/about.html     |   9 +-
 src/runtime/javascript/minibar/minibar.html   |   5 +-
 src/runtime/javascript/minibar/minibar.js     | 427 +-----------------
 .../javascript/minibar/minibar_input.js       | 266 +++++++++++
 .../javascript/minibar/minibar_support.js     |  46 ++
 .../minibar/minibar_translations.js           | 127 ++++++
 .../javascript/minibar/phrasebook.html        |  19 +-
 7 files changed, 483 insertions(+), 416 deletions(-)
 create mode 100644 src/runtime/javascript/minibar/minibar_input.js
 create mode 100644 src/runtime/javascript/minibar/minibar_support.js
 create mode 100644 src/runtime/javascript/minibar/minibar_translations.js

diff --git a/src/runtime/javascript/minibar/about.html b/src/runtime/javascript/minibar/about.html
index 9ab31e987..05fba4aef 100644
--- a/src/runtime/javascript/minibar/about.html
+++ b/src/runtime/javascript/minibar/about.html
@@ -153,11 +153,18 @@ Some implementation details:
    entering a sentence by tapping on the magnets.
  <li>[Changed 2011-08-03] Moved the initialization code in minibar.html to
    <a href="minibar_online.js">minibar_online.js</a>.
+ <li>[Changed 2011-08-08] For improved modularity and reusability,
+   two smaller objects have been factored out from the Minibar object:
+   Input and Translations. These have been placed in two separate files:
+   <a href="minibar_input.js">minibar_input.js</a> and
+   <a href="minibar_translations.js">minibar_translations.js</a>.
+   Some common auxiliary functions have also been moved to a separate file:
+   <a href="minibar_support.js">minibar_support.js</a>.
 </ul>
 
 <hr>
 <small class=modtime>
-<!-- hhmts start --> Last modified: Wed Aug  3 16:14:22 CEST 2011 <!-- hhmts end -->
+<!-- hhmts start --> Last modified: Mon Aug  8 19:27:14 CEST 2011 <!-- hhmts end -->
 </small>
 <address>
 <a href="http://www.cs.chalmers.se/~hallgren/">TH</a>
diff --git a/src/runtime/javascript/minibar/minibar.html b/src/runtime/javascript/minibar/minibar.html
index a6bc8f085..086b8fad6 100644
--- a/src/runtime/javascript/minibar/minibar.html
+++ b/src/runtime/javascript/minibar/minibar.html
@@ -23,7 +23,7 @@
 &amp; <a href="http://www.grammaticalframework.org:41296/translate/">Translator</a>]
 </small>
 <small class=modtime>
-HTML <!-- hhmts start --> Last modified: Wed Aug  3 15:09:58 CEST 2011 <!-- hhmts end -->
+HTML <!-- hhmts start --> Last modified: Mon Aug  8 18:04:22 CEST 2011 <!-- hhmts end -->
 </small>
 <address>
 <a href="http://www.cse.chalmers.se/~hallgren/">TH</a>
@@ -31,6 +31,9 @@ HTML <!-- hhmts start --> Last modified: Wed Aug  3 15:09:58 CEST 2011 <!-- hhmt
 
 <script type="text/JavaScript" src="support.js"></script>
 <script type="text/JavaScript" src="minibar.js"></script>
+<script type="text/JavaScript" src="minibar_input.js"></script>
+<script type="text/JavaScript" src="minibar_translations.js"></script>
+<script type="text/JavaScript" src="minibar_support.js"></script>
 <script type="text/JavaScript" src="pgf_online.js"></script>
 <script type="text/javascript" src="minibar_online.js"></script>
 
diff --git a/src/runtime/javascript/minibar/minibar.js b/src/runtime/javascript/minibar/minibar.js
index 8580037eb..d0a1a9053 100644
--- a/src/runtime/javascript/minibar/minibar.js
+++ b/src/runtime/javascript/minibar/minibar.js
@@ -21,8 +21,9 @@ function start_minibar(server,opts,target) {
     return new Minibar(server,opts,target);
 }
 
+/* --- Main Minibar object -------------------------------------------------- */
 function Minibar(server,opts,target) {
-    // Typically called when the HTML document is loaded
+    // Contructor, typically called when the HTML document is loaded
 
     /* --- Configuration ---------------------------------------------------- */
 
@@ -42,30 +43,25 @@ function Minibar(server,opts,target) {
     // Apply supplied options
     if(opts) for(var o in opts) this.options[o]=opts[o];
 
+    /* --- Creating the components of the minibar --------------------------- */
+    this.translations=new Translations(server,this.options)
+    this.input=new Input(server,this.options,this.translations)
+
     /* --- Creating user interface elements --------------------------------- */
 
-    this.surface=div_id("surface");
+    this.menubar=empty("div");
     this.extra=div_id("extra");
-    this.menubar=div_id("menubar");
-    this.words=div_id("words");
-    this.translations=div_id("translations");
 
     this.minibar=element(target || "minibar");
     this.minibar.innerHTML="";
     with(this) {
-	appendChildren(minibar,[menubar,surface,words,translations,extra]);
+	appendChildren(menubar,[input.menus,translations.menus,input.buttons])
+	appendChildren(minibar,[menubar,input.main,translations.main,extra]);
 	append_extra_buttons(extra,options);
     }
 
-    // Filled in and added to minibar later:
-    this.grammar_menu=empty_id("select","grammar_menu");
-    this.from_menu=empty_id("select","from_menu");
-    this.to_menu=empty_id("select","to_menu");
-
     /* --- Minibar client state initialisation ------------------------------ */
     this.grammar=null;
-    this.current={from: null, input: ""};
-    this.previous=null;
 
     this.server=server;
 
@@ -76,27 +72,17 @@ function Minibar(server,opts,target) {
     }
 }
 
-/* --- Auxiliary functions ---------------------------------------------- */
-
 Minibar.prototype.show_grammarlist=function(grammars) {
-    debug(this)
+    this.grammar_menu=empty_id("select","grammar_menu");
     with(this) {
-	//debug("show_grammarlist ")
-	menubar.innerHTML="";
 	if(grammars.length>1) {
 	    function opt(g) { return option(g,g); }
 	    appendChildren(grammar_menu,map(opt,grammars));
     	    grammar_menu.onchange=
 		bind(function() { select_grammar(grammar_menu.value); },this);
-	    appendChildren(menubar,[text("Grammar: "),grammar_menu]);
+	    insertFirst(menubar,grammar_menu);
+	    insertFirst(menubar,text("Grammar: "));
 	}
-	appendChildren(menubar,
-		       [text(" From: "), from_menu,
-			text(" To: "), to_menu,
-			button(options.delete_button_text,bind(delete_last,this),"H"),
-			button("Clear",bind(clear_all,this),"L")]);
-	if(options.random_button)
-	    menubar.appendChild(button("Random",bind(generate_random,this),"R"));
 	if(options.help_url)
 	    menubar.appendChild(button("Help",bind(open_help,this)));
 	select_grammar(grammars[0]);
@@ -106,337 +92,20 @@ Minibar.prototype.show_grammarlist=function(grammars) {
 Minibar.prototype.select_grammar=function(grammar_name) {
     var t=this;
     //debug("select_grammar ");
-    function get_languages() {
-	t.server.get_languages(bind(t.show_languages,t));
+    function change_grammar() {
+	t.server.grammar_info(bind(t.change_grammar,t));
     }
-    t.server.switch_grammar(grammar_name,get_languages);
+    t.server.switch_grammar(grammar_name,change_grammar);
 }
 
-Minibar.prototype.show_languages=function(grammar_info) {
+Minibar.prototype.change_grammar=function(grammar_info) {
     var t=this;
     with(t) {
 	//debug("show_languages ");
 	grammar=grammar_info;
 
-	var new_language=function () {
-	    current.from=from_menu.value;
-	    clear_all();
-	}
-	from_menu.onchange=bind(new_language,t);
-	update_language_menu(from_menu,grammar);
-	set_initial_language(options,from_menu,grammar);
-
-	to_menu.onchange=bind(get_translations,t);
-
-	update_language_menu(to_menu,grammar);
-	insertFirst(to_menu,option("All","All"));
-	to_menu.value="All";
-
-	new_language();
-    }
-}
-
-Minibar.prototype.clear_all1=function() {
-    with(this) {
-	remove_typed_input();
-	current.input="";
-	previous=null;
-	surface.innerHTML="";
-	translations.innerHTML="";
-    }
-}
-
-Minibar.prototype.clear_all=function() {
-    with(this) {
-	clear_all1();
-	get_completions();
-    }
-}
-
-Minibar.prototype.get_completions=function() {
-    with(this) {
-	//debug("get_completions ");
-	words.innerHTML="...";
-	server.complete({from:current.from,input:current.input},
-			bind(show_completions,this));
-    }
-}
-
-Minibar.prototype.show_completions=function(complete_output) {
-    with(this) {
-	//debug("show_completions ");
-	var completions=complete_output[0].completions;
-	var emptycnt=add_completions(completions)
-	if(true/*emptycnt>0*/) get_translations();
-	else translations.innerHTML="";
-	if(surface.typed && emptycnt==completions.length) {
-	    if(surface.typed.value=="") remove_typed_input();
-	}
-	else add_typed_input();
-    }
-}
-
-Minibar.prototype.add_completions=function(completions) {
-    with(this) {
-	if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
-	words.innerHTML="";
-	words.completions=completions;
-	words.word=[];
-	var t=surface.typed ? surface.typed.value : "";
-	var emptycnt=0;
-	for(var i=0;i<completions.length;i++) {
-	    var s=completions[i];
-	    if(s.length>0) {
-		var w=word(s);
-		words.appendChild(w);
-		words.word[i]=w;
-	    }
-	    else emptycnt++;
-	}
-	filter_completions(t,true);
-	return emptycnt;
-    }
-}
-
-Minibar.prototype.filter_completions=function(t,dim) {
-    with(this) {
-	if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
-	words.filtered=t;
-	//if(dim) debug('filter "'+t+'"');
-	var w=words.word;
-	words.count=0;
-	var dimmed=0;
-	var prefix=""; // longest common prefix, for completion
-	for(var i=0;i<w.length;i++) {
-	    var s=words.completions[i];
-	    var keep=hasPrefix(s,t);
-	    if(keep) {
-		if(words.count==0) prefix=s;
-		else prefix=(commonPrefix(prefix,s));
-		words.count++;
-	    }
-	    if(dim) {
-		w[i].style.opacity= keep ? "1" : "0.5";
-		if(keep) w[i].style.display="inline";
-		else dimmed++;
-	    }
-	    else 
-		w[i].style.display=keep ? "inline" : "none";
-	}
-	words.theword=prefix;
-	if(dimmed>0)
-	    words.timeout=setTimeout(function(){ filter_completions(t,false)},1000);
-    }
-}
- 
-Minibar.prototype.get_translations=function() {
-    with(this) {
-	var c=current;
-	if(options.show_grouped_translations)
-	    server.translategroup({from:c.from,input:c.input},
-				  bind(show_groupedtranslations,this));
-	else
-	    server.translate({from:c.from,input:c.input},
-			     bind(show_translations,this));
-    }
-}
-
-Minibar.prototype.target_lang=function() {
-    with(this) return langpart(to_menu.value,grammar.name);
-}
-
-Minibar.prototype.add_typed_input=function() {
-    with(this) {
-	if(!surface.typed) {
-	    var inp=empty("input","type","text");
-	    inp.value="";
-	    inp.setAttribute("accesskey","t");
-	    inp.style.width="10em";
-	    inp.onkeyup=bind(complete_typed,this);
-	    surface.appendChild(inp);
-	    surface.typed=inp;
-	    inp.focus();
-	}
-    }
-}
-
-Minibar.prototype.remove_typed_input=function() {
-    with(this) {
-	if(surface.typed) {
-	    surface.typed.parentNode.removeChild(surface.typed);
-	    surface.typed=null;
-	}
-    }
-}
-
-Minibar.prototype.complete_typed=function(event) {
-    with(this) {
-	//element("debug").innerHTML=show_props(event,"event");
-	var inp=surface.typed;
-	//debug('"'+inp.value+'"');
-	var s=inp.value;
-	var ws=s.split(" ");
-	if(ws.length>1 || event.keyCode==13) {
-	    if(ws[0]!=words.filtered) filter_completions(ws[0],true);
-	    if(words.count==1) add_word(words.theword);
-	    else if(elem(ws[0],words.completions)) add_word(ws[0]);
-	    else if(words.theword.length>ws[0].length) inp.value=words.theword;
-	}
-	else if(s!=words.filtered) filter_completions(s,true)
-    }
-}
-
-Minibar.prototype.generate_random=function() {
-    var t=this;
-    function show_random(random) {
-	t.clear_all1();
-	t.add_words(random[0].text);
-    }
-    
-    function lin_random(abs) {
-	t.server.linearize({tree:abs[0].tree,to:t.current.from},show_random);
-    }
-    t.server.get_random({},lin_random);
-}
-
-Minibar.prototype.add_words=function(s) {
-    with(this) {
-	var ws=s.split(" ");
-	for(var i=0;i<ws.length;i++)
-	    add_word1(ws[i]+" ");
-	get_completions();
-    }
-}
-
-Minibar.prototype.word=function(s) { 
-    var t=this;
-    function click_word() {
-	if(t.surface.typed) t.surface.typed.value="";
-	t.add_word(s);
-    }
-    return button(s,click_word);
-}
-
-Minibar.prototype.add_word=function(s) {
-    with(this) {
-	add_word1(s+" ");
-	if(surface.typed) {
-	    var s2;
-	    if(hasPrefix(s2=surface.typed.value,s)) {
-		s2=s2.substr(s.length);
-		while(s2.length>0 && s2[0]==" ") s2=s2.substr(1);
-		surface.typed.value=s2;
-	    }
-	    else surface.typed.value="";
-	}
-	get_completions();
-    }
-}
-
-Minibar.prototype.add_word1=function(s) {
-    with(this) {
-	previous={ input: current.input, previous: previous };
-	current.input+=s;
-	var w=span_class("word",text(s));
-	if(surface.typed) surface.insertBefore(w,surface.typed);
-	else surface.appendChild(w);
-    }
-}
-
-Minibar.prototype.delete_last=function() {
-    with(this) {
-	if(surface.typed && surface.typed.value!="")
-	    surface.typed.value="";
-	else if(previous) {
-	    current.input=previous.input;
-	    previous=previous.previous;
-	    if(surface.typed) {
-		surface.removeChild(surface.typed.previousSibling);
-		surface.typed.focus();
-	    }
-	    else surface.removeChild(surface.lastChild);
-	    translations.innerHTML="";
-	    get_completions();
-	}
-    }
-}
-
-Minibar.prototype.tdt=function(tree_btn,txt) {
-    with(this) {
-	return options.show_trees ? tda([tree_btn,txt]) : td(txt);
-    }
-}
-
-Minibar.prototype.show_translations=function(translationResults) {
-    with(this) {
-	var trans=translations;
-	//var to=target_lang(); // wrong
-	var to=to_menu.value;
-	var cnt=translationResults.length;
-	//trans.translations=translations;
-	trans.single_translation=[];
-	trans.innerHTML="";
-	/*
-	  trans.appendChild(wrap("h3",text(cnt<1 ? "No translations?" :
-	  cnt>1 ? ""+cnt+" translations:":
-	  "One translation:")));
-	*/
-	for(p=0;p<cnt;p++) {
-	    var tra=translationResults[p];
-	    if (tra.translations != null) {
-		for (q = 0; q < tra.translations.length; q++) {
-		    var t = tra.translations[q];
-		    var lin=t.linearizations;
-		    var tbody=empty("tbody");
-		    if(options.show_abstract && t.tree)
-			tbody.appendChild(
-			    tr([th(text("Abstract: ")),
-				tdt(node("span",{},[abstree_button(t.tree),
-						    alignment_button(t.tree)]),
-				    text(" "+t.tree))]));
-		    for(var i=0;i<lin.length;i++) {
-			if(lin[i].to==to)
-			    trans.single_translation.push(lin[i].text);
-			if(to=="All" || lin[i].to==to)
-			    tbody.appendChild(tr([th(text(langpart(lin[i].to,grammar.name)+": ")),
-						  tdt(parsetree_button(t.tree,lin[i].to),
-						      text(lin[i].text))]));
-		    }
-		    trans.appendChild(wrap("table",tbody));
-		}
-	    }
-	    else if(tra.typeErrors) {
-		var errs=tra.typeErrors;
-		for(var i=0;i<errs.length;i++)
-		    trans.appendChild(wrap("pre",text(errs[i].msg)))
-	    }
-	}
-    }
-}
-
-Minibar.prototype.show_groupedtranslations=function(translationsResult) {
-    with(this) {
-	var trans=translations;
-	var to=target_lang();
-	//var to=to_menu.value // wrong
-	var cnt=translationsResult.length;
-	//trans.translations=translationsResult;
-	trans.single_translation=[];
-	trans.innerHTML="";
-	for(p=0;p<cnt;p++) {
-	    var t=translationsResult[p];
-	    if(to=="All" || t.to==to) {
-		var lin=t.linearizations;
-		var tbody=empty("tbody");
-		if(to=="All") tbody.appendChild(tr([th(text(t.to+":"))]));
-		for(var i=0;i<lin.length;i++) {
-		    if(to!="All") trans.single_translation[i]=lin[i].text;
-		    tbody.appendChild(tr([td(text(lin[i].text))]));
-		    if (lin.length > 1) tbody.appendChild(tr([td(text(lin[i].tree))]));
-		}
-		trans.appendChild(wrap("table",tbody));
-	    }
-	}
+	input.change_grammar(grammar)
+	translations.change_grammar(grammar)
     }
 }
 
@@ -469,48 +138,13 @@ Minibar.prototype.open_help=function() {
 Minibar.prototype.open_feedback=function() {
     with(this) {
 	// make the minibar state easily accessible from the feedback page:
-	minibar.state={grammar:grammar,current:current,to:to_menu.value,
-		       translations:translations};
+	minibar.state={grammar:grammar,current:input.current,
+		       to:translations.to_menu.value,
+		       translations:translations.translations};
 	open_popup(options.feedback_url,'feedback');
     }
 }
 
-function update_language_menu(menu,grammar) {
-    // Replace the options in the menu with the languages in the grammar
-    var lang=grammar.languages;
-    menu.innerHTML="";
-	
-    for(var i=0; i<lang.length; i++) {
-	var ln=lang[i].name;
-	if(!hasPrefix(ln,"Disamb")) {
-	    var lp=langpart(ln,grammar.name);
-	    menu.appendChild(option(lp,ln));
-	}
-    }
-}
-
-function set_initial_language(options,menu,grammar) {
-    if(grammar.userLanguage) menu.value=grammar.userLanguage;
-    else if(options.default_source_language) {
-	for(var i=0;i<menu.options.length;i++) {
-	    var o=menu.options[i].value;
-	    var l=langpart(o,grammar.name);
-	    if(l==options.default_source_language) menu.value=o;
-	}
-    }
-}
-
-function langpart(conc,abs) { // langpart("FoodsEng","Foods") == "Eng"
-    return hasPrefix(conc,abs) ? conc.substr(abs.length) : conc;
-}
-
-function button_img(url,action) {
-    var i=img(url);
-    i.setAttribute("class","button");
-    i.setAttribute("onclick",action);
-    return i;
-}
-
 function abstree_button(abs) {
   var i=button_img(tree_icon,"toggle_img(this)");
   i.title="Click to display abstract syntax tree"
@@ -533,25 +167,6 @@ function parsetree_button(abs,lang) {
   return i;
 }
 
-function toggle_img(i) {
-  var tmp=i.src;
-  i.src=i.other;
-  i.other=tmp;
-}
-
-function open_popup(url,target) {
-    var w=window.open(url,target,'toolbar=no,location=no,status=no,menubar=no');
-    w.focus();
-}
-
-function setField(form,name,value) {
-    form[name].value=value;
-    var el=element(name);
-    if(el) el.innerHTML=value;
-}
-
-function opener_element(id) { with(window.opener) return element(id); }
-
 // This function is called from feedback.html
 function prefill_feedback_form() {
     var state=opener_element("minibar").state;
diff --git a/src/runtime/javascript/minibar/minibar_input.js b/src/runtime/javascript/minibar/minibar_input.js
new file mode 100644
index 000000000..098c88bba
--- /dev/null
+++ b/src/runtime/javascript/minibar/minibar_input.js
@@ -0,0 +1,266 @@
+
+/* --- Input object --------------------------------------------------------- */
+
+function Input(server,options,translations) {
+    // Input object constructor
+    this.options=options;
+    this.server=server;
+    this.translations=translations;
+    this.main=empty("div");
+    this.menus=empty("span");
+    this.buttons=empty("span");
+    this.surface=div_id("surface");
+    this.words=div_id("words");
+    this.from_menu=empty("select");
+
+    with(this) {
+	appendChildren(main,[surface,words]);
+	appendChildren(menus,[text(" From: "),from_menu])
+	appendChildren(buttons,
+		       [button(options.delete_button_text,bind(delete_last,this),"H"),
+			button("Clear",bind(clear_all,this),"L")]);
+	if(options.random_button)
+	    buttons.appendChild(button("Random",bind(generate_random,this),"R"));
+    }
+
+    /* --- Input client state initialization --- */
+    this.current={from: null, input: ""};
+    this.previous=null;
+
+    this.from_menu.onchange=bind(this.change_language,this);
+}
+
+Input.prototype.change_grammar=function (grammar) {
+    update_language_menu(this.from_menu,grammar);
+    set_initial_language(this.options,this.from_menu,grammar);
+    this.change_language();
+}
+
+Input.prototype.change_language=function () {
+    this.current.from=this.from_menu.value;
+    this.clear_all();
+}
+
+
+Input.prototype.clear_all1=function() {
+    with(this) {
+	remove_typed_input();
+	current.input="";
+	previous=null;
+	surface.innerHTML="";
+	translations.clear();
+    }
+}
+
+Input.prototype.clear_all=function() {
+    with(this) {
+	clear_all1();
+	get_completions();
+    }
+}
+
+Input.prototype.get_completions=function() {
+    with(this) {
+	//debug("get_completions ");
+	words.innerHTML="...";
+	server.complete({from:current.from,input:current.input},
+			bind(show_completions,this));
+    }
+}
+
+Input.prototype.show_completions=function(complete_output) {
+    with(this) {
+	//debug("show_completions ");
+	var completions=complete_output[0].completions;
+	var emptycnt=add_completions(completions)
+	if(true/*emptycnt>0*/) translations.translateFrom(current);
+	else translations.clear();
+	if(surface.typed && emptycnt==completions.length) {
+	    if(surface.typed.value=="") remove_typed_input();
+	}
+	else add_typed_input();
+    }
+}
+
+Input.prototype.add_completions=function(completions) {
+    with(this) {
+	if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
+	words.innerHTML="";
+	words.completions=completions;
+	words.word=[];
+	var t=surface.typed ? surface.typed.value : "";
+	var emptycnt=0;
+	for(var i=0;i<completions.length;i++) {
+	    var s=completions[i];
+	    if(s.length>0) {
+		var w=word(s);
+		words.appendChild(w);
+		words.word[i]=w;
+	    }
+	    else emptycnt++;
+	}
+	filter_completions(t,true);
+	return emptycnt;
+    }
+}
+
+Input.prototype.filter_completions=function(t,dim) {
+    with(this) {
+	if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
+	words.filtered=t;
+	//if(dim) debug('filter "'+t+'"');
+	var w=words.word;
+	words.count=0;
+	var dimmed=0;
+	var prefix=""; // longest common prefix, for completion
+	for(var i=0;i<w.length;i++) {
+	    var s=words.completions[i];
+	    var keep=hasPrefix(s,t);
+	    if(keep) {
+		if(words.count==0) prefix=s;
+		else prefix=(commonPrefix(prefix,s));
+		words.count++;
+	    }
+	    if(dim) {
+		w[i].style.opacity= keep ? "1" : "0.5";
+		if(keep) w[i].style.display="inline";
+		else dimmed++;
+	    }
+	    else 
+		w[i].style.display=keep ? "inline" : "none";
+	}
+	words.theword=prefix;
+	if(dimmed>0)
+	    words.timeout=setTimeout(function(){ filter_completions(t,false)},1000);
+    }
+}
+
+
+Input.prototype.add_typed_input=function() {
+    with(this) {
+	if(!surface.typed) {
+	    var inp=empty("input","type","text");
+	    inp.value="";
+	    inp.setAttribute("accesskey","t");
+	    inp.style.width="10em";
+	    inp.onkeyup=bind(complete_typed,this);
+	    surface.appendChild(inp);
+	    surface.typed=inp;
+	    inp.focus();
+	}
+    }
+}
+
+Input.prototype.remove_typed_input=function() {
+    with(this) {
+	if(surface.typed) {
+	    surface.typed.parentNode.removeChild(surface.typed);
+	    surface.typed=null;
+	}
+    }
+}
+
+Input.prototype.complete_typed=function(event) {
+    with(this) {
+	//element("debug").innerHTML=show_props(event,"event");
+	var inp=surface.typed;
+	//debug('"'+inp.value+'"');
+	var s=inp.value;
+	var ws=s.split(" ");
+	if(ws.length>1 || event.keyCode==13) {
+	    if(ws[0]!=words.filtered) filter_completions(ws[0],true);
+	    if(words.count==1) add_word(words.theword);
+	    else if(elem(ws[0],words.completions)) add_word(ws[0]);
+	    else if(words.theword.length>ws[0].length) inp.value=words.theword;
+	}
+	else if(s!=words.filtered) filter_completions(s,true)
+    }
+}
+
+Input.prototype.generate_random=function() {
+    var t=this;
+    function show_random(random) {
+	t.clear_all1();
+	t.add_words(random[0].text);
+    }
+    
+    function lin_random(abs) {
+	t.server.linearize({tree:abs[0].tree,to:t.current.from},show_random);
+    }
+    t.server.get_random({},lin_random);
+}
+
+Input.prototype.add_words=function(s) {
+    with(this) {
+	var ws=s.split(" ");
+	for(var i=0;i<ws.length;i++)
+	    add_word1(ws[i]+" ");
+	get_completions();
+    }
+}
+
+Input.prototype.word=function(s) { 
+    var t=this;
+    function click_word() {
+	if(t.surface.typed) t.surface.typed.value="";
+	t.add_word(s);
+    }
+    return button(s,click_word);
+}
+
+Input.prototype.add_word=function(s) {
+    with(this) {
+	add_word1(s+" ");
+	if(surface.typed) {
+	    var s2;
+	    if(hasPrefix(s2=surface.typed.value,s)) {
+		s2=s2.substr(s.length);
+		while(s2.length>0 && s2[0]==" ") s2=s2.substr(1);
+		surface.typed.value=s2;
+	    }
+	    else surface.typed.value="";
+	}
+	get_completions();
+    }
+}
+
+Input.prototype.add_word1=function(s) {
+    with(this) {
+	previous={ input: current.input, previous: previous };
+	current.input+=s;
+	var w=span_class("word",text(s));
+	if(surface.typed) surface.insertBefore(w,surface.typed);
+	else surface.appendChild(w);
+    }
+}
+
+Input.prototype.delete_last=function() {
+    with(this) {
+	if(surface.typed && surface.typed.value!="")
+	    surface.typed.value="";
+	else if(previous) {
+	    current.input=previous.input;
+	    previous=previous.previous;
+	    if(surface.typed) {
+		surface.removeChild(surface.typed.previousSibling);
+		surface.typed.focus();
+	    }
+	    else surface.removeChild(surface.lastChild);
+	    translations.clear();
+	    get_completions();
+	}
+    }
+}
+
+/* --- Auxiliary functions -------------------------------------------------- */
+
+function set_initial_language(options,menu,grammar) {
+    if(grammar.userLanguage) menu.value=grammar.userLanguage;
+    else if(options.default_source_language) {
+	for(var i=0;i<menu.options.length;i++) {
+	    var o=menu.options[i].value;
+	    var l=langpart(o,grammar.name);
+	    if(l==options.default_source_language) menu.value=o;
+	}
+    }
+}
diff --git a/src/runtime/javascript/minibar/minibar_support.js b/src/runtime/javascript/minibar/minibar_support.js
new file mode 100644
index 000000000..a3fc078f7
--- /dev/null
+++ b/src/runtime/javascript/minibar/minibar_support.js
@@ -0,0 +1,46 @@
+
+/* --- Auxiliary functions -------------------------------------------------- */
+
+function langpart(conc,abs) { // langpart("FoodsEng","Foods") == "Eng"
+    return hasPrefix(conc,abs) ? conc.substr(abs.length) : conc;
+}
+
+function update_language_menu(menu,grammar) {
+    // Replace the options in the menu with the languages in the grammar
+    var lang=grammar.languages;
+    menu.innerHTML="";
+	
+    for(var i=0; i<lang.length; i++) {
+	var ln=lang[i].name;
+	if(!hasPrefix(ln,"Disamb")) {
+	    var lp=langpart(ln,grammar.name);
+	    menu.appendChild(option(lp,ln));
+	}
+    }
+}
+
+function button_img(url,action) {
+    var i=img(url);
+    i.setAttribute("class","button");
+    i.setAttribute("onclick",action);
+    return i;
+}
+
+function toggle_img(i) {
+  var tmp=i.src;
+  i.src=i.other;
+  i.other=tmp;
+}
+
+function setField(form,name,value) {
+    form[name].value=value;
+    var el=element(name);
+    if(el) el.innerHTML=value;
+}
+
+function open_popup(url,target) {
+    var w=window.open(url,target,'toolbar=no,location=no,status=no,menubar=no');
+    w.focus();
+}
+
+function opener_element(id) { with(window.opener) return element(id); }
diff --git a/src/runtime/javascript/minibar/minibar_translations.js b/src/runtime/javascript/minibar/minibar_translations.js
new file mode 100644
index 000000000..bccbada67
--- /dev/null
+++ b/src/runtime/javascript/minibar/minibar_translations.js
@@ -0,0 +1,127 @@
+/* --- Translations object -------------------------------------------------- */
+
+function Translations(server,options) {
+    this.server=server;
+    this.options=options;
+
+    this.main=empty("div");
+    this.menus=empty("span");
+
+    this.to_menu=empty_id("select","to_menu");
+
+    appendChildren(this.menus,[text(" To: "), this.to_menu])
+    this.to_menu.onchange=bind(this.get_translations,this);
+
+}
+
+Translations.prototype.change_grammar=function(grammar) {
+    this.grammar=grammar;
+    
+    update_language_menu(this.to_menu,grammar);
+    insertFirst(this.to_menu,option("All","All"));
+    this.to_menu.value="All";
+}
+
+Translations.prototype.clear=function() {
+    this.main.innerHTML="";
+}
+
+Translations.prototype.translateFrom=function(current) {
+    this.current=current;
+    this.get_translations();
+}
+
+Translations.prototype.get_translations=function() {
+    with(this) {
+	var c=current;
+	if(options.show_grouped_translations)
+	    server.translategroup({from:c.from,input:c.input},
+				  bind(show_groupedtranslations,this));
+	else
+	    server.translate({from:c.from,input:c.input},
+			     bind(show_translations,this));
+    }
+}
+
+Translations.prototype.tdt=function(tree_btn,txt) {
+    with(this) {
+	return options.show_trees ? tda([tree_btn,txt]) : td(txt);
+    }
+}
+
+Translations.prototype.target_lang=function() {
+    with(this) return langpart(to_menu.value,grammar.name);
+}
+
+Translations.prototype.show_translations=function(translationResults) {
+    with(this) {
+	var trans=main;
+	//var to=target_lang(); // wrong
+	var to=to_menu.value;
+	var cnt=translationResults.length;
+	//trans.translations=translations;
+	trans.single_translation=[];
+	trans.innerHTML="";
+	/*
+	  trans.appendChild(wrap("h3",text(cnt<1 ? "No translations?" :
+	  cnt>1 ? ""+cnt+" translations:":
+	  "One translation:")));
+	*/
+	for(p=0;p<cnt;p++) {
+	    var tra=translationResults[p];
+	    if (tra.translations != null) {
+		for (q = 0; q < tra.translations.length; q++) {
+		    var t = tra.translations[q];
+		    var lin=t.linearizations;
+		    var tbody=empty("tbody");
+		    if(options.show_abstract && t.tree)
+			tbody.appendChild(
+			    tr([th(text("Abstract: ")),
+				tdt(node("span",{},[abstree_button(t.tree),
+						    alignment_button(t.tree)]),
+				    text(" "+t.tree))]));
+		    for(var i=0;i<lin.length;i++) {
+			if(lin[i].to==to)
+			    trans.single_translation.push(lin[i].text);
+			if(to=="All" || lin[i].to==to)
+			    tbody.appendChild(tr([th(text(langpart(lin[i].to,grammar.name)+": ")),
+						  tdt(parsetree_button(t.tree,lin[i].to),
+						      text(lin[i].text))]));
+		    }
+		    trans.appendChild(wrap("table",tbody));
+		}
+	    }
+	    else if(tra.typeErrors) {
+		var errs=tra.typeErrors;
+		for(var i=0;i<errs.length;i++)
+		    trans.appendChild(wrap("pre",text(errs[i].msg)))
+	    }
+	}
+    }
+}
+
+Translations.prototype.show_groupedtranslations=function(translationsResult) {
+    with(this) {
+	var trans=main;
+	var to=target_lang();
+	//var to=to_menu.value // wrong
+	var cnt=translationsResult.length;
+	//trans.translations=translationsResult;
+	trans.single_translation=[];
+	trans.innerHTML="";
+	for(p=0;p<cnt;p++) {
+	    var t=translationsResult[p];
+	    if(to=="All" || t.to==to) {
+		var lin=t.linearizations;
+		var tbody=empty("tbody");
+		if(to=="All") tbody.appendChild(tr([th(text(t.to+":"))]));
+		for(var i=0;i<lin.length;i++) {
+		    if(to!="All") trans.single_translation[i]=lin[i].text;
+		    tbody.appendChild(tr([td(text(lin[i].text))]));
+		    if (lin.length > 1) tbody.appendChild(tr([td(text(lin[i].tree))]));
+		}
+		trans.appendChild(wrap("table",tbody));
+	    }
+	}
+    }
+}
diff --git a/src/runtime/javascript/minibar/phrasebook.html b/src/runtime/javascript/minibar/phrasebook.html
index 9a8649d2b..78f5c353f 100644
--- a/src/runtime/javascript/minibar/phrasebook.html
+++ b/src/runtime/javascript/minibar/phrasebook.html
@@ -1,13 +1,9 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
+<!DOCTYPE html> 
 <html>
 <head> 
-<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
-<meta charset="UTF-8">
 <title>Phrasebook</title> 
 <link rel=stylesheet type="text/css" href="minibar.css"> 
-<script type="text/JavaScript" src="support.js"></script> 
-<script type="text/JavaScript" src="pgf_online.js"></script>
-<script type="text/JavaScript" src="minibar.js"></script>
+<meta charset="UTF-8">
 <meta name = "viewport" content = "width = device-width">
 </head>
  
@@ -24,13 +20,20 @@ see <a href="http://www.grammaticalframework.org/examples/phrasebook/doc-phraseb
 
 </small>
 
+<script type="text/JavaScript" src="support.js"></script>
+<script type="text/JavaScript" src="minibar.js"></script>
+<script type="text/JavaScript" src="minibar_input.js"></script>
+<script type="text/JavaScript" src="minibar_translations.js"></script>
+<script type="text/JavaScript" src="minibar_support.js"></script>
+<script type="text/JavaScript" src="pgf_online.js"></script>
+
 <script type="text/JavaScript">
 
 var online_options={
  // grammars_url: "http://www.grammaticalframework.org/grammars/",
 //grammars_url: "http://tournesol.cs.chalmers.se:41296/grammars",
-grammars_url: "http://localhost:41296/grammars/",
-  grammar_list: ["Phrasebook.pgf"], // leave undefined to get list from server
+//grammars_url: "http://localhost:41296/grammars/",
+  grammar_list: ["Phrasebook.pgf"] // leave undefined to get list from server
 }
 
 var server=pgf_online(online_options);