$(document).ready(function(){

  var totalwidth = $("#articleStrip li").size() * 944;
  var ul = $("#articleStrip");
  var effect_in_progress = false;
    
  var recurrentFunc1 = function() {
    if (effect_in_progress) {
      return false;
    }
  
    var left = parseInt(ul.css('marginLeft'));
    
    if (left < 0) {
        effect_in_progress = true;
        $('#tabs li.act').removeClass('act').prev().addClass('act');
        
        ul.animate({
            marginLeft: '+=944px'
        }, 200, 'linear', function() { effect_in_progress = false; } );
    }
  };
  
  var recurrentFunc2 = function() {
    if (effect_in_progress) {
      return false;
    }
  
    var left = parseInt(ul.css('marginLeft'));
  
    if (totalwidth + left - 944 > 0) {
//      console.log(totalwidth + ' ' + left + ' ' + (totalwidth + left - 460));
      effect_in_progress = true;
      $('#tabs li.act').removeClass('act').next().addClass('act');
      
      ul.animate({
          marginLeft: '-=944px'
      }, 200, 'linear', function() { effect_in_progress = false; });
    }
  };
  
  var recurrentFunc3 = function() {
    if (effect_in_progress) {
      return false;
    }
  
  	//alert($(this).text());
    var left = (1 - parseInt($(this).attr('rel'))) * 944;
    var diff = (parseInt(ul.css('marginLeft')) - left) / 944;
    
    if (diff < 0) {
      diff *= -1;
    }
    
    if (diff == 0) {
      return false;
    }
    
    $('#tabs li.act').removeClass('act');
    $(this).parent().addClass('act');
    
    //alert($(this).text() + ' => ' + left);
    
    effect_in_progress = true;
    
    ul.animate({
        marginLeft: left + 'px'
    }, diff * 200, 'linear', function() { effect_in_progress = false; });
   
    return false;
  };

  $("#prev").click(function(){
    recurrentFunc1();
    return false;
  });
  
  $("#next").click(function(){
    recurrentFunc2();
    return false;
  });
  
  $("#tabs li a").click(recurrentFunc3);
});