implement a pazpar2 jQuery plugin
[mkws-moved-to-github.git] / experiments / spclient / mkws.js
1 /* A very simple client that shows a basic usage of the pz2.js
2 */
3
4 "use strict"; // HTML5: disable for debug >= 2
5
6 /* 
7  * global config object: mkws_config 
8  * 
9  * needs to be defined in the HTML header before 
10  * including this JS file
11  */
12
13 if (!mkws_config)
14     var mkws_config = {}; // for the guys who forgot to define mkws_config...
15
16 var mkws_debug = 1;
17
18 var pazpar2_url = mkws_config.pazpar2_url ? mkws_config.pazpar2_url : "/pazpar2/search.pz2";
19 var service_proxy_url = mkws_config.service_proxy_url ? mkws_config.service_proxy_url : "/service-proxy/";
20
21 var pazpar2path = mkws_config.use_service_proxy ? service_proxy_url : pazpar2_url;
22 var usesessions = mkws_config.use_service_proxy ? false : true;
23
24
25 var mkws_locale_lang = {
26     "de": {
27         "Authors": "Autoren",
28         "Subjects": "Schlagwörter",
29         "Sources": "Daten und Quellen",
30         "TERMLISTS": "Termlisten",
31         "Next": "Weiter",
32         "Prev": "Zurück",
33         "Search": "Suche",
34         "Sort by": "Sortieren nach",
35         "and show": "und zeige",
36         "per page": "pro Seite",
37         "Displaying": "Zeige",
38         "to": "von",
39         "of": "aus",
40         "found": "gefunden",
41         "Title": "Titel",
42         "Author": "Autor",
43         "Date": "Datum",
44         "Subject": "Schlagwort",
45         "Location": "Ort",
46
47         "dummy": "dummy"
48     },
49
50     "da": {
51         "Authors": "Forfattere",
52         "Subjects": "Emner",
53         "Sources": "Kilder",
54         "TERMLISTS": "TERMLISTS",
55         "Next": "Næste",
56         "Prev": "Forrige",
57         "Search": "Søg",
58         "Sort by": "Sorter efter",
59         "and show": "og vis",
60         "per page": "per side",
61         "Displaying": "Viser",
62         "to": "til",
63         "of": "ud af",
64         "found": "fandt",
65         "Title": "Title",
66         "Author": "Forfatter",
67         "Date": "Dato",
68         "Subject": "Emneord",
69         "Location": "Lokation",
70
71         "dummy": "dummy"
72     }
73 };
74
75 // create a parameters array and pass it to the pz2's constructor
76 // then register the form submit event with the pz2.search function
77 // autoInit is set to true on default
78 var my_paz = new pz2( { "onshow": my_onshow,
79                     "showtime": 500,            //each timer (show, stat, term, bytarget) can be specified this way
80                     "pazpar2path": pazpar2path,
81                     "oninit": my_oninit,
82                     "onstat": my_onstat,
83                     "onterm": my_onterm,
84                     "termlist": "xtargets,subject,author",
85                     "onbytarget": my_onbytarget,
86                     "usesessions" : usesessions,
87                     "showResponseType": '', // or "json" (for debugging?)
88                     "onrecord": my_onrecord } );
89 // some state vars
90 var curPage = 1;
91 var recPerPage = 20;
92 var totalRec = 0;
93 var curDetRecId = '';
94 var curDetRecData = null;
95 var curSort = 'relevance';
96 var curFilter = null;
97 var submitted = false;
98 var SourceMax = 16;
99 var SubjectMax = 10;
100 var AuthorMax = 10;
101
102 //
103 // pz2.js event handlers:
104 //
105 function my_oninit() {
106     my_paz.stat();
107     my_paz.bytarget();
108 }
109
110 function my_onshow(data) {
111     totalRec = data.merged;
112     // move it out
113     var pager = document.getElementById("pager");
114     pager.innerHTML = "";
115     pager.innerHTML +='<hr/><div style="float: right">' + M('Displaying') + ': '
116                     + (data.start + 1) + ' ' + M('to') + ' ' + (data.start + data.num) +
117                      ' ' + M('of') + ' ' + data.merged + ' (' + M('found') + ': '
118                      + data.total + ')</div>';
119     drawPager(pager);
120     // navi
121     var results = document.getElementById("results");
122
123     var html = [];
124     for (var i = 0; i < data.hits.length; i++) {
125         var hit = data.hits[i];
126               html.push('<div class="record" id="recdiv_'+hit.recid+'" >'
127             +'<span>'+ (i + 1 + recPerPage * (curPage - 1)) +'. </span>'
128             +'<a href="#" id="rec_'+hit.recid
129             +'" onclick="showDetails(this.id);return false;"><b>'
130             + hit["md-title"] +' </b></a>');
131               if (hit["md-title-remainder"] !== undefined) {
132                 html.push('<span>' + hit["md-title-remainder"] + ' </span>');
133               }
134               if (hit["md-title-responsibility"] !== undefined) {
135             html.push('<span><i>'+hit["md-title-responsibility"]+'</i></span>');
136         }
137         if (hit.recid == curDetRecId) {
138             html.push(renderDetails(curDetRecData));
139         }
140         html.push('</div>');
141     }
142     replaceHtml(results, html.join(''));
143 }
144
145 function my_onstat(data) {
146     var stat = document.getElementById("mkwsStat");
147     if (stat == null)
148         return;
149
150     stat.innerHTML = '<b>STATUS INFO</b> -- Active clients: '
151                         + data.activeclients
152                         + '/' + data.clients + ' -- </span>'
153                         + '<span>Retrieved records: ' + data.records
154                         + '/' + data.hits + ' :.</span>';
155 }
156
157 function my_onterm(data) {
158     if (!mkws_config.termlist_menu)
159         return;
160     
161     var termlists = [];
162     termlists.push('<hr/><b>' + M('TERMLISTS') + ':</b><hr/><div class="termtitle">' + M('Sources') + '</div>');
163     for (var i = 0; i < data.xtargets.length && i < SourceMax; i++ ) {
164         termlists.push('<a href="#" target_id='+data.xtargets[i].id
165             + ' onclick="limitTarget(this.getAttribute(\'target_id\'), this.firstChild.nodeValue);return false;">' + data.xtargets[i].name
166         + ' </a><span> (' + data.xtargets[i].freq + ')</span><br/>');
167     }
168
169     termlists.push('<hr/><div class="termtitle">' + M('Subjects') + '</div>');
170     for (var i = 0; i < data.subject.length && i < SubjectMax; i++ ) {
171         termlists.push('<a href="#" onclick="limitQuery(\'su\', this.firstChild.nodeValue);return false;">' + data.subject[i].name + '</a><span>  ('
172               + data.subject[i].freq + ')</span><br/>');
173     }
174
175     termlists.push('<hr/><div class="termtitle">' + M('Authors') + '</div>');
176     for (var i = 0; i < data.author.length && i < AuthorMax; i++ ) {
177         termlists.push('<a href="#" onclick="limitQuery(\'au\', this.firstChild.nodeValue);return false;">'
178                             + data.author[i].name
179                             + ' </a><span> ('
180                             + data.author[i].freq
181                             + ')</span><br/>');
182     }
183     var termlist = document.getElementById("termlist");
184     replaceHtml(termlist, termlists.join(''));
185 }
186
187 function my_onrecord(data) {
188     // FIXME: record is async!!
189     clearTimeout(my_paz.recordTimer);
190     // in case on_show was faster to redraw element
191     var detRecordDiv = document.getElementById('det_'+data.recid);
192     if (detRecordDiv) return;
193     curDetRecData = data;
194     var recordDiv = document.getElementById('recdiv_'+curDetRecData.recid);
195     var html = renderDetails(curDetRecData);
196     recordDiv.innerHTML += html;
197 }
198
199 function my_onbytarget(data) {
200     var targetDiv = document.getElementById("bytarget");
201     var table ='<table><thead><tr><td>Target ID</td><td>Hits</td><td>Diags</td>'
202         +'<td>Records</td><td>State</td></tr></thead><tbody>';
203
204     for (var i = 0; i < data.length; i++ ) {
205         table += "<tr><td>" + data[i].id +
206             "</td><td>" + data[i].hits +
207             "</td><td>" + data[i].diagnostic +
208             "</td><td>" + data[i].records +
209             "</td><td>" + data[i].state + "</td></tr>";
210     }
211
212     table += '</tbody></table>';
213     targetDiv.innerHTML = table;
214 }
215
216 ////////////////////////////////////////////////////////////////////////////////
217 ////////////////////////////////////////////////////////////////////////////////
218
219 // wait until the DOM is ready
220 function domReady ()
221 {
222     document.search.onsubmit = onFormSubmitEventHandler;
223     document.search.query.value = '';
224     document.select.sort.onchange = onSelectDdChange;
225     document.select.perpage.onchange = onSelectDdChange;
226 }
227
228 // when search button pressed
229 function onFormSubmitEventHandler()
230 {
231     resetPage();
232     loadSelect();
233     triggerSearch();
234     submitted = true;
235     return false;
236 }
237
238 function onSelectDdChange()
239 {
240     if (!submitted) return false;
241     resetPage();
242     loadSelect();
243     my_paz.show(0, recPerPage, curSort);
244     return false;
245 }
246
247 function resetPage()
248 {
249     curPage = 1;
250     totalRec = 0;
251 }
252
253 function triggerSearch ()
254 {
255     my_paz.search(document.search.query.value, recPerPage, curSort, curFilter);
256 }
257
258 function loadSelect ()
259 {
260     curSort = document.select.sort.value;
261     recPerPage = document.select.perpage.value;
262 }
263
264 // limit the query after clicking the facet
265 function limitQuery (field, value)
266 {
267     document.search.query.value += ' and ' + field + '="' + value + '"';
268     onFormSubmitEventHandler();
269 }
270
271 // limit by target functions
272 function limitTarget (id, name)
273 {
274     var navi = document.getElementById('navi');
275     navi.innerHTML =
276         'Source: <a class="crossout" href="#" onclick="delimitTarget();return false;">'
277         + name + '</a>';
278     navi.innerHTML += '<hr/>';
279     curFilter = 'pz:id=' + id;
280     resetPage();
281     loadSelect();
282     triggerSearch();
283     return false;
284 }
285
286 function delimitTarget ()
287 {
288     var navi = document.getElementById('navi');
289     navi.innerHTML = '';
290     curFilter = null;
291     resetPage();
292     loadSelect();
293     triggerSearch();
294     return false;
295 }
296
297 function drawPager (pagerDiv)
298 {
299     //client indexes pages from 1 but pz2 from 0
300     var onsides = 6;
301     var pages = Math.ceil(totalRec / recPerPage);
302
303     var firstClkbl = ( curPage - onsides > 0 )
304         ? curPage - onsides
305         : 1;
306
307     var lastClkbl = firstClkbl + 2*onsides < pages
308         ? firstClkbl + 2*onsides
309         : pages;
310
311     var prev = '<span id="prev">&#60;&#60; ' + M('Prev') + '</span><b> | </b>';
312     if (curPage > 1)
313         prev = '<a href="#" id="prev" onclick="pagerPrev();">'
314         +'&#60;&#60; ' + M('Prev') + '</a><b> | </b>';
315
316     var middle = '';
317     for(var i = firstClkbl; i <= lastClkbl; i++) {
318         var numLabel = i;
319         if(i == curPage)
320             numLabel = '<b>' + i + '</b>';
321
322         middle += '<a href="#" onclick="showPage(' + i + ')"> '
323             + numLabel + ' </a>';
324     }
325
326     var next = '<b> | </b><span id="next">' + M('Next') + ' &#62;&#62;</span>';
327     if (pages - curPage > 0)
328         next = '<b> | </b><a href="#" id="next" onclick="pagerNext()">'
329         + M('Next') + ' &#62;&#62;</a>';
330
331     var predots = '';
332     if (firstClkbl > 1)
333         predots = '...';
334
335     var postdots = '';
336     if (lastClkbl < pages)
337         postdots = '...';
338
339     pagerDiv.innerHTML += '<div style="float: clear">'
340         + prev + predots + middle + postdots + next + '</div><hr/>';
341 }
342
343 function showPage (pageNum)
344 {
345     curPage = pageNum;
346     my_paz.showPage( curPage - 1 );
347 }
348
349 // simple paging functions
350
351 function pagerNext() {
352     if ( totalRec - recPerPage*curPage > 0) {
353         my_paz.showNext();
354         curPage++;
355     }
356 }
357
358 function pagerPrev() {
359     if ( my_paz.showPrev() != false )
360         curPage--;
361 }
362
363 // swithing view between targets and records
364
365 function switchView(view) {
366
367     var targets = document.getElementById('mkwsTargets');
368     var records = document.getElementById('mkwsRecords');
369
370     switch(view) {
371         case 'targets':
372             targets.style.display = "block";
373             records.style.display = "none";
374             break;
375         case 'records':
376             targets.style.display = "none";
377             records.style.display = "block";
378             break;
379         default:
380             alert('Unknown view.');
381     }
382 }
383
384 // detailed record drawing
385 function showDetails (prefixRecId) {
386     var recId = prefixRecId.replace('rec_', '');
387     var oldRecId = curDetRecId;
388     curDetRecId = recId;
389
390     // remove current detailed view if any
391     var detRecordDiv = document.getElementById('det_'+oldRecId);
392     // lovin DOM!
393     if (detRecordDiv)
394       detRecordDiv.parentNode.removeChild(detRecordDiv);
395
396     // if the same clicked, just hide
397     if (recId == oldRecId) {
398         curDetRecId = '';
399         curDetRecData = null;
400         return;
401     }
402     // request the record
403     my_paz.record(recId);
404 }
405
406 function replaceHtml(el, html) {
407   var oldEl = typeof el === "string" ? document.getElementById(el) : el;
408   /*@cc_on // Pure innerHTML is slightly faster in IE
409     oldEl.innerHTML = html;
410     return oldEl;
411     @*/
412   var newEl = oldEl.cloneNode(false);
413   newEl.innerHTML = html;
414   oldEl.parentNode.replaceChild(newEl, oldEl);
415   /* Since we just removed the old element from the DOM, return a reference
416      to the new element, which can be used to restore variable references. */
417   return newEl;
418 };
419
420 function renderDetails(data, marker)
421 {
422     var details = '<div class="details" id="det_'+data.recid+'"><table>';
423     if (marker) details += '<tr><td>'+ marker + '</td></tr>';
424     if (data["md-title"] != undefined) {
425         details += '<tr><td><b>' + M('Title') + '</b></td><td><b>:</b> '+data["md-title"];
426         if (data["md-title-remainder"] !== undefined) {
427               details += ' : <span>' + data["md-title-remainder"] + ' </span>';
428         }
429         if (data["md-title-responsibility"] !== undefined) {
430               details += ' <span><i>'+ data["md-title-responsibility"] +'</i></span>';
431         }
432           details += '</td></tr>';
433     }
434     if (data["md-date"] != undefined)
435         details += '<tr><td><b>' + M('Date') + '</b></td><td><b>:</b> ' + data["md-date"] + '</td></tr>';
436     if (data["md-author"] != undefined)
437         details += '<tr><td><b>' + M('Author') + '</b></td><td><b>:</b> ' + data["md-author"] + '</td></tr>';
438     if (data["md-electronic-url"] != undefined)
439         details += '<tr><td><b>URL</b></td><td><b>:</b> <a href="' + data["md-electronic-url"] + '" target="_blank">' + data["md-electronic-url"] + '</a>' + '</td></tr>';
440     if (data["location"][0]["md-subject"] != undefined)
441         details += '<tr><td><b>' + M('Subject') + '</b></td><td><b>:</b> ' + data["location"][0]["md-subject"] + '</td></tr>';
442     if (data["location"][0]["@name"] != undefined)
443         details += '<tr><td><b>' + M('Location') + '</b></td><td><b>:</b> ' + data["location"][0]["@name"] + " (" +data["location"][0]["@id"] + ")" + '</td></tr>';
444     details += '</table></div>';
445     return details;
446 }
447
448 /*
449  * All the HTML stuff to render the search forms and
450  * result pages.
451  */
452 function mkws_html_all(config) {
453
454     /* default mkws config */
455     var mkws_config_default = {
456         sort: [["relevance"], ["title:1", "title"], ["date:0", "newest"], ["date:1", "oldest"]],
457         perpage: [10, 20, 30, 50],
458         sort_default: "relevance",
459         perpage_default: 20,
460         query_width: 50,
461         switch_menu: true,      /* show/hide Records|Targets menu */
462         lang_menu: true,        /* show/hide language menu */
463         lang_display: [],       /* display languages links for given languages, [] for all */
464         termlist_menu: true,    /* show/hide termlist */
465         debug: 0,     /* debug level for development: 0..2 */
466
467         dummy: "dummy"
468     };
469
470     /* set global debug flag early */
471     if (config.debug !== 'undefined') {
472         mkws_debug = config.debug;
473     } else if (mkws_config_default.debug !== 'undefined') {
474         mkws_debug = mkws_config_default.debug;
475     }
476     
477     /* override standard config values by function parameters */
478     for (var k in mkws_config_default) {
479         if (typeof config[k] === 'undefined')
480            mkws_config[k] = mkws_config_default[k];
481         debug("Set config: " + k + ' => ' + mkws_config[k]);
482     }
483
484     if (mkws_config.query_width < 5 || mkws_config.query_width > 150) {
485         debug("Reset query width: " + mkws_config.query_width);
486         mkws_config.query_width = 50;
487     }
488    
489     mkws_set_lang(mkws_config); 
490     if (mkws_config.lang_menu)
491         mkws_html_lang(mkws_config); 
492
493     // For some reason, doing this programmatically results in
494     // document.search.query being undefined, hence the raw HTML.
495     debug("HTML search form");
496     $("#mkwsSearch").html('\
497     <form id="searchForm" name="search" action="" >\
498       <input id="query" type="text" size="' + mkws_config.query_width + '" />\
499       <input id="button" type="submit" value="' + M('Search') + '" />\
500     </form>');
501
502     debug("HTML records");
503     $("#mkwsRecords").html('\
504       <table width="100%" border="0" cellpadding="6" cellspacing="0">\
505         <tr>\
506           <td width="250" valign="top">\
507             <div id="termlist"></div>\
508           </td>\
509           <td valign="top">\
510             <div id="ranking">\
511               <form name="select" id="select" action="" >\
512         ' + M('Sort by') + mkws_html_sort(config) + '\
513         ' + M('and show') + ' ' + mkws_html_perpage(config) + '\
514         ' + M('per page') + '.\
515        </form>\
516             </div>\
517             <div id="pager"></div>\
518             <div id="navi"></div>\
519             <div id="results"></div>\
520           </td>\
521         </tr>\
522       </table>');
523
524     mkws_html_switch(config);
525     if (mkws_config.use_service_proxy)
526         mkws_service_proxy_auth(config.service_proxy_auth);
527
528     domReady();
529 }
530
531 function mkws_set_lang(mkws_config)  {
532     var lang = jQuery.parseQuerystring().lang || mkws_config.lang || "";
533     if (!lang || !mkws_locale_lang[lang]) {
534         mkws_config.lang = ""
535     } else {
536         mkws_config.lang = lang;
537     }
538     
539     debug("Locale language: " + (mkws_config.lang ? mkws_config.lang : "none"));
540     return mkws_config.lang;
541 }
542
543 function mkws_html_switch(config) {
544     debug("HTML switch");
545     
546     $("#mkwsSwitch").html($("<a/>", {
547         href: '#',
548         onclick: "switchView(\'records\')",
549         text: "Records"
550     }));
551     $("#mkwsSwitch").append($("<span/>", { text: " | " }));
552     $("#mkwsSwitch").append($("<a/>", {
553         href: '#',
554         onclick: "switchView(\'targets\')",
555         text: "Targets"
556     }));
557
558     debug("HTML targets");
559     $("#mkwsTargets").html('\
560       <div id="bytarget">\
561        No information available yet.\
562       </div>');
563     $("#mkwsTargets").css("display", "none");
564
565     if (!config.switch_menu) {
566         debug("disable switch menu");
567         $("#mkwsSwitch").css("display", "none");
568     }
569 }
570
571 function mkws_html_sort(config) {
572     debug("HTML sort");
573     var sort_html = '<select name="sort" id="sort">';
574
575     for(var i = 0; i < config.sort.length; i++) {
576         var key = config.sort[i][0];
577         var val = config.sort[i].length == 1 ? config.sort[i][0] : config.sort[i][1];
578
579         sort_html += '<option value="' + key + '"';
580         if (key == config.sort_default) {
581             sort_html += ' selected="selected"';
582         }
583         sort_html += '>' + val + '</option>';
584     }
585     sort_html += '</select>';
586
587     return sort_html;
588 }
589
590 function mkws_html_perpage(config) {
591     debug("HTML perpage");
592     var perpage_html = '<select name="perpage" id="perpage">';
593
594     for(var i = 0; i < config.perpage.length; i++) {
595         var key = config.perpage[i];
596
597         perpage_html += '<option value="' + key + '"';
598         if (key == config.perpage_default) {
599             perpage_html += ' selected="selected"';
600         }
601         perpage_html += '>' + key + '</option>';
602     }
603     perpage_html += '</select>';
604
605     return perpage_html;
606 }
607
608 /*
609  * Run service-proxy authentication in background (after page load).
610  * The username/password is configured in the apache config file
611  * for the site.
612  */
613 function mkws_service_proxy_auth(auth_url) {
614     if (!auth_url)
615         auth_url = "/service-proxy-auth";
616         
617     debug("Run service proxy auth URL: " + auth_url);
618
619     var jqxhr = jQuery.get(auth_url)
620         .fail(function() {
621             alert("service proxy authentication failed, give up!");
622         })
623         .success(function(data) {
624             if (!jQuery.isXMLDoc(data)) {
625                 alert("service proxy auth response document is not valid XML document, give up!");
626                 return;
627             }
628             var status = $(data).find("status");
629             if (status.text() != "OK") {
630                 alert("service proxy auth repsonse status: " + status.text() + ", give up!");
631                 return;
632             }
633         });
634 }
635
636 /* create locale language menu */
637 function mkws_html_lang(mkws_config) {
638     var lang_default = "en";
639     var lang = mkws_config.lang || lang_default;
640     var list = [];
641
642     /* display a list of configured languages, or all */
643     var lang_display = mkws_config.lang_display || [];
644     var hash = {};
645     for (var i = 0; i < lang_display.length; i++) {
646         hash[lang_display[i]] = 1;
647     }
648     
649     for (var k in mkws_locale_lang) {
650         if (hash[k] == 1 || lang_display.length == 0)
651             list.push(k);
652     }
653
654     // add english link
655     if (lang_display.length == 0 || hash[lang_default] == 1)
656         list.push(lang_default);
657
658     debug("Language menu for: " + list.join(", "));
659
660     /* the HTML part */
661     var data = "";    
662     for(var i = 0; i < list.length; i++) {
663         var l = list[i];
664         
665         if (data)
666             data += ' | ';
667             
668         if (lang == l) {
669             data += l;
670         } else {
671             data += ' <a href="?lang=' + l + '">' + l + '</a> '
672         }
673     }
674     
675     $("#mkwsLang").html(data);
676 }
677
678 /* locale */
679 function M(word) {
680     var lang = mkws_config.lang;
681
682     if (!lang || !mkws_locale_lang[lang])
683         return word;
684
685     return mkws_locale_lang[lang][word] ? mkws_locale_lang[lang][word] : word;
686 }
687
688 /* implement jQuery.parseQuerystring() for parsing URL parameters */
689 jQuery.extend({
690   parseQuerystring: function() {
691     var nvpair = {};
692     var qs = window.location.search.replace('?', '');
693     var pairs = qs.split('&');
694     $.each(pairs, function(i, v){
695         var pair = v.split('=');
696         nvpair[pair[0]] = pair[1];
697     });
698     return nvpair;
699   }, 
700   pazpar2: function(data) {
701         document.write('<div id="mkwsSwitch"></div>\
702     <div id="mkwsLang"></div>\
703     <div id="mkwsSearch"></div>\
704     <div id="mkwsRecords"></div>\
705     <div id="mkwsTargets"></div>\
706     <div id="footer">\
707       <div id="mkwsStat"></div>\
708       <span>Powered by MKWS &copy; 2013 <a href="http://www.indexdata.com">Index Data</a></span>\
709     </div>');
710
711     mkws_html_all(mkws_config);
712   }
713 });
714
715 function debug(string) {
716     if (!mkws_debug)
717         return;
718
719     if (typeof console === "undefined" || typeof console.log === "undefined") { /* ARGH!!! old IE */
720         return;
721     }
722
723     // you need to disable use strict at the top of the file!!!
724     if (mkws_debug >= 3) {
725         console.log(arguments.callee.caller);
726     } else if (mkws_debug >= 2) {
727         console.log(">>> called from function " + arguments.callee.caller.name + ' <<<');
728     }
729     console.log(string);
730 }
731
732 /* magic */
733 $(document).ready(function() { mkws_html_all(mkws_config) });