$().ready(function(){

  $('#left').hide();
  
  var width = $('#top-payed li').length;
  width = width * 228;
  $('#top-payed').css('width', width);
  
  $('#left').click(function(){
    if($('#right').css('display')=='none'){
      $('#right').show();  
    }
    var margin = $('#top-payed').css('margin-left');
    var total = $('#top-payed li').length;
    
    total = total - 3;
    total = total * 228;
    margin = margin.slice(0,-2);
    margin = margin - (-228);
    $('#left').hide();
      $('#top-payed').stop(0,1).animate({'marginLeft':margin}, 500, function() {
    $('#left').show();
    if(margin==0)
    $('#left').hide();
  });
    
    return false;
  });
  
  $('#right').click(function(){
    if($('#left').css('display')=='none'){
      $('#left').show();  
    }
    var margin = $('#top-payed').css('margin-left');
   //console.log(margin);
    var total = $('#top-payed li').length;
    total = total - 3;
    total = total * 228;
    //console.log(total);
    margin = margin.slice(0,-2);
    margin = margin - 228;
    $('#right').hide();
      $('#top-payed').animate({'marginLeft':margin}, 500, function() {
    $('#right').show();
    if(margin==-(total-228))
    $('#right').hide();
  });
   

    return false;
  });
  
  $('#left').hover(function(){
    $(this).css('background-image','url("/_mod_files/ce_images/main/left_active.jpg")');
  },
  function(){
    $(this).css('background-image','url("/_mod_files/ce_images/main/left.jpg")');  
  });
  
  $('#right').hover(function(){
    $(this).css('background-image','url("/_mod_files/ce_images/main/right_active.jpg")');
  },
  function(){
    $(this).css('background-image','url("/_mod_files/ce_images/main/right.jpg")');  
  });
  
});