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

    var buttons = $('buttons')    
    var show_buttons = new Fx.Tween(buttons, { transition:Fx.Transitions.Sine.easeInOut, duration: 600 })             
    
    buttons.setStyles({'display': "block"})
    show_buttons.start('opacity', 1.0)
        
    var current_client_id  = 0    
    var clients            = $$('.client')
    var client_image_div   = $('client-images')
    
    var show_client = function(id) {
      var current_client = clients[current_client_id]
      var next_client    = clients[id]

      var move_header_image   = new Fx.Tween(client_image_div, { transition:Fx.Transitions.Sine.easeInOut, duration: 600, link: 'chain' })             
      var hide_current_client = new Fx.Tween(current_client, { transition:Fx.Transitions.Sine.easeInOut, duration: 200, link: 'chain' }) 
      var show_next_client    = new Fx.Tween(next_client, { transition:Fx.Transitions.Sine.easeInOut, duration: 200, link: 'chain' }) 
      
      var position_for_id = id * 870
			
      move_header_image.start('left', -position_for_id).chain(function(){
				client_image_div.setStyle('left', -position_for_id)
			})
      
      hide_current_client.start('opacity', 0.0).chain(function() {
        current_client.setStyles({'display': "none"})         
	      next_client.setStyles({'display': "block"})
	         
	      show_next_client.start('opacity', 1.0)
	    })
      
      current_client_id = id
    }
    
    clients.each(function(client, index) {     
      if (index != current_client_id) {
        client.setStyles({'display': "none"})
        client.fade('hide') 
      }          
    })
    
    $('next').addEvent('click', function(e) {
      e.stop()
      show_client((current_client_id + 1) % clients.length)
    })
    
    $('prev').addEvent('click', function(e) {
      e.stop()
      show_client(current_client_id - 1 < 0 ? clients.length - 1: current_client_id - 1)
    })
    
  })()
})