jQuery(function($) {
  "use strict";

  var TEMPLATES = new LuigiTemplate.Cache({
    save: [
      "<li>",
        "<a ",
          "href='#' ",
          "title='Load \"%{name|h}\".' ",
          "data-name='%{name|h}' ",
          "data-text='%{text|h}' ",
        ">",
          "%{name|h}",
        "</a>",
      "</li>",
    ],

    none: [
      "<li class='disabled'>",
        "<a ",
          "href='#' ",
          "title='No saved results.' ",
        ">",
          "No saved results...",
        "</a>",
      "</li>",
    ],

    help: [
      "<li class='dropdown-header'>",
      "  Examples",
      "</li>",

      "%{examples}",

      "<li class='divider'>",
      "</li>",
    ],

    help_row: [
      "<li>",
        "<a ",
          "href='#' ",
          "class='example' ",
          "data-text='%{text|h}' ",
        ">",
          "%{num|h}. %{name|h}",
        "</a>",
      "</li>",
    ],
  });

  // init mathjax
  var math = (function() {
    var delay   = 150, // delay after keystroke before updating
        preview = document.getElementById("math-preview"),
        buffer  = document.getElementById("math-buffer"),
        timeout = null,  // timeout ID
        is_running = false, // true when MathJax is processing
        is_pending = false, // true when a typeset has been queued
        old_text = null; // used to check if an update is needed

    // Swap render buffers.
    //
    // Note from MathJax example: We use visibility:hidden rather than
    // display:none since the results of running MathJax are more
    // accurate that way.
    function swap_buffers() {
      var tmp_buffer = preview,
          tmp_preview = buffer;

      // update buffer
      buffer = tmp_buffer;
      buffer.style.visibility = "hidden";
      buffer.style.position = "absolute";

      // update preview
      preview = tmp_preview;
      preview.style.position = "";
      preview.style.visibility = "";
    }


    function preview_done() {
      is_running = is_pending = false;
      swap_buffers();
    }

    function create_preview() {
      // clear timeout value
      timeout = null;

      if (is_pending)
        return;

      // get editor text
      var text = "\\[" + editor.getValue() + "\\]";

      if (text === old_text)
        return;

      if (is_running) {
        is_pending = true;
        MathJax.Hub.Queue(create_preview);
      } else {
        buffer.innerHTML = old_text = text;
        is_running = true;
        MathJax.Hub.Queue(
          ['Typeset', MathJax.Hub, buffer],
          preview_done
        );
      }
    }

    // init callback
    var callback = MathJax.Callback(create_preview);
    callback.autoReset = true;

    return {
      update: function() {
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        timeout = setTimeout(callback, delay);
      },
    };
  })();

  // init editor
  var autosave_timeout = null,
      editor = ace.edit('editor');
  editor.setShowPrintMargin(false);
  editor.setTheme('ace/theme/monokai');
  editor.getSession().setMode('ace/mode/latex');
  editor.getSession().on('change', function(e) {
    // queue update
    math.update();

    if (autosave_timeout) {
      // clear autosave timeout
      clearTimeout(autosave_timeout);
      autosave_timeout = null;
    }

    // set autosave timeout
    autosave_timeout = setTimeout(function() {
      // autosave text
      localStorage.setItem('mathy_last', editor.getValue());
    }, 1000);
  });

  (function() {
    // load autosaved text
    var last = localStorage.getItem('mathy_last');
    if (!last)
      return;

    // set text
    editor.setValue(last);
  })();

  $('#saves').on('click', 'a', function() {
    if ($(this).parent().hasClass('disabled'))
      return false;

    // get text, hide dropdown
    var text = $(this).data('text');
    $('body').trigger('click');

    setTimeout(function() {
      // set editor text
      editor.setValue(text);
    }, 10);

    // stop event
    return false;
  }).parent().on('show.bs.dropdown', function() {
    // load saves
    var saves = localStorage.getItem('mathy_saves');
    saves = saves ? JSON.parse(saves) : [];

    // build html
    var html = '';
    if (saves.length > 0) {
      html = $.map(saves, function(row) {
        return TEMPLATES.run('save', row);
      }).join('');
    } else {
      html = TEMPLATES.run('none');
    }

    // populate html
    $('#saves').html(html);
  });

  $('#save').click(function() {
    // get name
    var name = prompt('Enter name:', '');
    if (!name)
      return false;

    // build sortable name
    var sort = name
      .replace(/\s+/g, ' ')
      .replace(/^\s+|\s+$/g, '')
      .toLowerCase();

    // load saves
    var saves = localStorage.getItem('mathy_saves');
    saves = saves ? JSON.parse(saves) : [];

    if ($.grep(saves, function(row) {
      return row.save == sort;
    }).length > 0) {
      if (!confirm("Replace existing \"" + name + " \"?"))
        return false;
    }

    // append to results
    saves.push({
      name: name,
      sort: sort,
      text: editor.getValue(),
    });

    // write saves
    localStorage.setItem('mathy_saves', JSON.stringify(saves.sort(function(a, b) {
        return b.sort < a.sort;
    })));

    return false;
  });

  $('#help').html(TEMPLATES.run('help', {
    examples: $.map(DATA.examples, function(row, i) {
      return TEMPLATES.run('help_row', $.extend({}, row, {
        num: i + 1,
        text: row.text.join('\n'),
      }));
    }).join(''),
  })).on('click', 'a', function() {
    var text = $(this).data('text');

    // hide dropdown
    $('body').trigger('click');

    setTimeout(function() {
      // load text
      editor.setValue(text);
    }, 10);

    // stop event
    return false;
  });
});