var MyLexicon = [
  new Parsing.BinaryOrUnaryOp({name: 'plus',
                               match: '+',
                               leftBindingPower: 60}),

  new Parsing.BinaryOrUnaryOp({name: 'minus',
                               match: '-',
                               leftBindingPower: 60}),

  new Parsing.Symbol({name: 'left parenthesis',
                      match: '(',
                      nullDenotation: function(parser) {
                        var contents = parser.expression(0);
                        parser.advance('right parenthesis');
                        return contents;
                      }}),

  new Parsing.Symbol({name: 'right parenthesis',
                      match: ')'}),

  new Parsing.BinaryOp({name: 'multiply',
                        match: '*',
                        leftBindingPower: 70}),

  new Parsing.BinaryOp({name: 'divide',
                        match: '/',
                        leftBindingPower: 70}),

  new Parsing.Symbol({name: 'number',
                      match: /^[0-9]+/,
                      toHtml: function() {
                        return document.createTextNode(this.value);
                      },
                      nullDenotation: function() {
                        return this;
                      },
                      toString: function() {
                        return this.value;
                      }}),

  new Parsing.Symbol({name: 'whitespace',
                      match: /^\s+/,
                      ignore: true})
];

function onInputChange() {
  var code = $('.input').val();
  $('.tokenization').empty();
  $('.parse-tree').empty();

  if (!code)
    return;
  
  try {
    var tokens = Parsing.tokenize({lexicon: MyLexicon,
                                   text: code});
  } catch (e) {
    $('.tokenization').text(e.message);
    throw e;
  }

  jQuery.each(
    tokens,
    function() {
      var token = this;
      var node = $('<span class="token"></span>');
      node.text(token.value);
      node.hover(
        function onIn() {
          var overlay = $('<div class="overlay"></div>');
          overlay.text(token.name);
          overlay.css({left: $(this).position().left});
          $(this).append(overlay);
          $(this).addClass("highlight");
        },
        function onOut() {
          $(".overlay", this).remove();
          $(this).removeClass("highlight");
        });
      $('.tokenization').append(node);
    });

  var parser = new Parsing.Parser(tokens);
  var parseTree;
  try {
    parseTree = parser.parse();
  } catch (e) {
    $('.parse-tree').text(e.message);
    throw e;
  }

  $('.parse-tree').append(parseTree.toHtml());
}

$(window).ready(
  function() {
    $('.input').keyup(onInputChange);
    onInputChange();
  });