var dSlide = new Class({

	Implements: [Events, Options],

	options: {
		control: {
			anterior : null,
			posterior : null	
		},
		tiempo : 8000
	},

	initialize: function(elem, options){
		this.setOptions(options);
		this.element = $(elem);
		this.elementList = this.element.getElements('li');
		this.incremento = 0;
		this.step = this.elementList[0].getSize().x;
		var _view = Math.round(this.element.getSize().x/this.step);
		this.elementListCount = this.elementList.length;
		this.stepPosteriorMax = (this.step*(this.elementListCount-_view))*-1;
		this.element.setStyle('width', (this.step*this.elementListCount));
		this.fx = new Fx.Tween(this.element, {
			duration: 500,
			transition: 'expo:in:out',
			link: 'chain',
			property: 'margin-left'
		}).addEvent('start', function(){
			$(this.options.control.anterior).fade(this.incremento<0 ? 'show' : 'hide');
			$(this.options.control.posterior).fade(this.incremento>this.stepPosteriorMax ? 'show' : 'hide');
		}.bind(this)).fireEvent('start').addEvent('complete', function(){
			$clear(this.periodical);
			this.move();
		}.bind(this));
		//
		if(this.elementListCount<=_view){
			$$('#'+ this.options.control.anterior+', #'+ this.options.control.posterior).hide();
		}else{
			$(this.options.control.anterior).addEvents({
				'click' : function(ev){
					ev.stop();
					this.prev();
				}.bind(this)
			});
			//
			$(this.options.control.posterior).addEvents({ 
				'click' : function(ev){ 
					ev.stop();
					this.next();
				}.bind(this) 	  
			});
			//
			this.move();
		}		
	},	
	prev : function(){
		if(this.incremento<0){
			this.incremento += this.step;
			this.fx.start(this.incremento);
		}
	},	
	next : function(){
		if(this.incremento>this.stepPosteriorMax){
			this.incremento -= this.step;
			this.fx.start(this.incremento);
		}else{
			this.incremento = 0;
			this.fx.start(this.incremento);
		}
	},
	move : function(){		
		this.periodical = this.next.periodical(this.options.tiempo, this);
	}
});