function opacity(id, opacStart, opacEnd, millisec) 
{ 
    // speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 

    // determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) 
    { 
        for (i = opacStart; i >= opacEnd; i--) 
        { 
            window.setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed)); 
            timer++; 
        } 
    } 
    else if (opacStart < opacEnd) 
    { 
        for (i = opacStart; i <= opacEnd; i++) 
        { 
            window.setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed)); 
            timer++; 
        } 
    } 
} 

// change the opacity for different browsers 
function changeOpac(opacity, id) 
{ 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
} 

function shiftOpacity(id, millisec) 
{ 
    // if an element is invisible, make it visible, else make it ivisible 
    if(document.getElementById(id).style.opacity == 0) 
    { 
        opacity(id, 0, 100, millisec); 
    } 
    else 
    { 
        opacity(id, 100, 0, millisec); 
    } 
}

// find next element
function nextElement(o) 
{
    do o = o.nextSibling;
    while (o && o.tagName != 'SPAN');
    return o;
}

// find first element inside an element
function firstChildElement(o) 
{
    o = o.firstChild;
    while(o && o.tagName != 'SPAN') {
        o = o.nextSibling;
    }
    
    return o;
}

// set the opacity of an element to a specified value
function setOpacity(obj, o) 
{
    obj.style.opacity = (o / 100);
    obj.style.MozOpacity = (o / 100);
    obj.style.KhtmlOpacity = (o / 100);
    obj.style.filter = 'alpha(opacity=' + o + ')';
}

// make element invisible and set next one as current element
function getNextElement(elem) 
{	
    if (next = nextElement(elem)) 
    {
	    elem.style.display = 'none';
	    elem.style.zIndex = 0;
	    next.style.display = 'block';
	    next.style.zIndex = 100;
    } 
    else 
    {
	    // if there is not a next element, get the first element again
	    elem.style.display = 'none';
	    elem.style.zIndex = 0;
	    next = firstChildElement(elem.parentNode);
	    next.style.display = 'block';
	    next.style.zIndex = 100;
    }

    return next;
}

// set default values for parameters and starting element
function blendElements(id, speed, pause) 
{
    if (speed == null) 
    {
        speed = 150;
    }
    if (pause == null) 
    {
        pause = 1200;
    }

    var blend = document.getElementById(id);
    var elem = firstChildElement(blend);
    startBlending(elem, speed, pause);
}

// make element a block-element
function startBlending(elem, speed, pause) 
{
    elem.style.display = 'block';
    continueFadeElement(elem, 0, speed, pause);
}

// ASC: copied from http://www.sean.co.uk/a/webdesign/javascriptdelay.shtm
function pausecomp(millis) 
{
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while (curDate - date < millis);
} 

// set an increased opacity and check if the element is done blending
function continueFadeElement(elem, opacity, speed, pause) 
{
    opacity = opacity + 3;
    if (opacity < 103) 
    {
	    window.setTimeout(function() {fadeElement(elem, opacity, speed, pause)}, speed);
    } 
    else 
    {
	    // ASC: pause 1sec here to prevent MSIE image flash ...
	    var paws = pause - 1000;
	    if (paws < 0) 
	        paws = 0;
	    
	    window.setTimeout(function() {continueFadeElementMore(elem, speed, pause, paws)}, paws);
	    
	    //pausecomp(1000);
	    //setOpacity(elem, 0);
	 
	    // get the next element and start blending it again
	    //elem = getNextElement(elem);
	    //window.setTimeout(function() {startBlending(elem, speed, pause)}, paws);		
    }
}

function continueFadeElementMore(elem, speed, pause, paws)
{
    setOpacity(elem, 0);
	 
    // get the next element and start blending it again
    elem = getNextElement(elem);
    window.setTimeout(function() {startBlending(elem, speed, pause)}, paws);		
}

// set the opacity to a new value and continue the fading
function fadeElement(elem, opacity, speed, pause) 
{
    setOpacity(elem, opacity);
    continueFadeElement(elem, opacity, speed, pause);
}