var textElement;
var originalText;
var speed = 50;
var minimumCharacters = 30;
var lastElement = {'outline': null, 'object' : null};
var elementsAreaCovered = undefined;
function selectTextElement()
{		
	return;
	document.body.addEventListener("mousemove", function(event)
	{
		//echo("Current Target: "+ event.target +"\t ID: "+ event.target.id);
		if(elementsAreaCovered == undefined )
		{
			elementsAreaCovered = document.createElement("div");
			elementsAreaCovered.id =  "elementsAreaCovered";
			elementsAreaCovered.style.position = "absolute";
			elementsAreaCovered.style.opacity = ".25";
			elementsAreaCovered.style.background = "#5555bb";
			//var htmlObject = document.getElementsByTagName("html");
			//echo("htmlObject: "+ htmlObject +"\t htmlObject[0]: "+ htmlObject[0]);
			//htmlObject[0].insertBefore(elementsAreaCovered, htmlObject[0].firstChild);
			document.body.insertBefore(elementsAreaCovered, document.body.firstChild);
			elementsAreaCovered.style.zIndex = "1000";
		}
		
		//echo("Target's Width, Height: "+ event.target.scrollWidth +", "+ event.target.scrollHeight +"\t Top, Left: "+ event.target.offsetTop +", "+ event.target.offsetLeft);
		elementsAreaCovered.style.width = event.target.scrollWidth +"px";
		elementsAreaCovered.style.height = event.target.scrollHeight +"px";
		elementsAreaCovered.style.top = event.target.offsetTop +"px";
		echo("scrollLeft: "+ event.target.scrollLeft +"   offsetLeft: "+ event.target.offsetLeft +"   offsetWidth: "+ event.target.offsetWidth);
		elementsAreaCovered.style.left = (event.target.scrollLeft + event.target.offsetLeft + event.target.offsetWidth) +"px";
		
		if(lastElement['object'] != null)
		{
			//echo("Object: "+ lastElement['object']);
			//echo("Style Object's outline "+ lastElement['outline']);
			//echo("Object's outline: "+ lastElement['object'].style.border);
			lastElement['object'].style.outline = lastElement['outline'];
		}
		//echo("Event: "+ event +"\n Src: "+ event.target);
		//echo("Before Style: "+ event.target.style.border);		
		
		lastElement['object'] = event.target;
		lastElement['outline'] = lastElement['object'].style.outline;
		//echo("Style Object's outline "+ lastElement['outline']);
		event.target.style.outline = "2px solid #5555bb";
		//echo("Style Object's outline "+ lastElement['outline']);
		//echo("After Style: "+ event.target.style.border);
	}, false);

	return;
	textElement = document.getElementById('greeting');
	originalText = textElement.innerHTML;
	underliner(0);
	//echo("Text element: "+ textElement.innerHTML);
}

function findWord(startingPosition)
{
	echo("Starting position: "+ startingPosition);
	for(var i = startingPosition; i < originalText.length; i++)
	{
		var char = originalText[i];
		//Find the places where the word ends.
		if(char == ' ' || char == '.' || char == ',')
		{
			if(startingPosition >= i)
			{
				startingPosition++;
				continue;
			}
			if(i - startingPosition <= minimumCharacters && char != '.' && char != ',')
				continue;
			var wordPosition = [startingPosition, i];
			echo("FindWord's WordPosition: "+ wordPosition);
			return [startingPosition, i];
		}
		
		//Found an html tag, so find the end of the tag.
		if(char == '<')
		{
			do
			{
				i++
			}
			while(originalText[i] != '>');
		}
	}
	return [startingPosition, originalText.length];
}

/*
 * Starting - included
 * ending - not included(could be a space, dot, tag ...)
 */
function underline(starting, ending)
{
	var text = originalText;
	var keyWord = '<span style="border: 1px solid #7777ff; border-width: 0px 0px 1px 0px; background: #fff" >'+ text.slice(starting, ending) +'</span>';
	var newText = text.substring(0, starting) + keyWord +  text.substring(ending);
	//echo( newText );
	textElement.innerHTML = newText;
}

function underliner(startingPosition)
{
	echo("Underliner @ "+ startingPosition);
	if(startingPosition >= originalText.length)
		return;
	var wordPosition = findWord(startingPosition);
	underline(wordPosition[0], wordPosition[1]);
	setTimeout("underliner('"+ wordPosition[1] +"')", speed * (wordPosition[1] - wordPosition[0]));
	
}

window.addEventListener("load", function()
{
	selectTextElement();
}, false);