<!DOCTYPE html>
<html>
  <head>
		<% my $plain_title = $title; $plain_title=~s/<[^>]+>//g; %>
    <title><%= $plain_title  %>:<%= $word %> · IDS word vector analysis</title>
%# Result pages are computed for one word each and there is one for every
%# word of the vocabulary, so they are not something to index or to follow.
% if (stash 'noindex') {
    <meta name="robots" content="noindex, nofollow">
% }
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Roboto+Condensed" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src = "https://cdn.datatables.net/1.13.10/js/jquery.dataTables.min.js"></script>
    <script src = "https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
    <script src = "https://cdn.datatables.net/plug-ins/1.13.10/sorting/scientific.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>

     <script src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.5.0/ical.js"
      integrity="sha512-UxWd2RMDGpYwYuDeU2Fs+nd51gw4ZLQY0D9wWZ3NuanNSk6QQmWCZ6C+rvI0lJ/b/nZtBQ8RVESA9DN9r65dUg=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"
      integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.10/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/derekovecs/css/derekovecs.css">
    <script
      src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
      integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
      crossorigin="anonymous"></script>
    <script>
     MathJax.Hub.Config({
       config: ["MMLorHTML.js"],
       jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML", "output/PreviewHTML"],
       extensions: ["tex2jax.js","mml2jax.js","MathMenu.js","MathZoom.js", "fast-preview.js", "AssistiveMML.js", "a11y/accessibility-menu.js"],
       TeX: {
         extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
       }
     });     
     var urlParams = new URLSearchParams(window.location.search);
     var currentWords = urlParams.get("word");
     var CIIsearchWords = (currentWords && (currentWords.includes(" ") || currentWords.includes("|")) ? '('+currentWords.replace(/[ |]+/g, " oder ")+')' : currentWords);
     var collocatorTable = null;
     var plainTitle ="<%= $plain_title %>"  
     var korapPath="/";
     if (plainTitle.match(/-en/)) {
       korapPath="/instance/english";
     }
     var korapVC="";
     if (plainTitle.match(/WUDD/i)) {
       korapVC="&collection=corpusSigle+%3D+%2FW%5BDU%5DD17%2F";
       korapPath="/instance/test";
     }
     
     $(document).ready(function() {
       insertCalendarEvents(document.getElementById('downtimes'), '/derekovecs/getDowntimeCalendar' );

       $('#firstable').hide();
       //Set up a callback to hear back when MathJax is done rendering the equations
       //  it finds
       $('#ccd').load(
         '@Url.Action("ActionResultMethod","ControllerName",{controller parameters})', 
         function () {
           MathJax.Hub.Queue(
             ["Typeset",MathJax.Hub,"ccd"],
             function () {
               $("#mi_tt").attr("title",$("#pmi_ttt").html());
               $("#lfmd_tt").attr("title",$("#lfmd_ttt").html());
               $("#md_tt").attr("title",$("#md_ttt").html());
               $("#npmi_tt").attr("title",$("#npmi_ttt").html());
               $("#ll_tt").attr("title",$("#ll_ttt").html());
               $("#logdice_tt").attr("title",$("#logdice_ttt").html());
               $("#logdiceaf_tt").attr("title",$("#logdiceaf_ttt").html());
             }
           );
         });          

       //set things up so that we can shove raw html into what is shown in the tooltip; 
       //  in this case, we will have already put into the title attribute the html that 
       //  contains the MathJax rendered equations (via what we do in the callback).
       $(function () {
         $(document).tooltip({
           content: function () {
             return $(this).prop('title');
           }
         });
       });

       $("input").bind("keydown", function(event) {
         // track enter key
         var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
         if (keycode == 13) { // keycode for enter key
           // force the 'Enter Key' to implicitly click the Update button
           document.getElementById('SEARCH').click();
           return false;
         } else  {
           return true;
         }});

       var collocatorTable_activated = false;
       $( "#tabs" ).on( "tabsactivate", function( event, ui ) {
         if (localStorage) localStorage['tab'] = ui.newTab.index();
         if(ui.newTab.index() == 3 && !collocatorTable_activated) {
           classicCollocatorTable.columns.adjust();
           collocatorTable.columns.adjust();
           collocatorTable_activated = true;
         }
       });

       $(function(){
         $("#SEARCH").click(function() {
           window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
         });
       });

       function changeCharColor(txt, heat, word) {
         var newText = "";
         for (var i=0, l=txt.length; i<l; i++) {
           newText += (i == 5 ? txt.charAt(i) : "<a href=\"<%= $korap_url  %>" + korapPath + '/?ql=cosmas2&q=' +
                                                CIIsearchWords + ' /' +  (i > 5? '%2B' : '-') + 'w' +
                                                Math.abs(i-5) + ':' +  Math.abs(i-5) + ',s0 ' + word + korapVC +
                                                '" target="korap"><span style="background-color:' +
                                                getHeatColor(heat[i]/maxHeat)+'">'+txt.charAt(i)+'</span></a>');
         }
         return newText;
       }

       function getHeatColor(value) {
         var hue=((1-value)*120).toString(10);
         return ["hsl(",hue,",90%,70%)"].join("");
       }

       function bitvec2window(n, heat, word) {
         var str = n.toString(2).padStart(10, "0")
                    .replace(/^([0-9]{5})/, '$1x')
                    .replace(/0/g, '·')
                    .replace(/1/g, '+');
         return changeCharColor(str, heat, word);
       }

       % use Mojo::ByteStream 'b';
       var paraResults = <%= b(Mojo::JSON::to_json($lists)) %>;
       var urlprefix =  new URLSearchParams(window.location.search);
       if (paraResults.length > 0  && paraResults[0] != null) {
         var nvecs = [],
             nwords = [],
             nranks = [],
             nmarked = [];
         for(var i = 0; i < paraResults.length; i++) {
           nwords = nwords.concat(paraResults[i].map(function(a){return a.word;}));
           nvecs = nvecs.concat(paraResults[i].map(function(a){return a.vector;}));
           nranks = nranks.concat(paraResults[i].map(function(a){return a.rank;}));
           nmarked = nmarked.concat(paraResults[i].map(function(a){return a.marked;}));
         }
         showMap({target: " "+urlParams.get('word')+" ", mergedEnd: <%= $mergedEnd %>, words: nwords, vecs: nvecs, ranks: nranks, marked: nmarked} );
         var t = $('#firsttable').DataTable({
           data: [].concat.apply([], paraResults),
           "sScrollY": "780px",
           "bScrollCollapse": true,
           "bPaginate": false,
           "bJQueryUI": true,
           "dom": '<"top">rt<"bottom"flpB><"clear">',
           buttons: [
            { extend: 'copyHtml5',  text: '<i class="fa fa-files-o"></i>',  titleAttr: 'Copy' },
            { extend: 'csvHtml5', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV', filename: currentWords+'_para_neighbours' },
            { extend: 'excelHtml5', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel', filename: currentWords+'_para_neighbours', exportOptions: { columns: ':visible' } ,
            }
            ],
           "initComplete":function(settings, json) {
             $('td.paradigmator a').on('mousedown', function(e) {
               return paradigmatorClick(e, paraResults[0][0].word, this.childNodes["0"].textContent);
             });
           },
           "columns": [
             { "data": "rank", type: "allnumeric" },
             { "data": "dist",  render: function ( data, type, row ) {return data.toFixed(3) }},
             { "data": "word",  class: "paradigmator", render: function ( data, type, row ) {
               urlprefix.set("word", data); return  '<a class="' + getMergedClass(row.rank) + '" href="?' + urlprefix + '">' + data + '</a>' 
             }}
           ],
           "columnDefs": [
             { className: "dt-right", "targets": [0,1] },
             { "searchable": false,
               "orderable": false,
               "targets": 0
             },
             { "orderSequence": [ "desc" ], "targets": [ 1 ] },
             { "orderSequence": [ "asc", "desc" ], "targets": [ 2 ] },
           ],
           "oLanguage": {
             "sSearch": "Filter: "
           },
           "order": [[ 1, 'desc' ]],
         } );

         t.on( 'order.dt search.dt', function () {
           t.column(0, {order:'applied'}).nodes().each( function (cell, i) {
             cell.innerHTML = i+1;
           } );
         } ).draw();

         $( "#first" ).clone().prependTo( "#tabs-2" );

       }


       var collocatorData = <%= b(Mojo::JSON::to_json($collocators)) %>;
       var maxHeat; // = Math.max.apply(Math,collocatorData.map(function(o){return o.cprob;}))

       if(typeof data !== 'undefined' && data.mergedEnd > 0) {
          vocabDistanceTable = makeVocabDistanceTable("#vocabdistt", baseURL);
       }

       if (collocatorData != null) {
         maxHeat = Math.max.apply(Math,collocatorData.map(function(o){return Math.max.apply(Math,o.heat);}))
         collocatorTable = $('#secondtable').DataTable({
           data: collocatorData,
           "sScrollY": "780px",
           "bScrollCollapse": true,
           "bPaginate": false,
           "bJQueryUI": true,
           "dom": '<"top">rt<"bottom"flpB><"clear">',
           buttons: [
            { extend: 'copyHtml5',  text: '<i class="fa fa-files-o"></i>',  titleAttr: 'Copy' },
            { extend: 'csvHtml5', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV', filename: currentWords+'_syn_neighbours' },
            { extend: 'excelHtml5', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel', filename: currentWords+'_syn_neighbours', exportOptions: { columns: ':visible' } ,
            }
          ],
          "columns": [
             { "data": "rank", type: "allnumeric" },
             { "data": "pos", width: "7%", sClass: "dt-center mono compact", render: function ( data, type, row ) {return bitvec2window(data, row.heat, row.word) }},
             { "data": "max",  render: function ( data, type, row ) {return data.toFixed(3) }},
             { "data": "average", render: function ( data, type, row ) {return data.toFixed(3) }},
             { "data": "prob", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) }  },
             { "data": "cprob", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) }  },
             { "data": "overall", type: "scientific", render: function ( data, type, row ) {return data.toExponential(3) } },
             { "data": "word",  sClass: "collocator" },
             { "data": "rank", type: "allnumeric" }
           ],
           "columnDefs": [
             { className: "dt-right", "targets": [0,2,3,4,5,6] },
             { className: "dt-center", "targets": [ 1] },
             { "searchable": false,
               "orderable": false,
               "targets": [0, 8]
             },
             { "type": "scientific", targets: [2,3,4,5,6] },
             { "orderSequence": [ "desc" ], "targets": [ 2, 3, 4, 5, 6 ] },
             { "orderSequence": [ "asc", "desc" ], "targets": [ 1, 7 ] },
             { "targets": [8], "visible": false }
           ],
           "oLanguage": {
             "sSearch": "Filter: "
           },
           "order": [[ 4, 'desc' ]],
         } );
         $.ajaxSetup({
           type: 'POST',
           timeout: 30000,
           error: function(xhr) {
             $('#display_error')
               .html('Error: ' + xhr.status + ' ' + xhr.statusText);
           }
         });


         if($('#sprofiles').length) {
           similarProfileTable = $('#sprofiles').DataTable({
             ajax: {
               method: "GET",
               url: '/derekovecs/getSimilarProfiles',
               dataType: 'json',
               dataSrc: "",
               timeout: 30000,
               data: { w: paraResults[0][0].rank }
             },
             "initComplete":function(settings, json){
               $('td.paradigmator a').on('mousedown', function(e) {
                 if (e.which === 2) {
                   e.preventDefault();
                   queryKorAPalternatives(paraResults[0][0].word, this.childNodes["0"].textContent);
                   return false;
                 }
               });
             },
             "sScrollY": "780px",
             "bScrollCollapse": true,
             "bPaginate": false,
             "bJQueryUI": true,
             "dom": '<"top">rt<"bottom"flp><"clear">',
            "columns": [
               { "data": "v",  render: function ( data, type, row ) {return data.toFixed(3) }},
               { "data": "w",  sClass: "paradigmator", render: function ( data, type, row ) {urlprefix.set("word", data); return  '<a href="?' + urlprefix + '">' + data + '</a>' } }
             ],
             "columnDefs": [
               { className: "dt-right", "targets": [0] },
             ],
             "oLanguage": {
               "sSearch": "Filter: "
             },
             "order": [[ 0, 'desc' ]],
           });
         }

         //         var filterQuot = /(^quot?=[A-Z])|(quot$)/g;
         var filterQuot = /^quot/;
         var ccResult;
         var baseURL =  window.location.pathname.replace(/[/]$/, '')
         classicCollocatorTable = makeClassicCollocatorTable('#classicoloctable', baseURL, paraResults[0][0].rank)

         $('#show-details').change(function (e) {
           var columns = classicCollocatorTable.columns(".detail");
           if(this.checked) {
             columns.visible(true);
             $("#ccd").css('width', 'auto');
           } else {
             columns.visible(false);
             $("#ccd").css('width', '680px');
           }
           classicCollocatorTable.columns.adjust().draw();
         } );

         $("td.collocator").click(function(){
           queryKorAPCII(this.textContent + " /w1:5,s0 " + CIIsearchWords);
         });

         collocatorTable.on( 'order.dt search.dt', function () {
           collocatorTable.column(0, {order:'applied'}).nodes().each( function (cell, i) {
             cell.innerHTML = i+1;
           } );
         }).draw();
       }

       if (localStorage && !window.location.hash) { // let's not crash if some user has IE7
         var index = parseInt(localStorage['tab']||'0');
         $("#tabs").tabs({ active: index });
       }
       $("#tabs").css("visibility", "visible"); // now we can show the tabs
     });

     $(function(){
       $("#dropdownoptions").dialog({
         title: "<%= loc 'Options' %>",
         autoOpen: false,
         modal: false,
         draggable: false,
         height: "auto",
         width: "auto",
         resizable: false,
         buttons: {
           "<%= loc 'Cancel'%>": function() {
             $( this ).dialog( "close" );
           },
           "<%= loc 'Apply' %>": function() {
             window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
           }
         }
       });
     });

     $(function(){
       $("#showoptions").click(function(){
         $("#dropdownoptions").dialog("open");
         var target = $(this);
         $("#dropdownoptions").dialog("widget").position({
           my: 'left bottom',
           at: 'left bottom',
           of: target
         });
       });
     });

     $( function() {
       $( "#no_iterations" ).spinner({
         spin: function( event, ui ) {
           if ( ui.value < 1000 ) {
             $( this ).spinner( "value", 1000 );
             return false;
           } else if ( ui.value > 10000 ) {
             $( this ).spinner( "value", 10000 );
             return false;
           }
         }
       });
     } );

     $( function() {
       $( "#neighbours" ).spinner({
         spin: function( event, ui ) {
           if ( ui.value < 0 ) {
             $( this ).spinner( "value", 0 );
             return false;
           } else if ( ui.value > 200 ) {
             $( this ).spinner( "value", 200 );
             return false;
           }
         }
       });
     } );

     $( function() {
       $( "#cutoff" ).spinner({
         spin: function( event, ui ) {
           if ( ui.value < 100000 ) {
             $( this ).spinner( "value", 100000 );
             return false;
           } else if ( ui.value > 2000000 ) {
             $( this ).spinner( "value", 2000000 );
             return false;
           }
         }
       });
     } );

     $( function() {
       $( "#tabs" ).tabs().addClass('tabs-min');
     } );

     $( function() {
       $( ".controlgroup-vertical" ).controlgroup({
         "direction": "vertical"
       });
     } );

     $(function() {
       $( document ).tooltip({
         content: function() {
           return $(this).attr('title');
         }}
       )
     });

     $(function () {
       $(document).tooltip({
         content: function () {
           return $(this).prop('title');
         },
         show: null, 
         close: function (event, ui) {
           ui.tooltip.hover(
             function () {
               $(this).stop(true).fadeTo(400, 1);
             },    
             function () {
               $(this).fadeOut("400", function () {
                 $(this).remove();
               })
             });
         }
       });
     });
    </script>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/derekovecs/js/calendar-events.js"></script>
    <script src="/derekovecs/js/tsne.js"></script>
    <script src="/derekovecs/js/som.js"></script>
    <script src="/derekovecs/js/labeler.js"></script>
    <script src="/derekovecs/js/derekovecs.js"></script>
    <script>

     var opt = {epsilon: <%= $epsilon %>, perplexity: <%= $perplexity %>},
         mapWidth = 800, // width map
         mapHeight = 800,
         jitterRadius = 7;

     var T = new tsnejs.tSNE(opt); // create a tSNE instance

     var Y;

     var data;
     var labeler;

     function applyJitter() {
       svg.selectAll('.tsnet')
          .data(labels)
          .transition()
          .duration(50)
          .attr("transform", function(d, i) {
            T.Y[i][0] = (d.x - mapWidth/2 - tx)/ss/20;
            T.Y[i][1] = (d.y - mapHeight/2 - ty)/ss/20;
            return "translate(" +
                                                                                     (d.x) + "," +
                                                                                     (d.y) + ")";
          });
     }

     function updateEmbedding() {
       var Y = T.getSolution();
       svg.selectAll('.tsnet')
          .data(data.words)
          .attr("transform", function(d, i) {
            return "translate(" +
                                                                                      ((Y[i][0]*20*ss + tx) + mapWidth/2) + "," +
                                                                                      ((Y[i][1]*20*ss + ty) + mapHeight/2) + ")"; });
     }

     var svg;
     var labels = [];
     var anchor_array = [];
     var text;

     function getMergedClass(i) {
       if(typeof data !== 'undefined' && i > data.mergedEnd) {
         return " merged"
       } else {
         return "";
       }
     }

     function getRankTooltip(i) {
       if(data.mergedEnd) {
         if(data.ranks[i] < data.mergedEnd) {
           return "rank: "+i +"  "+"freq. rank: "+(data.ranks[i]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
         } else {
           return "rank: "+i +"  "+"freq. rank: "+(data.ranks[i]-data.mergedEnd).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " (merged vocab)";
         }
       } else {
         return "rank: "+i +"  "+"freq. rank: "+data.ranks[i].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       }
     }

     function drawEmbedding() {
       var urlprefix =  new URLSearchParams(window.location.search);
       urlprefix.delete("word");
       urlprefix.append("word","");

       $("#embed").empty();
       var div = d3.select("#embed");

       // get min and max in each column of Y
       var Y = T.Y;

       svg = div.append("svg") // svg is global
                .attr("width", mapWidth)
                .attr("height", mapHeight);

       var g = svg.selectAll(".b")
                  .data(data.words)
                  .enter().append("g")
                  .attr("class", "tsnet");

       g.append("a")
        .attr("xlink:href", function(word) {
          return "?"+urlprefix+word; })
        .attr("class", function(d, i) {
          var res="";
          if(data.marked[i]) {
            res="marked ";
          }
          if(data.target.indexOf(" "+d+" ") >= 0) {
            res += "target";
          } 
          if(data.mergedEnd && data.ranks[i] >= data.mergedEnd) {
            return res+" merged";
          } else {
            return res;
          }
        })
        .attr("title", function(d, i) {
          return getRankTooltip(i);
        })
        .append("text")
        .attr("text-anchor", "top")
        .attr("font-size", 12)
        .text(function(d) { return d; });

       g.append("svg:title")
        .text(function(d, i) {
		      return getRankTooltip(i);
	      });

       var zoomListener = d3.behavior.zoom()
                            .scaleExtent([0.1, 10])
                            .center([0,0])
                            .on("zoom", zoomHandler);
       zoomListener(svg);
     }

     var tx=0, ty=0;
     var ss=1;
     var iter_id=-1;

     function zoomHandler() {
       tx = d3.event.translate[0];
       ty = d3.event.translate[1];
       ss = d3.event.scale;
       updateEmbedding();
     }

     var stepnum = 0;

     function stopStep() {
       clearInterval(iter_id);
       text = svg.selectAll("text");

       // jitter function needs different data and co-ordinate representation
       labels = d3.range(data.words.length).map(function(i) {
         var x = (T.Y[i][0]*20*ss + tx) + mapWidth/2;
         var y = (T.Y[i][1]*20*ss + ty) + mapHeight/2;
         anchor_array.push({x: x, y: y, r: jitterRadius});
         return {
           x: x,
           y: y,
           name: data.words[i]
         };
       });

       // get the actual label bounding boxes for the jitter function
       var index = 0;
       text.each(function() {
         labels[index].width = this.getBBox().width;
         labels[index].height = this.getBBox().height;
         index += 1;
       });


       //  setTimeout(updateEmbedding, 1);
       //  setTimeout(
       labeler =   d3.labeler()
                     .label(labels)
                     .anchor(anchor_array)
                     .width(mapWidth)
                     .height(mapHeight)
                     .update(applyJitter);
       //         .start(1000);

       iter_id = setInterval(jitterStep, 1);
     }

     var jitter_i=0;

     function jitterStep() {
       if(jitter_i++ > 100) {
         clearInterval(iter_id);
       } else {
         labeler.start2(10);
         applyJitter();
       }
     }

     var last_cost=1000;

     function step() {
       var i = T.iter;

       if(i > <%= $no_iterations %>) {
         stopStep();
       } else {
         var cost = Math.round(T.step() * 100000) / 100000; // do a few steps
         $("#cost").html("tsne iteration " + i + ", cost: " + cost.toFixed(5));
         if(i % 250 == 0 && cost >= last_cost) {
           stopStep();
         } else {
           last_cost = cost;
           updateEmbedding();
         }
       }
     }

     function showMap(j) {
       data=j;
       T.iter=0;
       iter_id = -1;
       last_cost=1000;
       T.initDataRaw(data.vecs); // init embedding
       drawEmbedding(); // draw initial embedding

       if(iter_id >= 0) {
         clearInterval(iter_id);
       }
       //T.debugGrad();
       iter_id = setInterval(step, 1);
       if(true) { // (<%= $show_som %>) {
         makeSOM(j, <%= $no_iterations %>);
       }
     }
     var queryword;

     function showCollocatorSOM() {
       var baseURL =  window.location.pathname.replace(/[/]$/, '')
       if (collocatorTable) {
         var ctableData = collocatorTable.rows().data();
         var nwords = [],
             nranks = [];
         for (var i=0; i < ctableData.length && i < 100; i++) {
           nranks.push(ctableData[i].rank);
           nwords.push(ctableData[i].word);
         }
         $.post(baseURL+'/getVecsByRanks',
                JSON.stringify(nranks),
                function(data, status){
                  showMap({target: " "+urlParams.get('word')+" ", mergedEnd: <%= $mergedEnd %>, words: nwords, vecs: data, ranks: nranks, marked: Array(100).fill(false)} );
                }, 'json');
       }
     }

     function onload() {
       queryword = document.getElementById('word');
     }

     function queryKorAP() {
       window.open("<%= $korap_url  %>" + korapPath + '?q='+queryword.value+korapVC, 'KorAP');
     }

     function queryKorAPCII(query) {
       window.open("<%= $korap_url  %>" +korapPath + '?ql=cosmas2&q='+query+korapVC, 'KorAP');
     }

    </script>
  </head>
  <body onload="onload()">    <div style="display:none;" id="pmi_ttt">Pointwise mutual information: $$\text{MI}=\text{MI}=\log_2\frac{p(w_1,w_2)}{p(w_1) p(w_2)}$$<p class="citation">Church, K. W. and Hanks, P. (1990): Word association norms, mutual information, and lexicography. Comput. Linguist. 16, 1 (March 1990), 22-29.</p></div>
    <div style="display:none;" id="md_ttt">Pointwise mutual information squared [1], also called mutual dependency [2]: $$\text{MI}^2=\text{MD}=\log_2\frac{p^2(w_1,w_2)}{p(w_1) p(w_2)}$$<p class="citation">[1] Daille, B. (1994): <a href="http://www.bdaille.com/index.php?option=com_docman&task=doc_download&gid=8&Itemid=">Approche mixte pour l’extraction automatique de terminologie: statistiques lexicales et filtres linguistiques</a>. PhD thesis, Université Paris 7.</p><p class="citation">[2] Thanopoulos, A., Fakotakis, N., Kokkinakis, G. (2002): <a href="http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.11.8101&rep=rep1&type=pdf">Comparative evaluation of collocation extraction metrics</a>. In: Proc. of LREC 2002: 620–625.</p></div>
    <div style="display:none;" id="lfmd_ttt">Pointwise mutual information cubed [1], also called log-frequency biased mutual dependency [2]: $$\text{MI}^3=\text{LFMD}=\log_2\frac{p^3(w_1,w_2)}{p(w_1) p(w_2)}$$<p class="citation">[1] Daille, B. (1994): <a href="http://www.bdaille.com/index.php?option=com_docman&task=doc_download&gid=8&Itemid=">Approche mixte pour l’extraction automatique de terminologie: statistiques lexicales et filtres linguistiques</a>. PhD thesis, Université Paris 7.</p><p class="citation">[2] Thanopoulos, A., Fakotakis, N., Kokkinakis, G. (2002): <a href="http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.11.8101&rep=rep1&type=pdf">Comparative evaluation of collocation extraction metrics</a>. In: Proc. of LREC 2002: 620–625.</p></div>
    <div style="display:none;" id="npmi_ttt">Normalized pointwise mutual information: $$\frac{\log_2\frac{p(w_1,w_2)}{p(w_1)p(w_2)}}{-\log_2(p(w_1,w_2))}$$<p class="citation">Bouma, Gerlof (2009): <a href="https://svn.spraakdata.gu.se/repos/gerlof/pub/www/Docs/npmi-pfd.pdf">Normalized (pointwise) mutual information in collocation extraction</a>. In Proceedings of GSCL.</p></div>
    <div style="display:none;" id="ll_ttt">Log-likelihood: $$2\sum_{ij}O_{ij}\log\frac{O_{ij}}{E_{ij}}$$<p class="citation">Dunning, T. (1993): Accurate methods for the statistics of surprise and coincidence. Comput. Linguist. 19, 1 (March 1993), 61-74.</p>
      <p class="citation">Evert, Stefan (2004): <a href="http://purl.org/stefan.evert/PUB/Evert2004phd.pdf">The Statistics of Word Cooccurrences: Word Pairs and Collocations.</a> PhD dissertation, IMS, University of Stuttgart. Published in 2005, URN urn:nbn:de:bsz:93-opus-23714.</p></div>
    <div style="display:none;" id="logdice_ttt">Log-Dice: $$14 + \log_2 \frac{2f_{1,2}}{f_1 + f_2}$$<p class="citation">Rychlý, Pavel (2008): <a href="http://www.fi.muni.cz/usr/sojka/download/raslan2008/13.pdf">A lexicographer-friendly association score.</a> In Proceedings of Recent Advances in Slavonic Natural Language Processing, RASLAN, 6–9, 2008</p></div>
    <div style="display:none;" id="logdiceaf_ttt">Log-Dice using "auto-focus", i.e. the highest value reached by any – not necessarily contiguous – selection \(S\) of positions: $$\max_S \left(14 + \log_2 \frac{2f_{1,2}(S)}{f_2 + f_1|S|}\right)$$ Dividing by the width of the selection makes the measure sensitive to how concentrated a pair is, which is what distinguishes actual collocations from words that merely occur in the same contexts. Note that LDaf is therefore not on the same scale as LD and can be higher or lower than it.</div>
	  <div id="ids_logo">
		  <a href="http://www.ids-mannheim.de/" target="_blank"><img src="/derekovecs/img/IDS-neu_farbig.svg" alt="Leibniz-Institut für Deutsche Sprache"/></a>
	  </div>
     <div id="header">
      <div id="pagetitle">
        <h1>DeReKoVecs</h1>
        <h2><%== $title %></h2>
      </div>
      <div id="options"  class="widget">
        <form id="queryform">
          <input id="word" type="text" name="word"  placeholder="<%= loc 'words_to_be_searched' %>" value="<%= $word %>"
                 title="<%= loc 'search_description' %>"/>
          <input id="SEARCH" type="button" value="<%= loc 'SEARCH' %>">
          <input type="button" id="showoptions" name="showoptions" value="<%= loc 'Options' %>" />
        </form>
        <div id="dropdownoptions" style="display: none">
          <form id="optionsform">
            <div class="controlgroup-vertical">
              <label for="cutoff">cut-off</label>
              <input id="cutoff" type="text" name="cutoff" size="10"  value="<%= $cutoff %>" title="Only consider the most frequent x word forms.">
              <label for="dedupe">dedupe</label>
              <input id="dedupe" type="checkbox" name="dedupe" value="1" <%= ($dedupe ? "checked" : "") %> title="radically filter out any near-duplicates">
              % if($mergedEnd > 0) {
                <label for="sbf">backw.</label>
                <input id="sbf" type="checkbox" name="sbf" value="1" <%= ($searchBaseVocabFirst ? "checked" : "") %> title="If checkecked base vocabulary will be searched first. Otherwise merged vocabulray will be searched first.">
              % }
              <label for="neighbours">max. neighbours:</label>
              <input id="neighbours" size="4" name="n" value="<%= $no_nbs %>">
              <label for="no_iterations">max. iterations</label>
              <input id="no_iterations" name="N" size="4" value="<%= $no_iterations %>">
              <!-- <label for="dosom">SOM</label>
                   <input id="dosom" type="checkbox" name="som" value="1" <%= ($show_som ? "checked" : "") %>> -->
              % if($collocators) {
                <label for="sortby">window/sort</label>
                <select id="sortby" name="sort">
                  <option value="0"  <%= ($sort!=1 && $sort!=2? "selected":"") %>>auto focus</option>
                  <!-- <option value="1"  <%= ($sort==1? "selected":"") %>>any single position</option>
                       <option value="2" <%= ($sort==2? "selected":"") %>>whole window</option> -->
                </select>
              % }
              <input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
              <input id="show-details" type="checkbox" name="show-details" value="1" >
              <label for="show-details">
                Show details
              </label>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div id="topwrapper">
      <div style="visibility: hidden;" id="tabs">
        <ul>
          % if (defined $word && $word ne '') {
            % if($mergedEnd && $distantWords) {
            <li><a href="#tabs-0" title="Cos offsets of the words furthest away from their position in the reference corpus."">Offsets</a></li>
            % }
            <li><a href="#tabs-1"><%= loc 'paradigmatic_tsne' %></a></li>
            <li><a href="#tabs-2"><%= loc 'paradigmatic_som' %></a></li>
            <li><a href="#tabs-3"><%= loc 'syntagmatic' %></a></li>
          % }
          <li><a href="#tabs-4">Info</a></li>
        </ul>
        % if($mergedEnd && $distantWords) {
        <div id="tabs-0" style="display: flex;  padding: 5px; flex-flow: row wrap;">
          <div id="vocabdist" style="width: 230px; margin-bottom: 15px;">
            <table class="display compact nowrap" id="vocabdistt">
              <thead>
                <tr>
                  <th align="right">#</th><th id="cosD" align="right">D<sub>cos</sub></th><th align="left">word</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td align="right">
                  </td>
                  <td align="right">
                  </td>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        % }
        <div id="tabs-1" style="display: flex;  padding: 5px; flex-flow: row wrap;">
          % if($lists && (@$lists) > 0 && (@$lists)[0]) {
            <div id="wrapper">
              <div id="first" style="width: 230px; margin-bottom: 15px;">
                <table class="display compact nowrap" id="firsttable">
                  <thead>
                    <tr>
                      <th align="right">#</th><th align="right">S<sub>cos</sub></th><th align="left">similars by w2v</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td align="right">
                      </td>
                      <td align="right">
                      </td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              % if(0 && $haveSProfiles) {
                <div id="sprofilesdiv" style="width: 200px; padding-right: 10px;"> 
                  <table class="display compact nowrap" id="sprofiles">
                    <thead>
                      <tr>
                        <th align="right">cos</th><th align="left">similars by coll. profile</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td align="right">
                        </td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              %}
              <div id="second">
                <div id="embed">
                </div>
                <div id="cost">
                </div>
              </div>
            </div>
          % } elsif($word !~ /^\s*$/) {
          <div id="wrapper">
            <script>
             $( function() {
               $( "<%== loc 'notfounddialog' %>").dialog({
                 autoOpen: true,
                 modal: true,
                 draggable: false,
                 height: "auto",
                 width: "auto",
                 resizable: false,
                 buttons: {
                   "OK": function() {
                     $( this ).dialog( "close" );
                   } /* ,
                   "Apply": function() {
                     window.open($(location).attr('pathname')+'?'+$('form').serialize(), "_self");
                   }  */
                 }
               });
             });
            </script>
            <div id="not-found-dialog_de" style="display: none" title="Nicht gefunden">
              <p>FEHLER: Konnte "<%= $word %>" nicht finden.</p>
              <p>Wenn Sie der Meinung sind, dass es Vokabluar enthalten sein sollte, können Sie versuchen den Cut-Off-Parameter in den Optionen zu erhöhen.</p>
            </div>
            <div id="not-found-dialog_en" style="display: none" title="Not found">
              <p>ERROR: "<%= $word %>" not found in vocabluary.</p>
              <p>If you are sure you have spelled the word as intended, you can try to increase the cutoff parameter in the options menu.</p>
            </div>
          </div>
          % }
        </div>
        <div id="tabs-2" style="display: flex;  padding: 5px; flex-flow: row wrap;">
          % if(defined $word && $word ne "") {
            <div id="som2" style="width: 800;">
             <div id="sominfo1"><span id="somcolor1">   </span> <span id="somword1"> </span> <span id="somcolor2">   </span> <span id="somword2"> </span> <span id="somcolor3">   </span></div>
               <div id="sominfo" style="text-align: right">SOM iteration <span id="iterations">0</span></div>
            </div>
          % }
        </div>
        <div id="tabs-3" style="display: flex;  padding:5px; flex-flow: row wrap;">
          <div style="margin-right: 20px; margin-bottom: 10px;" id="secondt">
            <table class="display compact nowrap"  id="secondtable">
              <thead>
                <tr>
                  % if($collocators) {
                    <th>#</th>
                    <th align="center" title="Activation of the respective collocator in the columns around the target normalized by its maximum (red). Columns selected by the auto-focus funtion (which window of all possible column-combinations maximizes ⊥(a/c)?) are marked with +. Click on the column postions to lauch a KorAP query with target word and collocator in the respective position.">w'</th>
                    <th align="right" title="Maximum activation of the collocator anywhere in the output layer.">max(a)</th>
                    <th title="Average raw activation of the collocator in the columns selected by auto-focus." align="right">⟨a⟩</th>
                    <th title="Sum of activations over the selected colunns normalized by the total activation sum of the selected columns." align="right">Σa/Σw'</th>
                    <th title="Co-norm of the column-normalized activations over the colunns selected by the auto-focus." align="right">⊥(a/c)</th>
                    <th title="Sum of the activations over the whole window normalized by the total window sum (no auto-focus)." align="right">Σa/Σw</th>
                    <th align="left"><%= loc 'collocate_w2v' %></th>
                  % }
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td align="right">
                  </td>
                  <td align="right">
                  </td>
                  <td align="right">
                  </td>
                  <td align="right">
                  </td>
                  <td align="right">
                  </td>
                  <td align="right">
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div id="ccd" style="">
            <table class="display compact nowrap" id="classicoloctable">
              <thead>
                % if($collocators) {
                  <tr>
                    <th id="ll_tt">LL</th>
                    <th id="mi_tt">MI</th>
                    <th id="md_tt">MI²</th>
                    <th id="lfmd_tt">MI³</th>
                    <th id="npmi_tt">nPMI</th>
                    <th id="dice_tt">dice</th>
                    <th id="logdice_tt">LD</th>
                    <th id="logdiceaf_tt">LDaf</th>
                    <th id="delta_tt" title="Delta to log-Dice score in reference corpus. ⚠: If the collocate is not within the top 200 of the reference corpus, a reference value of min(lD)-0.1 is assumed.">Δ</th>
                    <th id="af_win" title="Positions around the target word that are selected by the auto-focus function are marked with ◾. Positions at which the collocate appears at least once are marked with ◽. LL, MI, MI², MI³ and nPMI are computed over all positions marked here, the attested ones, rather than over the whole context window, so that a collocate occurring in few positions is rated higher than one spread over many. LD does not depend on any window; LDaf is the auto-focus score of the ◾ positions and is not on the same scale as LD."><span class="regular"><%= loc 'af_window' %></span></th>
                    <th title="PMI³ restricted to left neighbour">l-PMI³</th>
                    <th title="PMI³ restricted to right neighbour">r-PMI³</th>
                    <th title="nPMI restricted to left neighbour">l-nPMI</th>
                    <th title="nPMI restricted to right neighbour">r-nPMI</th>
                    <th id="rawfreq_tt" title="raw frequency sum of collocation within window">raw</th>
                    <th><%= loc 'collocate_ca' %></th>
                  </tr>
                % }
              </thead>
              <tbody>
                <tr>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="left"> </td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="right"></td>
                  <td align="left"> </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!--
               <div style="clear:both" ></div>
               <div style="float: right; overflow: hidden" id="extra"><button onClick="showCollocatorSOM()"> </button></div>
          -->
        </div>
        <div id="tabs-4" style="display: flex;  padding:5px; flex-flow: row wrap;">
          <div id="info">
            <h3><%== loc 'about' %></h3>
            %= include(loc('abouttext'))
            % if($training_args && (@$lists)[0]) {
                <h3><%= loc 'training_parameters' %></h3>
                % if($training_args =~ /-type\s*3/) {
                  <p>Calculations are based on a word embedding model trained with an extension of <a href="https://github.com/wlin12/wang2vec/">wang2vec</a> using the following parameters:</p>
                  <div class="mono"><%= $training_args %></div>
                % } else {
                  <p>Calculations are based on a word embedding model trained with <a href="https://code.google.com/p/word2vec/">word2vec</a> using the following parameters:</p>
                  <div class="mono"><%= $training_args %></div>
              % }
           % }
           <h3>Source Code</h3>
           <ul>
            <li><a href="https://korap.ids-mannheim.de/gerrit/plugins/gitiles/ids-kl/dereko2vec">dereko2vec</a></li>
            <li><a href="https://korap.ids-mannheim.de/gerrit/plugins/gitiles/ids-kl/derekovecs">derekovecs</a></li>
           </ul>
           <h3><%== loc 'references' %></h3>
            %= include 'references'
           </div>
        </div>
      </div> <!-- tabs -->
    </div> <!-- topwrapper  -->
    <div style="clear: both;"></div>
    </div>
      <div class="footer">
        <span class="footertext">
          %= include(loc('footer'))
        </span>
      </div>
  </body>
</html>