var ul = document.getElementById('left-box').getElementsByTagName('li');
var count = ul.length;
var n=0;
var paused = false;
for (i=0;i<ul.length;i++)
{
ul[i].onmouseover = function() {paused = true};
ul[i].onmouseout = function() {paused = false};
}

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--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            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 + ")";
    if (opacity == 0) {
    if (n>0)
    {
    ul[n-1].className = '';
    } else
    {
    ul[count-1].className = '';
    }
	ul[n].className = 'showing';
    }
}

function changeInfo()
{
if (paused)
{
setTimeout("changeInfo()", 3000);
return false;
}
opacity('left-box', 100, 0, 1000);
setTimeout("opacity('left-box', 0, 100, 1000)", 1000);
if (n<count-1)
{
n = n+1;
} else
{
n = 0;
}
setTimeout("changeInfo()", 7000);
}