window.addEvent('domready', function() { 

function slideShow( Obj ){
	var pass = this;
	// initializing
	this.curImg = 0;
	this.slides = Obj;
	var curr=0;

	this.slides.each( function( img, index ){ 
	
	var Alem =   new Element ('a',{'href':'javascript:void(null)', 'class': 'control', id:'next-'+index,
							  'events': { 'click': function(){ sshow.current(index); if(this.removeClass('active'))this.addClass('active'); }
								 	 }
	}).inject('banners-controller').set('text',(index+1));
 	if(index==0)
	Alem.addClass('active');

		if( index > 0 ) img.fade(); 
		img.set('morph', { duration: 600 });
	}, this);
	 
	this.next = function(){
		pass.curImg++;
		curr++;
		
		this.slides.each( function( img, index ){ 
			img.morph({ opacity: 0 });

		}, this);
		
		$$('a.control').each( function( alem, i ){
					alem.removeClass('active'); 						   
					var curi = (i+1);
					if(curr==curi){
					//console.log(curr);
					}
					
					
		});

		

		if( curr == this.slides.length ) curr = 0;
		$('next-'+(curr)).addClass('active');
		if( pass.curImg == this.slides.length ) pass.curImg = 0;
		this.slides[ pass.curImg ].morph({ opacity: 1 });
		
	
	
	}
	this.prev = function(){
		pass.curImg--;
		this.slides.each( function( img, index ){ 
			img.morph({ opacity: 0 });
		}, this);
		if( pass.curImg < 0 ) pass.curImg = this.slides.length - 1;
		this.slides[ pass.curImg ].morph({ opacity: 1 });
	}
	
	this.current = function(index) {
		$$('a.control').each(function(alem,i) {
			alem.removeClass('active'); 
				
		});
		//console.log(index);
		this.slides.each( function( img ){ 
			img.morph({ opacity: 0 });
		}, this);
		
		this.slides[index].morph({ opacity: 1 });
	}
}

// Turn it on like this:
sshow = new slideShow( $$('#banners-index img') );
// It will fade to the next frame every 3 seconds
sshow.next.periodical( 5000, sshow );
//$('prev_button').addEvent( 'click', function(){ sshow.prev() } );  
})