var matList = [
{ title: 'Ceramiche 1', src: 'img/cer1.jpg'},
{ title: 'Ceramiche 2', src: 'img/cer2.jpg'},
{ title: 'Ceramiche 3', src: 'img/cer3.jpg'},
{ title: 'Ceramiche 4', src: 'img/cer4.jpg'},
{ title: 'Ceramiche 5', src: 'img/cer5.jpg'},
{ title: 'Ceramiche 6', src: 'img/cer6.jpg'},
{ title: 'Ceramiche 7', src: 'img/cer7.jpg'},
{ title: 'Ceramiche 8', src: 'img/cer8.jpg'},
{ title: 'Ceramiche 9', src: 'img/cer9.jpg'},
{ title: 'Ceramiche 10', src: 'img/cer10.jpg'},
{ title: 'Ceramiche 11', src: 'img/cer11.jpg'},
{ title: 'Ceramiche 12', src: 'img/cer12.jpg'}];



var index = 1;
var inche = 2;

function changeMat(index) {
	var img = document.getElementById('imagemat');
	img.alt = img.title = matList[index].title;
	img.src = matList[index].src;
}

function loadNext(inche) {
	var img = document.getElementById('imageload');
	img.alt = img.title = matList[inche].title;
	img.src = matList[inche].src;
}

function nextMat() {
	new Effect.Fade('imagemat', {  
	afterFinish: function() {		
	changeMat(index);
	new Effect.Appear('imagemat');
	loadNext(inche);
	index ++;
	inche ++;
	if (index >= matList.length) index = 1;
	if (inche >= matList.length) inche = 2;
	}
}); 
}

window.setInterval(nextMat, 5000);