var imge;
var count;
var imgFx;

window.addEvent('domready',function(){initEx()});

function initEx()
{
	getElements();
	addEvents();
	count = 1;
	imgFx = new Fx.Morph(imge, {duration: 300, transition: Fx.Transitions.Sine.easeOut, link:'chain' });
}
	
/* ============================================ */
function getElements()
{
	imge = $('rotativeImgs');
}

function addEvents()
{
	imge.addEvents({'click':imgOnClick});
}

/* ============================================ */
function imgOnClick()
{
	imgFx.start({'opacity':0});
	imgFx.complete = addNewImg;
	
}

function addNewImg()
{
	imgFx.cancel();
	if(count == 12) count = 0;
	count++;
	imge.set('html', '<img src="images/mat/mat'+count+'.jpg" width="300" height="197" style="cursor: pointer"/>');
	imgFx.start({'opacity':1});
	imgFx.complete = function(){ imgFx.cancel();};
}