var Scroller = Class.create(
{	
  initialize: function(scrollerWrapper)
	{
	  var scrollerWrapper = $(scrollerWrapper);
	  this.scroller       = scrollerWrapper.select('.scrollerWrapper')[0].down();
	  var arrows          = scrollerWrapper.select('.arrow');
	  var items           = this.scroller.childElements()
	  this.itemCount      = items.length;
    this.step           = 0;

    arrows.each(function(arrow)
    {
      Element.observe(arrow, 'click', function(e)
      {
        var scroller;
        var direction;

        if (arrow.hasClassName('arrowLeft')) 
        {
          direction = 1;
        }
        else if (arrow.hasClassName('arrowRight')) 
        {
          direction = -1;
        }

        this.scroll(direction);
        
        Event.stop(e);
      }.bind(this))
    }.bind(this));
    
    this.startAnimation();
	},
	
	scroll: function(direction)
	{
	  var fadeDuration = 0.5;
    this.step += direction;
    
    if (this.step < 0) this.step = this.itemCount - 1;
    if (this.step == this.itemCount) this.step = 0;
    
    Effect.Fade(this.scroller, 
    {
      duration:     fadeDuration, 
      afterFinish:  function()
      {
        this.scroller.setStyle({ marginTop: (this.step * -100) + 'px' });
        Effect.Appear(this.scroller, { duration: fadeDuration });
      }.bind(this)
    })
	},
	
	startAnimation: function() 
	{
	  new PeriodicalExecuter(function(pe)
	  {
	    this.scroll(1);
	  }.bind(this), 6);
	}
});

document.observe("dom:loaded", function() 
{
  var scroller = new Scroller('clients');
  var scroller = new Scroller('media')
});