var element_array = [];


function xhtml_createElement(tag_name) {
    /*
      Wrap the document.createElement() function.
      In XHTML, you should use createElementNS(), but of course,
      this doesn't work in Internet Explorer because it's complete
      trash. So use whichever one will work.
    */

    if (typeof(document.createElementNS) != 'undefined') {
	return document.createElementNS('http://www.w3.org/1999/xhtml', tag_name);
    }
    else {
	return document.createElement(tag_name);
    }
}


function fade_selector(selector, start_color, end_color) {
    var elements = $$(selector);
    
    for(var h=0; h < elements.length; h++) {
	var elmt = elements[h];
	var text= elmt.firstChild.nodeValue;
	elmt.removeChild(elmt.firstChild);
	elmt.animNodes=[];

	for(var i=0; i < text.length; i++) {
	    var span = xhtml_createElement('span');
	    span.appendChild(document.createTextNode(text.substring(i,i+1)));
	    elmt.appendChild(span);
	    elmt.animNodes[elmt.animNodes.length]=span;
	}
	
	elmt.animCount=0;
	elmt.start_color = start_color;
	elmt.end_color = end_color;
	element_array.push(elmt);
	elmt.animTimer = setInterval('fade_element(' + (element_array.length-1) +')', 50);
    }
}


function fade_element(element_array_index) {
    var elmt = element_array[element_array_index];
    var c = elmt.animCount++;
    var noAnim=1;

    for(var i = 0; i < elmt.animNodes.length; i++) {
	var s = elmt.animNodes[i];
	var frac = Math.max(0,Math.min(1,(c-i)/10));

	if(s.animDone) {
	    continue;
	}
	
	noAnim = 0;
	
	var red = elmt.start_color[0] - (elmt.start_color[0]-elmt.end_color[0])*frac;
	var green = elmt.start_color[1]-(elmt.start_color[1]-elmt.end_color[1])*frac;
	var blue = elmt.start_color[2]-(elmt.start_color[2]-elmt.end_color[2])*frac;

	s.style.color='rgb('+parseInt(red)+','+parseInt(green)+','+parseInt(blue)+')';
	
	if(frac == 1) {
	    s.style.marginLeft = 'auto';
	    s.animDone=1;
	}
	
	else if(frac > 0) {
	    s.style.marginLeft = 0.6*(1-frac) + 'em';
	}
    }
    
    if (noAnim) {
	clearInterval(elmt.animTimer);
    }
    
    elmt.style.visibility='visible';
}