var frame = Array();
frame.push(document.getElementById("im1"));
frame.push(document.getElementById("im2"));
frame.push(document.getElementById("im21"));
frame.push(document.getElementById("im23"));
frame.push(document.getElementById("im11"));
frame.push(document.getElementById("im33"));
frame.push(document.getElementById("im03"));
frame.push(document.getElementById("im3"));
frame.push(document.getElementById("im31"));
frame.push(document.getElementById("im12"));
frame.push(document.getElementById("im22"));
frame.push(document.getElementById("im32"));
frame.push(document.getElementById("im01"));
frame.push(document.getElementById("im02"));

var famiglia = document.getElementById("famiglia");

var indice = 0;
var intervallo;
        var zInterval = null, pause=false;

function carica(){
    famiglia.xOpacity = 1;
    intervallo = setInterval (fam, 100);
    
}

function fase2(){
    for (i = 0; i< frame.length; i++){
        frame[i].xOpacity = 0;
    }
    intervallo = setInterval(appari, 50);
}

function fam(){
        famiglia.xOpacity -= 0.05;
        if (famiglia.xOpacity > 0.3)
            setOpacity(famiglia);
        else{
            setTimeout(fase2, 500);
            clearInterval(intervallo);
        }
            
}

function appari(){
    opa = frame[indice].xOpacity;
    if (opa == 0){
        frame[indice].style.display = "block";
    }

    opa += .15;
    frame[indice].xOpacity = opa;
    setOpacity(frame[indice]);

    if (opa> .99){
        indice++;
    }

    if (indice == frame.length){
        clearInterval(intervallo);
    }


}


    function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}