var CrossFade = Class.create({

	  initialize: function(ids, duration, wait) {
	    this.elems = [];
	    this.i = 0;
	    this.duration = duration | 500;
	    this.wait = wait | 3000;
	    
      ids.each(function(id){
        this.elems.push($(id));
      }.bind(this));
//	    console.log(this.elems);
	    this.startPage();
    },
    
    swapFade: function() {
      var startElem = this.elems[this.i];
      if(this.i == this.elems.size() - 1) {
        this.i = 0;
      } else {        
        this.i++;
      }
      var endElem = this.elems[this.i];

    	startElem.setStyle({
        'zIndex': 1
      });    
     // console.log(startElem.getStyle('z-index'))	;
    	endElem.setStyle({
        'zIndex': '2'
      });    	
      
    	Effect.Appear(endElem, { 
    	  duration:1, from:0.0, to:1.0, fps: 24,
    	  afterFinish: function() {
    	    Effect.Fade(startElem, { duration:.1, from:1.0, to:0.0, fps: 5 });
//    	    console.log('fade');
//        	console.log(startElem);
    	  }
    	});
    	
//    	console.log('appear');
//    	console.log(endElem);
    	/*
    	endElem.setStyle({
        'display': 'none'
      });
      */
      
      
    },
    
    startPage: function () {
      new PeriodicalExecuter(function() {
        this.swapFade();
      }.bind(this), this.wait/1000);
    }    
        
    
});


/*

<script language="javascript">
	document.observe("dom:loaded", function() {  
	  var pr = new PeriodicalExecuter(function() {
	    sh = new Effect.Shake('usermenu_head_top', {distance: 5});
		delete sh;
	  }, 5);
	});
</script>

// the starting index in the above array.  It should be set to the value of the div which doesn't have the CSS Display property set to "none"
var i = 0;

// the number of milliseconds between swaps.  Default is five seconds.
var wait = 5000;

// the function that performs the fade
function swapFade() {
	Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
	i++;
	if (i == 3) i = 0;
	Effect.Appear(divs_to_fade[i], { duration:1, from:0.0, to:1.0 });
}
*/

// the onload event handler that starts the fading.