function listize(words, list){
  var prefix = $(list).attr('id'); 
  var words = $(words);
  words.each(function(i){
    $(list).append($("<li><span>"+words[i]+"</span></li>"));
  })
  $(list + ' span').click(function(){$(this).toggleClass('chosen')})
}

function submit(source,target){
  $('#source span').each(function(i){
    if ($(this).hasClass('chosen')){
      var span = $(this)
        .clone()
        .removeClass('chosen')
        .attr('id', 'source_' + i);
      span.click(function(){
        var original = '#source li:nth-child('+i+') span';
        $(original).removeClass('inlexicon');
      })
      $('#lexicon dl').append($("<dt>").append(span));
    }
  })

  $('.chosen').removeClass('chosen').addClass('inlexicon');
}

function route(words){
    if($('#source').children().length == 0) {
      listize(words, '#source', 'source');
    } else  if($('#target').children().length == 0) {
      listize(words, '#target', 'target');
    }
}

$(function(){

  $('button#tokenize').click(function(){
    var text = $('textarea#text').attr('value');
    var words = tokenize(text);
    route(words);
  });

  $('#lexicon').click(submit);


}) // ready


/*

tokenize
populate ul#source
populate ul#target

ul#source, ul#target attach lexicon entry events
ul#source, ul#target attach word selection events

#lexicon attach click event

#lexicon.click:
  get the original id
  find the original span  
  remove inlexicon class
  destroy dt, dd from dl





*/