$(function() {
  $('body').addClass('js');

  $('h1 em').html(
    '<span id="b">b</span>'+
    '<span id="o">o</span>'+
    '<span id="u">u</span>'+
    '<span id="n">n</span>'+
    '<span id="c">c</span>'+
    '<span id="i">i</span>'+
    '<span id="n2">n</span>'+
    '<span id="g">g</span>'+
    '<span id="d">d</span>'+
    '<span id="a">a</span>'+
    '<span id="n3">n</span>'
  );

  $('p, h1 .name').each(function() {
    var arrLinks=[];
    var intIndex=0;
    $('a', $(this)).each( function() {
      arrLinks[intIndex++]=$(this);
      $(this).replaceWith('<x>').remove();
    });
				
    var thehtml=$(this).html();
    thehtml=thehtml.replace(/([\w]+?)([-!"#$%&'()*+,.:;=?@[\\\]^_`{|}~])/g, '<span>$1</span>$2');
    thehtml=thehtml.replace(/([-!"#$%&'()*+,.:;=?@[\\\]^_`{|}~])/g, '<span>$1</span>');
    thehtml=thehtml.replace(/([\w]+?)([\s])/g, '<span>$1</span>$2');
		
    $(this).html(thehtml);
		
    intIndex=0;
    $('x', $(this)).each(function() {
      $(this).replaceWith(arrLinks[intIndex++]);
    });
  });
	
  $('p span, p a, #links li, h1 em span, h1 .name span').draggable({
    zIndex: 2700,
    start: function(event, ui) {
      if (window.getSelection) window.getSelection().removeAllRanges();
    },
    stop: function(event, ui) {
      if (window.getSelection) window.getSelection().removeAllRanges();
    }
  });
});