var n=5;
var count = 5;
var img;

function set_fade() {
	var obj = document.getElementById('menu-container');
	var arr = new Array;
	for (i=5;i>0;i--) {
		arr[i] = new Image;
		arr[i].src = '../gfx/fade/bg'+i+'.jpg';
	}
	obj.innerHTML += '<img id="fade" src="../gfx/fade/bg5.jpg" />';
	obj.style.backgroundImage = "url('../gfx/menu-bg-fade.png')";
	obj.className = 'fade';
	document.getElementById('main-container').left = '458px';
	var img = document.getElementById('fade');
	setTimeout("changeImage()", 5000);
}

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) {
    	document.getElementById('fade').src = '';
		document.getElementById('fade').src = '../gfx/fade/bg'+n+'.jpg';
    }
}

function changeImage()
{
opacity('fade', 100, 0, 1800);
setTimeout("opacity('fade', 0, 100, 1800)", 1800);
if (n>1)
{
n = n-1;
} else
{
n = count;
}
setTimeout("changeImage()", 10000);
}