Marquee not displaying all text - cutting off at different points

Marquee not displaying all text - cutting off at different points

My marquee doesn't seem to be displaying all the text I have placed in my
div. It always gets cut off at a certain point. Any idea how I can get it
show all the text?
This is my code so far (demo at http://jsfiddle.net/yLwhe/)
HTML
<div id="marquee">They came down the village, crossing ghostly forests,
almost falling apart. Their bags were full: garlands, amethysts, gold,
frankincense, myrrh. Incredible strings arrived with them: heavenly sounds
drew water from marble stones, provoking visions never seen before. Who
brought those tired magicians? Why had such a music enchanted our sordid
souls? Was no answer available? Did we need one? Voices overheard told of
incredible tales: children following mice, drowning, dead. Fear turned us
into shivering salty statues, unable to look back. Many years later,
explorers ventured and found this tiny town, every inhabitant eternally
still, imprisoned forever by strange chords.</div>
CSS
#marquee {
color: #000;
height: 16px;
padding-bottom: 5px;
}
JS
$(function() {
var marquee = $("#marquee");
marquee.css({"overflow": "hidden", "width": "100%"});
// wrap "My Text" with a span (IE doesn't like divs inline-block)
marquee.wrapInner("<span>");
marquee.find("span").css({ "width": "50%", "display": "inline-block",
"text-align":"center" });
marquee.append(marquee.find("span").clone()); // now there are two
spans with "My Text"
marquee.wrapInner("<div>");
marquee.find("div").css("width", "200%");
var reset = function() {
$(this).css("margin-left", "0%");
$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);
};
reset.call(marquee.find("div"));
});