var ProductSlider = Class.create({
    
    stopped: true,
				 
    duration: 2,
    delay: 1,
  
    initialize: function( container) {
      
	this.container = $( container);
    
	this.setAdditionalStyles();
		
    },
	
    setAdditionalStyles: function () {
    
	var leftOffset = 0,
	    products = this.container.select( 'li'),
	    setOffest = function( li) {
	  
	    li.setStyle( { left: leftOffset + 'px',
			   opacity: li.parentNode.getDimensions().width > leftOffset ? 1 : 0 });
	  
	    leftOffset += li.getDimensions().width;
	  
	}.bind( this);
	
	products.each( function( li) {
	
	    setOffest( li);
	  
	});
	
	if( ( leftOffset - products.first().getDimensions().width) < this.container.getDimensions().width) {
	 
	    products.each( function( li) {
	  
		var clone = li.clone( true);
	      
		li.up().insert( { bottom: clone});
		  
		setOffest( clone);
	      
	    });
	  
	}
      
    },
				 
    start: function() {
      
	this.stopped = false;
	
	this.slide();
      
    },
				 
    stop: function() {
      
	//this.runningEffect.cancel();
      
	return this.stopped = true;
	      
    },
    
    slide: function() {
     
	if( !this.stopped) {
	  	  
	    var elements = this.container.select( 'li');
      
	    this.runningEffect = new Effect.Parallel( [ new Effect.Opacity( elements.first(), { sync: true, 
												from: 1.0, 
												to: 0.0 }),
							elements.map( function( li) {
	    
								return new Effect.Move( li, { sync: true, 
											      x: li.positionedOffset().left - elements.first().getDimensions().width, 
											      mode: 'absolute',
											      transition: Effect.Transitions.linear,
											      afterFinish: function() { 

												  if( li.positionedOffset().left <= ( li.getDimensions().width * -1)) {
												    
												      this.container.insert( { bottom: li.remove()});
												      
												      var p = li.previous();
												      
												      li.setStyle( { left: ( p.positionedOffset().left + p.getDimensions().width) + 'px'});
												    
												  }
												
											      }.bind( this)});
							      
							}.bind( this)),
							new Effect.Opacity( elements.select(function( e){

										return e.parentNode.getDimensions().width <= e.positionedOffset().left;
							  
									    }).first(), { sync: true, 
											  from: 0, 
											  to: 1 })].flatten(), { duration: this.duration,
														 delay: this.delay,
														 afterFinish: function() {

														    this.slide();
														  
														 }.bind( this)});
				  
	}
      
    }
          
});

Event.observe( document, 'dom:loaded', function() {

    $$( '.slider').each( function( slider) {

	var productSlider = new ProductSlider( slider);
	    productSlider.start();
	
	/*$H( { enter: 'stop', leave: 'start'}).each( function( p) {
	  
	    slider.observe( 'mouse' + p.key, function( s) {
	      
		productSlider[ p.value]();
	      
	    });
	  
	});*/

    });

});