/*
colors is just a list of the possible hexadecimal representation of the color values.
Basically all you have here is a look-up table.
*/
  	colors = new Array(14)
  	colors[0]="0"
  	colors[1]="1"
  	colors[2]="2"
  	colors[3]="3"
  	colors[4]="4"
  	colors[5]="5"
  	colors[5]="6"
  	colors[6]="7"
  	colors[7]="8"
  	colors[8]="9"
  	colors[9]="a"
  	colors[10]="b"
  	colors[11]="c"
  	colors[12]="d"
  	colors[13]="e"
  	colors[14]="f"

/*
after this comment, you just encountered your first function definition. It has not been called
yet, but when it does:

this function will generate a random color code. Any single "digit" will be at least 6 and 
at most d.
For example:
#7689da;

The only error here is that trailing semicolon. Why? because later on you are assigning
 that color to a particular letter, but when you assign these css values via javascript,
they may not contain the ending semicolon. The semicolon is required only in css stylesheets
or <style type="text/css">...</style> blocks to delimit one property from the other. Since in
javascript you can only set/specify one property at a time, there is no need for the trailing
semicolon. As a result, you will get runtime errors because it is an unexpected character on the
property value.
*/
  function genTextHex(){
  
  	colorStart="#"
  	for (j = 0; j == 0; j++){
      color = colors[6 + Math.floor(Math.random() * 7)] 
            + colors[6 + Math.floor(Math.random() * 7)]
            + colors[6 + Math.floor(Math.random() * 7)]
            + ";";
  	}
  	return colorStart + color;
  }

/*
after this comment, you encounter your second function definition. It has not been called yet
either, but when it does:
Like the previous function this also generates a hex color string.
The range of colors is slightly different. Starts out at 6 and ends at e
#86e9ed;
again, the trailing semicolon would be problematic if assigning the result to a css property 
via javascript.
*/
  function genHex() {

  	colorStart="#"
  	var r = colors[6 + Math.floor(Math.random() * 8)] 
  	var g = colors[6 + Math.floor(Math.random() * 8)] 
  	var b = colors[6 + Math.floor(Math.random() * 8)] 

  	return colorStart + r + g + b + ";";
  }

/*
like before, here is another function definition which has not been called yet.
this function is simply altering/setting the color for one random letter at a time.
"i" is a random integer which is at least 0 and at most 23. It represents one
of your 23 letters.
*/
  function alter() {
   	i = Math.floor(Math.random() * 24);
  	document.getElementById(i).style.color=genHex();	
   }


//here you are just defining/specifying the default letter
  var letter = 0;

/*
like before, here is another function definition which has not been called yet.
this funtion changes the following css properties for the specified letter:
visibility,fontSize,color
if you notice, the last line here calls genHex() which returns a string similar to "#86e9ed;"
That trailing semicolon would be a problem here. That's why you need to get rid of it.
*/  
  function alterText() {
    document.getElementById(letter).style.visibility="visible";
    document.getElementById(letter).style.fontSize=Math.floor(140 + Math.random() * 100) + "%";  	  	   
    document.getElementById(letter++).style.color=genHex(); 	  
   }


  


/*
this is the point where the above functions get  called for the first time. So your analysis
should start here.

First of all, setInterval() takes at least two arguments, the first one is a function that it will
call repeatedly. The second argument is the number of milliseconds between each call.
So, if you wanted to call alterText every 5 seconds, the second argument shoud be 5000!

With this in mind, this is what your first setInterval is doing every .110 seconds:
call alterText();
	initially letter was 0 and alterText actually does this:
	document.getElementById(letter).style.visibility="visible";
	which translates to:
	document.getElementById(0).style.visibility="visible";

	This is where you might run into problems on some browsers because the id attribute of an element 
	should start with an alphabetic character. That's why on my post I prefixed all your letters with an "L".
	and adjusted the javascript code where appropriate. So, the updated line of code would be:
	document.getElementById("L" +0).style.visibility="visible";

	The same logic applies to the other two lines. On the last line, however, you are calling genHex()
	which is contains that problematic trailing semicolon. Get rid of it. Lastly, it also increments letter.
	This single statement:
	document.getElementById(letter++).style.color=genHex(); 	  

	is equivalent to these two statements:
	document.getElementById(letter).style.color=genHex();
	letter++;

This concludes the logic flow for alterText() on one call. A similar analysis on alter() would reveal its logic flow.

However, the real problem with these setInterval() calls is that they keep calling alterText() and alter() 
forever every .110 and .100 seconds respectively!

if you go back to alterText, you would realize that there are at most 23 letters. Hence you should not call alterText more than 23 times
because there is no letter with id 24. The largest you have is "L23".

The question, how do you cancel that repeated call after the 23rd time? It turns out that setInterval returns an object.
(think of it as a value) that represents that "repeating process". So, you need to capture that value as in:
var process1 = setInterval("alterText();", 110);

not that you know that process1 refers to the repeated call to alterText(), if you want to cancel that repeated call to alterText,
then you would need to execute the following statement:
clearTimeout(process1);

With this in mind, at the end of alter text you need to check if the last letter updated is 23 and if so,
clear the timeout for that process.

This is what I did, but mostlikely what you are after is a continuous, never-ending color-changing effect on the letters.
If so, you do not need to worry about the timeouts. If this is in fact what you are after and can't get it to work, let me know so that I 
update the post.
*/
    setInterval("alterText();", 110);
    setInterval("alter();", 100);
    setInterval("alter();", 100);