var MoodPictures = Behavior.create({    
    options : { pictures : [] },    
    index : 0,
    
   initialize : function( opts ){
       this.options = $H(this.options).merge( opts ).toObject();
       if ( this.options.pictures.length > 2 ){           
           
           // preload the rest of the images
           for ( var i = 2, j = this.options.pictures.length; i < j; i++ ){
               var img = new Image();
               img.src = this.options.pictures[i].url;
           }
           
           this.updatePictures();
       }
   },
   
   updatePictures : function(){
       window.setTimeout( function(){
           this.index = this.index + 2 < this.options.pictures.length ? this.index + 2 : 0;
           
           var first = this.element.down('div.first > img');
           var second = this.element.down('div.second > img');
           
           new Effect.Opacity( this.element, { from : 1, to : 0, queue : 'front',  afterFinish : function(){
               first.src = this.options.pictures[ this.index ].url;
               second.src = this. options.pictures[ this.index + 1 < this.options.pictures.length ? this.index + 1 : 0 ].url;            
           }.bind( this ) } );
           new Effect.Opacity( this.element, { from : 0, to : 1,  queue : 'end' } );

           this.updatePictures();
       }.bind( this ), 5000);  
   }
});