mootools плавная смена картинки
 

Хочу сделать плавную смену картинок, затуханием. Одна исчезает, на ее месте другая появляется.
Есть mootools 1.11, с его помощью надо сделать. Не могу найти готовое решение, а сам не смогу написать.
Может кто, чем поможет?

<div id="box">
	<span><img src="1.jpg" alt="Photo" /></span>
	<span><img src="2.jpg" alt="Photo" /></span>
</div>

Я бы тоже не отказался от такого скрипта на mootools.

Может этот переписать кто-нибудь сможет?

<script type="text/javascript">
function smoothChange(id){ 
setTimeout(function(){ 
changePhoto(id)},5000); 
} 
function changePhoto(id){ 
var el=document.getElementById(id); 
var num=el.name.substring(3); 
if(num>2){num=0;} 
var dir="http://site.ru/imgs/"; 
el.src=dir+'pic'+(num*1+1)+'.jpg'; 
el.name='pic'+(num*1+1); 
}
</script>

<img width="270" class="photo" src="http://site.ru/imgs/pic1.jpg" name="pic1" onload="smoothChange('photoframe')" id="photoframe">