% layout 'default';
% title 'In-browser Editor of LaTeX Fragments';
<link rel="stylesheet" type="text/css" href="css/editor.css" />
<%= javascript 'js/editor/examples.js' %>

<div style="display:inline; float:left; height: 95%; width: 45%; overflow-y:auto;">
<!--   <h2 class="bodyslogan"></h2>
 -->  <div id="ace-editor"></div>
</div>
<div style="display:inline; float:left; height: 500px; width: 45%; overflow-y:auto;"><h2 class="bodyslogan" id="previewtext">On-the-Fly Preview</h2><br />
<div style="background-color: #FFFFFF; display: none;
            word-wrap:break-word; margin: 5px;" id="onthefly"></div>
<div style="background-color: #ffddbb; display: none;
            word-wrap:break-word; margin: 5px;" id="log"></div>
</div>
<div style="clear:both; font-size:0px;">&nbsp;</div>
<div id="counter" style="width: 45%; background-color: #cccccc; display: inline;">&nbsp;</div>
<br /><div style="float:left"><%= select_field example =>
  [["Equations"=>"eqn"],["Tables"=>"tbl"],["Narrative"=>"nar"],["Babel"=>"bab"],["Unicode"=>"utf"],["Color"=>"clr"],["Web
  Graphics"=>"wgr"],["PSTricks Graphics"=>"psp"],["Metadata"=>"met"],["Wiki Syntax"=>"wik"],["Obfuscated"=>"xii"],["Turing Machine"=>"tur"],
  ['Tikz Basic' =>"tikz-basic"],['Tikz AC Voltage'=>'tikz-ac-drive-voltage'],['Tikz Rotated Triangle'=>'tikz-rotated-triangle'],
  ["Select Example"=>"","selected"=>"selected"]],id => 'example_select' %>

<%= select_field ltxstyle =>
  [["Article"=>"ltx-article"],["AMS Art"=>"ltx-amsart"],["APJ"=>"ltx-apj"],["Book"=>"ltx-book"],
["Report"=>"ltx-report"],["Select Style"=>"","selected"=>"selected"]],id => 'ltxstyle_select' %>
</div>
<div style="display:none"><div id="source"></div></div>
<%= javascript 'js/external/ace-min/ace.js' %>
%= javascript begin
var editor = ace.edit("ace-editor");
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/latex");
editor.getSession().setUseWrapMode(true);
editor.setValue("Wirte your LaTeX snippet...\n   ...or pick an example from the lower left menu.");
editor.clearSelection();

function show_log() {
    $('#onthefly').hide();
    $('#log').show();
}
function show_result() {
    $('#log').hide();
    $('#onthefly').show();
    if (!canMathML) { MathJax.Hub.Typeset(); }
}
function setup_message(data) {
 $('#message').html($('#message').text(data.status).html().replace(/\n/g,"<br />")+"<a href='#'>(Details)</a>");
 $('#message').hover( function () {show_log();}, function () {show_result();} );
 $('#message').click(  function () {
    $('#message').unbind('mouseenter').unbind('mouseleave');
    show_log();
  });
 $('#log').hide();
 $('#log').html($('#log').text(data.log).html().replace(/\n/g,"<br />"));
}


var ac_counter = 0;
var send_called = 0;
var mouse_pressed = 0;
var timeout = null;
var hasFatal = /fatal error/;
var hasPreamble = /^([\s\S]*\\begin{document})([\s\S]*)\\end{document}([\s\S]*)$/;

var sendRequest = function(tex, my_counter, onthefly){
    if (my_counter == ac_counter) {
  $('#log').html('');
  $('#previewtext').html('Converting...');
  $('#message').html('Converting...');
        $("body").css("cursor","progress");
  if (ac_counter == 1) send_called = 0;
  send_called++;
  $('#counter').html(send_called);
  //Check if preamble exists:
  var m = hasPreamble.exec(tex);
  var preamble = null;
  if (m != null) {
    preamble = "literal:"+m[1];
    //tex = "literal:"+m[2];
    tex = m[2];
  }
  $.post("/convert", { "tex": tex, "preamble" :
    preamble, "profile":"fragment"},
    function(data) {
      setup_message(data);
      if (onthefly) {
        if (!hasFatal.test(data.status)) {
          if ((data.result != '') && (my_counter <= ac_counter)) { 
            $('#onthefly').html(data.result);
            show_result();
          }
        } else {show_log();}
      }
      $('#previewtext').text('On-the-Fly Preview');
      $("body").css("cursor", "auto");
    },"json");
  }
}

function do_convert_on_the_fly(e) {
  if (e) { 
    var key = e.keyCode;
    if (!key) key = 0;
  } else {
    var key = 0;
  }
    
  ac_counter++;
  if (((key < 37 || key > 40) && key > 32 && key <= 250) || key == 8 || key == 0){
    // immediately cancel outstanding requests
    if (timeout) clearTimeout(timeout);
        ac_counter--;
    var tex = editor.getValue();
    if (!tex) {
      ac_counter = 0;
      $('#onthefly').html(' ');
      return;
    }
    // call erst nach 300ms
    timeout = setTimeout(function(){sendRequest(tex, ac_counter, true)}, 300);
  }
}


var examples = new Array();
load_examples(examples);
$(document).ready(function() {
  $('#example_select').change(function () {
    var str = "";
    $('#example_select option:selected').each(function () {
      str = $(this).attr("value");
    });
    if (str.length>0) {
      $('#onthefly').html('');
      editor.setValue(examples[str]);
      editor.clearSelection();
    }
  });

  $('#ltxstyle_select').change(function () {
    var stylename = "";
    $('#ltxstyle_select option:selected').each(function () {
      stylename = $(this).attr("value");
    });
    if (stylename.length>0) {
      // Dynamically load the CSS:
      $('#ltxstyle_link').remove();
    $("<link>").appendTo("head").attr({ rel: 'stylesheet', type: 'text/css',
      id: 'ltxstyle_link',
      href: 'css/external/'+stylename+'.css'});
    }
  });


  editor.on('change', function() {
    setTimeout(do_convert_on_the_fly, 100);
    show_result();
  });
});

% end