var Slide = new Class({
     Implements: [Options],
     options:{
         timeout: 4000,
	 duration: 2000
     },
     'initialize':function(options){
         this.setOptions(options);
         this.slides = new Array();
	 $$('.slides').each(function(el){
	     el.setStyle('overflow','hidden')
	     var slide = $H({'imgs':[],'current':-1})
	     el.getElements('img').each(function(img, index){
                  slide.imgs.push(img.src);
	     });
             var a = el.getElement('a');
	     slide.main = Element('img',{'src':slide.imgs[0],
	                'style':"position:relative;opacity:1;visibility:visible;z-index:20",
			'tween':{'duration': this.options.duration},
	                'src':slide.imgs[0]}).inject(a);	     
	     slide.back = Element('img', {
                        'style':"position:relative;left:0px;top:-169px;opacity:0;visibility:hidden;z-index:10",
			'tween':{'duration': this.options.duration}}).inject(a);
	     slide.len = slide.imgs.length;
	     this.slides.push(slide);
	     var myImages = new Asset.images(slide.imgs,{
	         onComplete: function(){
		     this.change(slide);
	             this.change.periodical(this.options.timeout, this, [slide]);
		}.bind(this)		     
	     });
	 }.bind(this));
     },
     'change':function(slide){
	  slide.current = (slide.current+1)>=slide.len?0:slide.current+1;
	  var src = slide.imgs[slide.current];
	  this.show(slide.back,src);
          this.hide(slide.main);
	  var tmp=slide.main;
	  slide.main = slide.back;
	  slide.back = tmp;
	  slide.main.setStyle('z-index',20);
	  slide.back.setStyle('z-index',10);
     },
     'hide':function(img){
         img.fade('out');
     },
     'show': function(img, src){
	 img.src= src?src:img.src;
         img.fade('in');
     }
});
window.addEvent('domready', function(){
    var slide = new Slide();
});