$(document).ready(function(){

  var listLength = 0;
  $("div.list span").each(function(){
    listLength+=$(this).outerWidth();
  });

  var startPosition = parseInt($("div.list").css("left"));
  var endPosition = listLength - ($("#clientsList").width() - $("div.arrowLeft").width() - $("div.arrowRight").width());

  var position = startPosition;
  var movingLeft = 0;
  var movingRight = 0;

  $(".arrowLeft").mouseover(function(){
    movingLeft = 1;
    movingRight = 0;
    shiftListLeft();
  })

  $(".arrowLeft").mouseout(function(){
    movingLeft = 0;
    movingRight = 0;
  })

  $(".arrowRight").mouseover(function(){
    movingRight = 1;
    movingLeft = 0;
    shiftListRight();
  })

  $(".arrowRight").mouseout(function(){
    movingLeft = 0;
    movingRight = 0;
  })

  $(window).resize(function(){
    endPosition = listLength - ($("#clientsList").width() - $("div.arrowLeft").width() - $("div.arrowRight").width());
  });
 
  function shiftListLeft()
  {
    if(movingLeft == 1 && position < startPosition)
    {
      position+=5;
      $("div.list").css("left",position);
      setTimeout(shiftListLeft,"10");
    }
  }

  function shiftListRight()
  {
    if(movingRight == 1 && position >= - parseInt(endPosition))
    {
      position-=5;
      $("div.list").css("left",position);
      setTimeout(shiftListRight,"10");
    }
  }

});